ie6/7 padding-right not applying

HTML & CSS
1

Hi,

I’ve read the previous topic about it but adding a float didn’t solve my problem. I have a simple list and the padding is ok except for IE 6 and 7, I’ve never had this issue before.

Here is the code (can’t be simpler):

<div id="content">
<ul>
<li>blah</li>
</ul>

....

and the CSS

#content ul {
	padding: 5px 0px 20px 60px;
}
#content li {
	padding: 0px 30px 7px 0px;
	list-style-image: url("../images/bubble.gif");
}

Is there a known trick to fix this?

Thanks

2

Thanks again Stomme poes, you saved my day!

3

I don’t understand.

Did you mean this?

Content ul {
margin: 0;
padding: 5px 0 20px;
}

Content li {
padding: 0 0 7px 30px;
background: url(“…/images/bubble.gif”) left center;
}

? (mostly because list-style-image is rather unstable cross-browser)

If the li is holding a background image, then unless you want that image to be sitting under whatever text is within that li, you’ll want to give left padding (assuming you want the image to show on the left side) to the li itself. Padding is like fat on people, while the children inside are like the internal organs. The fat expands the area between the skin (outside) and the organs (inside). You’re setting the background image in this fat area.

If you really must use list-style-image, then you’d be correct (I think) having the padding on the left of the ul and none on the li (right padding isn’t going to show up either way, unless this is a right-to-left page?) but you’d prolly also need to trigger Haslayout on the ul too (lack of Haslayout tends to hide list-style bullets in IE).
But I seem to recall that the css that gets the list-style-image looking OK in IE makes it look too spacey in other browsers or something. So I generally avoid using it and do background images instead.