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

In: Web development

20 Feb 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?

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

Avatar

0zone

February 21st, 2004 at 4pm

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…

Avatar

Cheah Chu Yeow

February 21st, 2004 at 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?

Avatar

0zone

February 21st, 2004 at 10pm

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.

Avatar

Cheah Chu Yeow

February 22nd, 2004 at 2am

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 ;).