Vanishing div background image behind horizontal ul

Hey,

I'm having a bizarre CSS problem at the moment. I have a couple of nested divs with a ul inside them, in which i've floated the lis to create a horizontal list.

It displays perfectly in Firefox, but for some reason, in IE the background of the div behind the ul is obscured. Strange as there isn't anything in the ul which should cause this!

Even stranger - if I apply a border to the div with the obscured background, the background reappears!

The link is www.jamiecon.net/v3/.

If you take a look at the code, note the commented line in the CSS file with the red border - if that line is uncommented, the problem goes away.

Weird!

Any help appreciated,

Jamie

 

Add:

BACKGROUND-IMAGE: url(menu-back.gif);

to the definition of #nav ul li or #nav ul li a.

 

Yeah didn't think of that!

Still i'd love to know why IE is making the li elements block the div background...

 

Setting:

background-color: transparent;

for #nav ul li & #nav ul li a might do the trick.

IE does silly things like this because it's broken...

 

background-color: transparent; doesn't do it.

I get the same behaviour on the page for IE and FF.

 

hmmm. Have you tried adding:

background-repeat: repeat;

Code (css):

to #nav?