[Solved] A more interesting price display using CSS

[devil-named-adam]

Hi all,

I’m trying to create a more interesting price display using CSS and I need a little help doing it. Anyone feeling helpful? Take the price £2,486.00. I’d like to split the currency symbol from the units (pounds) and the decimals (pence) where the decimals are displays smaller but aligned to the top of the text, almost like a <sup> but without using an actual superscript tag (as it wouldn’t be very semantic).

So far I’ve managed to split out the price into <spans> (I’d like to to keep it inline):

"

.price" wraps the whole thing
".currency" wraps the actual currency symbol (it can vary on my site between pounds, euros and we’ve the capability for dollars and yen)
".units" are whole pounds, euros, etc
".decimals" are anything after – and including – the decimal point (pence, cents, etc)
[/list:u]

Code:

£2,486

Here is an image preview of what I want to achieve
[img]http://macwarehouse.merus.co.uk/test/currency-display.jpg[/img]

I’ve tried a few combinations but can never seem to get the whole thing aligned to the top. What would be the best way of aligning it cross-browser.

Thank you.

[TheDoc]

The vertical align property should set you free!

Check out this quick demo I put together:

Code:

$5,310.79

[devil-named-adam]

Thanks for that! That helped a lot.

Developing it further, and using the snippet from http://css-tricks.com/snippets/css/prevent-superscripts-and-subscripts-from-affecting-line-height/, I came up with a good looking price display. I’ve only tested it in firefox so far – so my apologies if it needs tweeking for other browsers.

And because it’s good to share, the code is:

Code:

Pricing Display

This item costs $5,310.79 Dollars.

Like the car sir? That’ll be €587,123.87 Euros please.

Show me the money £12,4680,680.61 Pounds.

My father died recently and left in his will the sum of ¥6,980,499.00 Yen. Please wire over $5,310.79 to my Nigerian bank account and I will gladly share the fund with you. Classic.

[Author]

Posts