Grow your CSS skills. Land your dream job.

Price amounts layout

  • # March 12, 2013 at 9:28 am

    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

    # March 12, 2013 at 9:37 am

    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?

    # March 12, 2013 at 9:53 am

    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:

    <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

    not really

    # March 12, 2013 at 9:57 am

    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?

    # March 12, 2013 at 10:16 am

    That’s finally the easiest solution that works. Thanks

    # March 12, 2013 at 10:18 am

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".