list-style-image alignment quirk in IE/Win and Opera?

« Backing up your IMAP email in Mozilla Thunderbird | Main | Mozilla Europe website launched »

list-style-image alignment quirk in IE/Win and Opera?

February 20, 2004

Take a look at this example page I set up in IE/Win or Opera, and then in a Gecko-based browser.

Notice that the positions of the list images in IE/Win and Opera are misaligned - they’re not in line with the text, but seem to be vertical-aligned to the top. After a bit of hair-pulling, I figured out that is because I applied “line-height:180%;”. Setting the line-height back to 100% for the <ul> works, but then I had to resort to adding margins to the <li> elements to simulate a line-height so that it’ll be consistent throughout the document.

Does anybody have an explanation why IE and Opera does it this way while Gecko browsers render it the other, seemingly correct, way?

Posted by Chu Yeow at February 20, 2004 SGT |

Permalink |

| Category: Web development

4 Comments & TrackBacks ()

I found that removing the list style and adding a background with a little padding-left works even better.

background : url(’./images/list.png’) no-repeat center left;
padding-left : 12px;

Thats all I had to do…

Posted by: 0zone on February 21, 2004 4pm

I do use a background-image sometimes, using the same method you did, but have found that it doesn’t line up properly with the first line of text if the list text spans more than 1 line (expectedly). Well, someone at a forum pointed this out to me:

ul {
list-style-type:none;
}
li {
padding-left:18px;
background:url(images/bullet.gif) no-repeat 0 0.5em;
}

This works by simply positioning the image a certain distance from the top-left corner to make it align nicely. Relative units are used so that it works when text is resized.

Still, no one seems to have an answer on my original question - which is why are there different interpretations between Opera, IE and Gecko?

Posted by: Cheah Chu Yeow on February 21, 2004 4pm

Thats a good idea. I think your question is a little … pointless, there are always problems with w3c standards in all browsers, this is just one of them that happens to be in Opera and IE.

Posted by: 0zone on February 21, 2004 10pm

Hmm, I don’t think it’s pointless. I’m not asking why there is a problem. I’m asking what is the correct way that it should have been implemented, though I admit I probably didn’t put across in the clearest manner.

The W3C CSS2 specs only say for “list-style-image”:

This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the ‘list-style-type’ marker.

So there I just answered my own question ;).

Posted by: Cheah Chu Yeow on February 22, 2004 2am

You can subscribe to the RSS feed for comments on this post.

« Backing up your IMAP email in Mozilla Thunderbird | Main | Mozilla Europe website launched »

Sorry, this entry is no longer accepting comments. If you have something you really want to say, you can write me.

« Backing up your IMAP email in Mozilla Thunderbird | Main | Mozilla Europe website launched »