Reputation: 475

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

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}

Upvotes: 14

Answers (15)

ali bagheri

Reputation: 149

Add blow tag to <head> for fix it.

for IE9

<meta http-equiv="X-UA-Compatible" content="IE=9">

for IE10

<meta http-equiv="X-UA-Compatible" content="IE=10">

Upvotes: 1

Alireza815

Reputation: 359

you can add the following line to the top of your html file, it works for me in ie 9:

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Upvotes: 0

Alireza815

Reputation: 359

you can add following line to the top of your html file, it works for me in is 9 and up:

       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Upvotes: 0

lison

Reputation: 189

Hover element in quirk mode in IE doesn't work. Alternative is set via script-event (without jquery) of html element:

<a onmouseover="this.style.textDecoration='underline'" onmouseout="this.style.textDecoration='none'" >  My link</a>

Upvotes: 0

Jeight

Reputation: 406

Use <!DOCTYPE html> at the top of the page. It will fix the problem and other problems that may arise.

Upvotes: 0

Johan De Silva

Reputation: 11

This is such a simple fix! Use background-color:#fffffe if changing background-color:#fff to background:#fff does not work.

http://haslayout.net/css/Hover-White-Background-Ignore-Bug

Upvotes: 1

thinzar

Reputation: 1550

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

This will work fine.

Also use the <!doctype html> tag at the top of the page. Now everything will be fine.

Upvotes: 10

DLF

Reputation: 21

Try adding:

display: block;
position: relative;

to your css a.

Upvotes: 1

Hatzegopteryx

Reputation: 700

I tried every solution I found. In my case, the bug was determined by the Google Translator. I removed it in IE and Opera (where it causes other errors) and everything works just fine.

Upvotes: 0

Kelly Robins

Reputation: 7288

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.

Upvotes: 9

Gordon Gustafson

Reputation: 41209

I think IE 7 fixed the hover problem on elements other than <a>, 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

Upvotes: 0

Bruno Schweller

Reputation: 150

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>

Upvotes: 0

Bruno Schweller

Reputation: 150

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') }

Upvotes: -1

uhleeka

Reputation: 698

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?

Upvotes: 0

jscharf

Reputation: 5899

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!

Upvotes: 0

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

Answers (15)

Related Questions