css menu - rollover problems in IE

I gan get the <li> background to change on rollover in FF but nit in IE. Would somebody plz take a peek at this css and tell me what I am doing wrongly.

I want the rollover to show on the whole width of the nav menu and not just the text link.

Bazz


div#productnavbar1 {
float : left;
#background-color: #785B83;
background-image : url('images/menubkgrnd.jpg');

width : 190px;
border : 1px solid #e5f9ff;
text-align: left;
}

div#productnavbar1 h3 {
font-family : "Trebuchet MS", verdana, sans-serif, arial, helvetica;
font-size : 1.1em;
margin-left : 20px;
padding-top : 10px;
padding-bottom : 10px;
}

div#productnavbar1 ul {
background-color: transparent;
display: block;
white-space: nowrap;
margin-top : -15px;



}

div#productnavbar1 ul li
{
display : block;
list-style-type: none;
line-height : 25px;
border-bottom : 1px solid #000040;
background-color : #785B83;
margin-left : -45px;
padding: 0 20px;
}

div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
color: #000040;
text-decoration: none;
font-size : .9em;
font-weight : normal;

}


div#productnavbar1 ul li a:visited {
background-color: transparent;
color : #000040;

}

div#productnavbar1 ul li:hover {
background-color: #ffffff;
color : #000040;
background: url(/images/bkgrnd2.jpg);
}

Did you mean to do this? As you probably know, IE ony supports hover on the <a> element.

div#productnavbar1 ul li a:hover {
background-color: #ffffff;
color : #000040;
background: url(/images/bkgrnd2.jpg);
}

Yup, I found that this gives me the desired result in FF - the whole li changes color rather than just the text link.

So, if I have to do it as you showed, would you please give me a tip on how to make the text link fill the <li>. I've left the li:hover in the css so you can see (in FF), how I want it to be.



Bazz

add display:block; to the psuedo classes for the links, u know, a:link, a:visited, a:hover, a:active and give them a width of 100% you could give them a height also if you wanted, display:block will make the link fill the containing area that it is in

As _Aerospace_Eng_ said. You'll also need to set a width on the containing <li> since you don't at the moment.

div#productnavbar1 ul li
{
display : block;
list-style-type: none;
line-height : 25px;
border-bottom : 1px solid #000040;
background-color : #785B83;
margin-left : -40px;
padding: 0 20px;
width:12em;
}

div#productnavbar1 ul li a:link, div#productnavbar1 ul li a:visited, div#productnavbar1 ul li a:active {
display:block; width:99%; color: #000040;
text-decoration: none;
font-size : .9em;
font-weight : normal;
margin : auto auto;
}

Thank you guys... Its looking OK now in both IE6 and FF. :thumbsup:

Bazz