I have created a horizontal nav bar that uses the 'sliding doors' effect for the background tabs on each link. Usually when web developers do this they attach the left of the tabs to the 'li' tag and the right to the 'a' tag. This is great but the problem I have is with the roll over. I want to change the tabs colour behind the link when rolled over (not just the colour of the link text). This works great in most browsers because you can just add the replacement jpegs to the same tags but with the hover pseudo class. All except Internet Explorer that is. Internet Explorer only accepts a hover class on an anchor tag so the li:hover will not work and will therefore not produce the other half of the replacement graphic behind the text.
Does any one have any ideas? I want this to work if the text is enlarged so a simple one piece background graphic that only depends on the anchor tag is not really an option.
Here is some code that might help explain the above:
#nav_inner li {
background: url(images/hori_right.jpg) no-repeat top right;
float: left;
padding: 0;
margin: .4em .1em .2em .1em; }
#nav_inner li a {
background: url(images/hori_left.jpg) no-repeat top left;
text-decoration: none;
color: #fff;
font-size: 11px;
font-weight: bold;
display: block;
margin: 0 0 0 0;
padding: .6em 1.1em 0 1.1em; }
#nav_inner li a:hover {
background: url(images/hori_leftHov.jpg) no-repeat top left;
color: #000;}
#nav_inner li:hover {
background: url(images/hori_rightHov.jpg) no-repeat top right; }
#nav_inner li {
background: url(images/hori_right.jpg) no-repeat top right; }
Thanks in advance
Erdy