background-image:none; not working in IE but OK in FF

Hi,

I am working in a wordpress theme at http://tinyurl.com/3gq9tm

I am having problems with background images in ul ul ul being inherited.

I have tried to fix the problem by adding background-image:none; on the ul ul, ul ul ul, ids which seems to work fine in firefox, but in IE, i get a white, flickering or overlay in the menu which makes the menu unreadable in IE.

Here is the CSS:

#sidebar ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	padding-left:0px;
}
#sidebar li {
	margin: 0px;
	list-style-type: none;
	background-repeat: repeat-y;
	background-position: left top;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	background-image: url(images/widget-bg.gif);
	background-repeat: repeat-y;
	background-position: left top;

}

#sidebar ul ul {
	margin-left: 20px;
	margin-right: 10px;
	padding:0px;
	list-style-type: none;
	background-image: none;

}
#sidebar ul ul li {
padding-left: 0px;
margin:0px;
	background-image: none;


}
#sidebar ul ul ul li {
	margin:0px;
	padding-left: 0px;
	list-style:none;
	background-image: none;
	background-repeat: no-repeat;

}

Code (markup):

Any help would be much appreciated as this has been paining me now for 3 hours and I just can't figure it out...

 

I did not look at the url. So, it is possible that you have something somewhere conflicting with this code, but still shouldn't be able to force the #sidebar's li's to all have bg images... so I'm thinking it's gotta just be in this code below:

#sidebar ul, li { /*you shouldn't need the "li" part but who knows what the rest of the code is doing, so, I'm doing it just to be safe*/
	margin: 0;
	padding: 0;
	list-style: none;
}
#sidebar li {
       SET a DISPLAY STATE HERE: whatever works, display: inline or block or something (I dunno what your menu looks like)
	background: url(images/widget-bg.gif) left top no-repeat;
/*no reason for 50 lines for padding and bg properties*/
}

#sidebar ul ul {
	margin-left: 20px;
	margin-right: 10px;
}

#sidebar ul ul li, #sidebar ul ul ul li {
  background-image: none;/*instead of this, you could try setting the background propery to just a colour which matches the default background colour of your menu*/
}

Code (markup):

It should work, but IE is buggy with lists and things. You never have the list-style on any of these lists? So that shouldn't be it, but possibly you need to set a definite display state for the li (esp for IE7) AND additionally you may need to set Haslayout on the li. Haslayout can be set in IE by setting a width or a height on something, or you can do it a complicated wat by changing display states from inline-block to whatever you really want (prolly not necessary here, you want the li's to be some way anyway and you just haven't said it and the browsers have correctly guessed what you wanted, so okay, just state it explicitly).

Is this a horizontal menu or a vertical menu? I'm guessing vertical cause if this were a horizontal, generally the li's are floated, when you have sub-menus.

Also, send your HTML through thevalidator if you haven't. An unclosed tag or some illegal operation can be just as good an excuse for some browser or another to disobey you. : )