IE messes up list background image - how to workaround?

I've built a website, CSS, that seems to work as intended in Mozilla FF, however, when opened in IE, something goes terribly wrong; :eek:

Allow me to demonstrate via this link: www.ciemdan.com/Out/Yariv

the CSS code puts a background image for each list item, and a background image upon rollover (:hover) of each list item. Firefox works like a charm.

I can't even begin to describe the IE oddity here: the images required don't appear, the original images appear and remain upon rollover, but only for the last 3 list items. Also, no rollover images appear in IE.

The code in question follows:

#nav {
margin: 18px 35px 25px 0;
color: black;

}
#nav a {
text-decoration:none;
color: #B9C8F0;
font-weight: bold;
}
#nav a:hover {
color:white;
}
#nav li {
background: top right url(images/nav_bg.jpg) no-repeat;
font-size: 16px;
padding: 7px 110px 16px 12px;
}
#nav li:hover{
background: top right url(images/nav_bg_c.jpg) no-repeat;
}


That's the CSS that IMO is relevant, but perhaps there is some other interference that I'm not seeing here...

Question is straightforward: how to make the IE look like the FF page? If additional IE styles are required, I can add them via the [if IE] command, with an additional file - style_ie.css.

Thank you guys for your help, much appreciated,

Sincerely,

-Dan.

:hover pseudo doesn't work with li or any other elements in IE, except on a.
So you have to apply those styles to a. In order to stretch your anchor, apply display:block; to them.
And in CSS, the pseudo order should be :link, :visited, :hover, :active (LoVe-HAte)

It's fine in IE7 and above, though.