Grow your CSS skills. Land your dream job.

Spacing between text and counter in ordered lists

  • # March 9, 2013 at 10:00 am

    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?

    # March 9, 2013 at 1:06 pm

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

    # March 10, 2013 at 9:25 am

    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.

    # March 10, 2013 at 9:46 am

    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.

    # March 10, 2013 at 10:15 am

    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.

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