Ol's <li> spacing between the numbers and the text?

HTML & CSS
1

ol’s <li> spacing between the numbers and the text? Anyway to adjust that? In IE the spacing is larger than I’d like.

In FX, etc it looks like 1. Some Text
In IE it looks like 1. ToMuchSpace Some Text

2

Did you kill auto margins/padding via * { margin:0; padding:0; } ?

3

Hi, yes, although this is the space “inside” the li, so unfortunately that should have no bearing on this question. :slight_smile:

4

Can you provide more code?

5

<ol>
<li>Text</li>
</ol>

6

If that <ol><li>Text</li></ol> and a universal reset is all you have, you wouldn’t even be seeing the numbers in IE6, if the list-style-type was left as the default, ‘outside’ and you have no left margins.

7 
<!doctype html>
<html>
<head>
    <title>list</title>
    <style>
	* { margin:0; padding:0; }
	body { margin:25em 20em 0; }
	ol li { 
	    padding:0 0 0 0px;
	    margin:0 0 0 30px;
	}
	ol {
	    list-style-type:decimal;
	    list-style-position:outside;
	}
	/* zoom:1; */
    </style>
</head>
<body>

<ol>
    <li>first</li>
    <li>second</li>
    <li>third</li>
</ol>

</body>
</html>

This, however renders a list where there’s around 2-4 extra pixels between the number and the text. What you can do is wrapping the text inside the LI with a floated or block level item and adding a negative left margin equivalent to the amount of extra pixels. That or feed non-IE browsers with 2-4 extra pixels so they match.

Edit: Just found a new bug in IE6 it seems - triggering hasLayout on all lis resets the number to 1 for each li, how odd.

8

Edit: Just found a new bug in IE6 it seems - triggering hasLayout on all lis resets the number to 1 for each li, how odd.

It’s an old bug and is also documented in our reference :slight_smile: (IE has a number of bugs with lists such as losing the markers when they are floated).

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.

As mentioned above you could drag the content left with a negative margin to even IE up or just live with the fact that it’s a few pixels different :slight_smile:

9

Ah, I’ve never come across any article or bug report on this, how surprising you’ve already seen it.

10

If Paul didn’t find that bug on sitepoint then it would most definately be on PositionIsEverything.net

11

Not every bug is reported on there, and I’m pretty familiar with the site but have yet to find it listed there. I know of some private sites with much more bug listings but I can’t seem to find any on there.

12

Your correct. I just went there and googled about multiple submit buttons bug in ie. and nothing came up, no matter how i worded it.

13

I’ve known about this bug for years and as I said I documented it in the reference. Most times you can kill the bug by re-applying display:list-item to the list element (li {display:list-item} ) - even though that’s what it should be anyway :wink:

Ingo also has it documented here in his magnificent “haslayout” article in the section under lists.

There are many other ie bugs in IE with lists such as text-align moving the marker and text-indent moving the marker, vertical-align moving the marker and so on… :wink:

14

Ah - I remember reading the hasLayout article a year or two ago when I wasn’t as experienced but I’ll take another look. Thanks.

15

Yes, and I also had a margin left of 20px on the “ol”.

Alright, thanks for the info guys! Ya, it’s not worth doing anything fancy to it. I just wanted to know if there was any easy way to do it. It’s only off by a pixel or two, so no biggy. Thanks…

16

Yeah, there are always subtle differences between various rendering engines - it won’t ever be super pixel perfect.