Hi,
I am trying to find out a "cross-browsers" way to display price amounts using CSS.
The idea that directly came to my mind was to split the value (integer,decimal) and use the matrix property to scale and translate the decimal part such as:
(of course with all variations of "transform").
The only problem is twofold:
1) IE7-8 for which I need to use filter and -ms-filter (which means that for IE9, I have a conflict)
2) for IE7-8, I also need to adapt the .decimal{margin-top:-19px}
3) I need to calculate the -16 (translateY) value according to the font-size
In fact I would like to display the decimal value part of the amount: smaller and higher than the integer part.
When I tried to achieve this using the following piece of code, I couldn't obtain the same layout in Chrome, IE9, Firefox, ... and on top of this, it does not work at all under IE7
Hi, I am trying to find out a "cross-browsers" way to display price amounts using CSS. The idea that directly came to my mind was to split the value (integer,decimal) and use the matrix property to scale and translate the decimal part such as:
.price {font-size:40px} .integer {display:inline-block;} .decimal{display:inline-block;transform:matrix(0.8,0,0,0.6,0,-16);}
(of course with all variations of "transform"). The only problem is twofold: 1) IE7-8 for which I need to use filter and -ms-filter (which means that for IE9, I have a conflict) 2) for IE7-8, I also need to adapt the .decimal{margin-top:-19px} 3) I need to calculate the -16 (translateY) value according to the font-size
All this does not make it convenient.
Does anybody could suggest a better solution?
Many thanks
I'm not sure exactly what it is you are trying to do.
How, where, what for?
Is there some special formatting to be applied to a 'section' of the price? I think that's it....isn't it?
Do you have an image of what it is you are trying to achieve?
In fact I would like to display the decimal value part of the amount: smaller and higher than the integer part.
When I tried to achieve this using the following piece of code, I couldn't obtain the same layout in Chrome, IE9, Firefox, ... and on top of this, it does not work at all under IE7
.price {display:inline-block;zoom:1;*display:inline;font-size:100px;} .decimal{vertical-align:super;font-size:40%;}
The HTML code is:
Therefore, I tried to find another alternative, forcing the browser, using the matrix CSS property.
Is this now a bit clearer?
not really
Well, firstly it doesn't have to look the same in all browsers UNLESS that is a specific requirement.
I do think existing options would work. If you are breaking up the price why not just use 'superscript' on the decimal?
That's finally the easiest solution that works. Thanks
I think IE7 will only support the <sup> tag:
or maybe try
I don't have IE7 to test it.