CSS issue: a:hover not working with IE (css Ninja needed)

Question

Why does IE not change the background color on my site for tabs a:hover but does so in Firefox/Chrome/Safari correctly?

What can I do to make it work in IE 6+?

HTML

<ul class="tabbernav">
<li class="tabberactive"><a title="All" href="javascript:void(null);">All</a></li>
<li class=""><a>Tab1<span class="tabTotal"> (0)</span></a></li>
<li class=""><a>Tab2<span class="tabTotal"> (2)</span></a></li>
<li class=""><a>Tab3<span class="tabTotal"> (1)</span></a></li>
</ul>

CSS

ul.tabbernav li a:hover {background:#fdfdfd; border: 1px solid #555; border-bottom: none; color:#3366a9; cursor: pointer}

Answer 1

First thing I'd do is double check that the order of the psuedo selectors is correct.

It should be-

a:link {color:#FF0000} /* unvisited link /
a:visited {color:#00FF00} / visited link /
a:hover {color:#FF00FF} / mouse over link /
a:active {color:#0000FF} / selected link */

The only specific IE hover issue I remember relates to non-link elements so I don't think that is your issue. http://www.bernzilla.com/item.php?id=762 - Just in case.

If that doesn't answer your question do you mind posting the related block of css?

---

GAH- That was a hard one!

It looks like IE is breaking because the links don't have an associated Href element. Fix that and you should be fine.

--Breaking News - I may be an idiot- That was the last thing I changed on my test page and that fixed it but when I put it all back together it broke everywhere... so take what I just posted with a grain of salt. I'm backing up to see what happened.

Answer 2

I can't find an element that is assigned with the "tabbernav" class. I can see the "tabbertab" class is assigned to the tabs "All", "For Sale", "For Rent", "Apartments" and that it doesn't hover in IE 6

Answer 3

I think IE 7 fixed the hover problem on elements other than , but haven't tested.

To make up for IE 6's lack of support for the :hover selector, you just need to use javascript to get the same effect. Set an onMouseOver event that applies the class you want. :D

Answer 4

Your CSS looks to be valid.

Try adding an '!important' to your a:hover, and also try altering other styles in the definition. You may have some other style overriding that particular a:hover style via cascade.

Firebug in FF may show you some conflicting styles being inherited (although in IE6 you're on your own of course), but you should make sure you are not conflicting. a:hover works fine in IE6 as you and others in the question are aweare of

Also, put semicolons and newlines after your declarations you filthy heathen!

Answer 5

I'm getting a javascript error (Invalid property Value) in IE at line ~852:

document.getElementById('panel-hlisting-all').style.backgroundColor = color;

where color has the value "#ffff100".

Could this be the cause of your problem?

Answer 6

You can use an expression in your CSS. I use this technique, i developed to a client's site.

Just put it on the END of your CSS, since Webkit browsers won't read anything below it.

* html * { color: expression( (function(who){ if(!who.MXPC){
 who.MXPC = '1';
 if(who.nodeName != 'A'){
  who.onmouseenter=function(){ who.className += ' hover'};
  who.onmouseleave=function(){ who.className = who.className.replace(' hover','')}; }
 (who==who.parentNode.firstChild) ? who.className += ' first-child' : '' ;
} } )(this) , 'auto') }

Answer 7

Unfortunately, my local development server is hosed. But, here is how you can figure out what is wrong:

1. Make a copy of the page.
2. Remove all Javascript.
3. Remove all CSS.
4. Add CSS back in chunks, starting with the navigation specific styles.
5. Once you see the problem happening, take out parts of the CSS that you just added.
6. Get increasingly granular in your removing/adding and you will find the answer.

If it isn't the CSS, try adding the Javascript parts one by one, etc. You will learn a lot.

Answer 8

Just thought of it now - why not use Jquery to do it? with just a FEW lines of code you will have it done.

First, download Jquery from www.jquery.com. Then, you should properly link it to your file, on the head of your HTML:

<script src="url_to_your_jquery_file_here"></script>

Then, add another part of Javascript below this one:

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
     $("li a").hover(
       function () {
      $(this).css("color", "#3366a9");
       }, 
       function () {
      $(this).css("color","#838383");
       }
     );
    });
</script>

Answer 9

You should place href="" attribute in <a> tag.

This will fine work.