- This topic is empty.
-
AuthorPosts
-
March 12, 2013 at 9:28 am #43324boelediMember
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-sizeAll this does not make it convenient.
Does anybody could suggest a better solution?
Many thanks
March 12, 2013 at 9:37 am #127874Paulie_DMemberI’m not sure exactly what it is you are trying to do.
>display price amounts
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?
March 12, 2013 at 9:53 am #127875boelediMemberIn 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:
<div class=price>14<span class=decimal>99</span>€</div>
Therefore, I tried to find another alternative, forcing the browser, using the _matrix_ CSS property.
Is this now a bit clearer?
March 12, 2013 at 9:54 am #127877wolfcry911Participantnot really
March 12, 2013 at 9:57 am #127879Paulie_DMemberWell, 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?
March 12, 2013 at 10:16 am #127882boelediMemberThat’s finally the easiest solution that works. Thanks
March 12, 2013 at 10:18 am #127883MottieMemberI think IE7 will only support the <sup> tag:
1499€or maybe try
.decimal { position: relative; top: -0.5em; font-size: 80%; }
I don’t have IE7 to test it.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.