Spacing between text and counter in ordered lists

[norbert6]

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?

[wolfcry911]

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

[norbert6]

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.

[Paulie_D]

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.

[wolfcry911]

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

[Author]

Posts