li:hover IE problem

[EGONick]

I've been using this technique for a while and I didn't realise that it doesn't work in IE7 or possibly any IE.

 

#navigation li .left {
width: 10px;
height: 36px;
float: left;
}

#navigation li:hover .left {
background: url('./images/template/navigation_active_left.png') no-repeat;
width: 10px;
height: 36px;
float: left;
}

#navigation li .bg {
float: left;
height: 21px;
padding: 15px 0 0 0;
}

#navigation li:hover .bg {
background: url('./images/template/navigation_active_background.png');
color: #6b6b6a;
}

#navigation .right {
float: left;
width: 10px;
height: 36px;
}

#navigation li:hover .right {
background: url('./images/template/navigation_active_right.png') no-repeat;
}

 

This is my script which works fine in all other browsers, it simply allows me to have links of any width but still allow hover changes.

I've checked for fixes for the IE problem and found a fix but it doesn't seem to work and isn't direct at this sort of problem.

 

Thanks, Nick.

[haku]

Hover will work on non-anchor elements in IE7, but not IE6. So if your hover isn't working in IE7, then your problem lies in a mistake in your code somewhere.

 

Got a link?

[EGONick]

Yeah because I'm sure the last time it worked fine in IE.

 

http://www.urbanchicdirect.com/index.php

 

thanks