The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Price amounts layout

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #43324

    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;}

    (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.

    >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?


    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;}

    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?


    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

    .decimal { position: relative; top: -0.5em; font-size: 80%; }

    I don’t have IE7 to test it.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.