[UNSOLVED] Margin Problems for Unordered Lists in FireFox and IE7

Good luck avoiding hacks be they Conditional Comments or otherwise with IE still in the picture. Just not gonna happen most likely.

I don´t have an IE7 here, but I would propose not to use list-style-images, they always cause problems (look at the height in IE6 and FF which is different). Instead use a padding-left to the list element and a background-image with no-repeat. With that you have a better control over the image via background-position. If this will also kill the margin problem.. I don´t know but it´s worth a try I think to give the list-elements a margin-left, and not the ul, because IE6 has the double margin bug with floated elements which could be avoided in this case by giving it to the li elements.

Thanks MadeMyDay, I will look into that. I tried using the background image, which I got to work nicely except when the text wrapped for a bullet. I couldn’t find a way to always make the bullet stay aligned with the first line of text.

I was using 50% 50% for the positioning, is there a better way to always have it line up with the first line of text for the bullet?

If I used top left the bullets appeared above the list items by a bit.

Hi Jesster,

with 50% 50% it will always stay in the middle, no matter how high the line is.

If I used top left the bullets appeared above the list items by a bit.

top left is the same as 0px 0px where the first figure is the x-coordinate, second the y-coordinate, starting from upper left. So if the image is a bit too high, try 0px 3px e.g.