Horizontal secondary nav CSS problem

IE7: Background Image Doesn't Show Unless I Inline the CSS

[Whoa]

I am using the CSS below to do a secondary nav. It's in an external CSS file. I've cut out some of the CSS to show you only the part that is not working.

The subhot.gif image should show on a hover. It works in Firefox and other browsers. But in IE7, it doesn't work. However, if I take the code below and put into my HTML doc as inline CSS, it works.

It's like IE7 can't access the background URL on my LI tag if it's in an external CSS but it can if it's internally referenced within the HTML as inline CSS.

I could do the CSS inline but prefer not to. Anybody ever have this issue and know how to fix it? I validated CSS and HTML and there are no errors.

Thanks for any advice. Here's the CSS in question.

#container {
width: 544px;
height: 30px;
background: #725305;
vertical-align: middle;
}

#container ul {
list-style-type: none;
}

#container li {
display: inline;
}

#container li a:hover {
color: #e8e2c6;
padding-left: 20px;
background: url(images/subhot.gif);
background-repeat: no-repeat;
background-position: 0 6px;
}

[londrum]

i would guess that its something to do with this...
you have put the :hover on the anchor (a), rather than the list (li)
so if the anchor isn't filling the entire block it might not register when you hover over it.

maybe that is why it suddenly works when you do it inline (because i'm guessing you are putting that on the list element, rather than the anchor element)

but... IE6 will not recognise the :hover on anything other than an anchor tag. so putting li:hover in the CSS is not a good idea.

try making the anchor tag into display:block, or giving it a width and height equal to the list element, so it fills it out.

or... i've just thought of something else... and this is probably what it is. it's to do with the images URL in the CSS sheet. you have it down as a relative URL. if you move that piece of code into another page, then you will have to adjust the URL so it still points at the image. try changing it to an absolute address instead. ie. /images/ instead of just images/

[Whoa]

Thanks for the great ideas.

I just tried hover on Li instead of A tag -- no luck.

I also just tried hardcoding the full URL in the CSS and had no luck.

If you don't mind, I'm going to sticky you with a couple of URLs -- one where it works in IE7 as an inline and one where it doesn't work in IE7 when the CSS is external.

If you can help, I will be grateful. If you are too busy, that's fine too. Thanks.