UL bullets weird in IE

paulsheff · 24 Oct 2006 at 16:59

I've got a CSS style UL lists, one of the <LI> tags content wraps, which is fine in firefox but in IE instead of the bullet point being to the left of the top line it's to the left of the bottom one?

I'm using

Code:

list-style-type: square;
list-style-position: inside;

Cheers

paulsheff · 24 Oct 2006 at 18:38

Bump with image if I've confused the situation

robmiller · 24 Oct 2006 at 18:46

Consider just using a background image and padding—you get more control over the bullet display and over the placement of the bullet.

Code:

ol#somelist li { 
background:transparent url(path/to/square.png) no-repeat top left;
padding:0 0 0 15px;
}

The disadvantage is that you lose the hanging indentation, although you could get 'round that by applying the padding to the li:first-letter pseudo-class.

paulsheff · 24 Oct 2006 at 18:58

Yeah I just read about that, I'll have to give that a try.

Cheers

Sic · 24 Oct 2006 at 19:01

i ALWAYS have trouble between browsers using the individual list-style-image and list-style-position malarky. i use list-style and stick it all in there. list-style: url(path/to/image.png) inside;

normally works pretty well. don't see the point in going down the background image route if there's no need to