Forums

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

Home Forums CSS Spacing between text and counter in ordered lists

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #43266
    norbert6
    Member

    Hey guys

    I have a little problem with an ordered list. I want the counter to be larger than the text, but this cause different spacings between the text and the counter in different browsers. (firefox compared to chrome)

    here is an example: [http://codepen.io/anon/pen/lBIbD](http://codepen.io/anon/pen/lBIbD)

    is there a easy way to fix this?

    #127607
    wolfcry911
    Participant

    you could give the li a line-height – should make things much closer (but still won’t be pixel perfect).

    #127658
    norbert6
    Member

    my problem isn’t the vertical space between the li’s, but the horizontal between the counter and the text.

    In firefox, the counter is inside the grey box, but in chrome it’s shifted more to the left.

    #127661
    Paulie_D
    Member

    Here’s my question.

    Is it an absolute requirement that they be pixel perfectly the same in different browsers?

    Most viewers will use one main browser and won’t notice.

    #127665
    wolfcry911
    Participant

    Unfortunately, the specs don’t define the exact position of the markers so its up to the UA where the marker gets placed which is why it differs between browsers.

    However, Roger Johansson has [a writeup tackling the problem](http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/ “”). Haven’t tried it, so YMMV

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.