CSS: Unordered List Problem

[RonMA68]

I'm hoping that someone here can help with this annoying problem.

http://216.122.158.195/index.html

On the left-hand side there is an unordered list called: "We need you to help us:"

Of course this works fine in some browsers and some it doesn't. Primarily I.E. 6 is having an issue where the bullet image doesn't show up until you refresh the page.. now why in the world this could be happening is beyond me.

Here is the CSS:

#Col1 ul {
padding: 5px 0px 20px 0px;
margin:0px;
background-color: #9C7991;
color: #FFF;
}

#Col1 li {
background: url(../images/structure/li-plus.gif) no-repeat 0 10%;
padding-left:10px;
margin-left:3px;
margin-bottom:5px;
background-color: #9C7991;
color: #000;
}

I'm thinking that the problem is in the padding or margins or something, but I've changed them over and over and still not having any luck.

CSS experts??

thanks,
Ron :confused:

[KDLA]

background: url(../images/structure/li-plus.gif) no-repeat 0 10%;

Is the "0" and "10%" really needed? That might be the culprit....

KDLA

[RonMA68]

that tells it to place the graphic 0 pixels from the left and 10% down.. otherwise it just centers in the middle which isn't good because I need it to be lined up with the first line of the list.

[KDLA]

Hmmm... I wasn't sure if your other settings (or the layout of the image itself) could have overridden that, so it wasn't needed. I've added space to bullet images before to counteract padding problems.

IE treats lists differently, adding "padding" to images. You may need to look into using an !important designation to your list's margin settings, to counteract any type of IE default settings.

When the page loaded for me, only the first bullet was missing -- which is even stranger, in that if it were a padding/margin problem, it seems that the problem would be consistent throughout the list.

KDLA

[RonMA68]

In another forum this was a reply to my problem, and it fixed it.. I simply removed the position code from the CSS and it worked!

-----------------------------------------------------------

This isn't something I've run into before, but apparently if you have a
list (<dl>, <ul>, <ol> inside a relatively positioned element, IE gets
backgrounds wrong. More information:

http://www.positioniseverything.net/explorer/ie-listbug.html

--
Joe Makowiec
http://makowiec.net/
Email: http://makowiec.net/email.php