Forums

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
    Posts
  • #43324
    boeledi
    Member

    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

    #127874
    Paulie_D
    Member

    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?

    #127875
    boeledi
    Member

    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?

    #127877
    wolfcry911
    Participant

    not really

    #127879
    Paulie_D
    Member

    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?

    #127882
    boeledi
    Member

    That’s finally the easiest solution that works. Thanks

    #127883
    Mottie
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.