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

html css internet-explorer firefox dhtml
TimJK picture TimJK · Aug 18, 2009 · Viewed 45.7k times · Source

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

thinzar picture thinzar · Aug 18, 2009

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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Div with horizontal scrolling only

I have a fixed width DIV containing a table with many columns, and need to allow the user to scroll the table horizontally within the DIV. This needs to work on IE6 and IE7 only (internal client application). The following …

Read More
Remove the complete styling of an HTML button/submit

Is there a way of completely removing the styling of a button in Internet Explorer? I use a css sprite for my button, and everything looks ok. But when I click the button, it moves to the top a little, …

Read More