IE not respecting :hover on element

Question

Work on the following website: http://cetcolor.com

The masthead graphic with the "Read About It" button has a positioned link with hover that when rolled over displays an orange button graphic and is a clickable link.

However, in IE browsers it's not working.

Here is the affected HTML:

<div id="header">
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a>
    <span class="strapline">Affordable Large-format UV Printing Solutions</span>
    <a href="/pressroom_article8" class="read_about_it"></a>    
</div>

And here is the referenced CSS:

#header .read_about_it {
    position: absolute;
    top: 239px;
    left: 803px;
    z-index: 100;
    width: 114px;
    height: 17px;
}
#header .read_about_it:hover {
    background-image: url(/images/masthead_index_read_about_i.jpg);
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 101;
}

Does anyone have any idea why the hover isn't working in IE browsers?

Answer 1

I have a solution for you. Just define a background-color or background-image for your read_about_it class.

There is obvious logical mistake in your CSS code/or in IE - depends on the viewpoint. Your A tag is empty - I do not mean text but background (you change background on your hover state). We all know IE lives in its own world and handles HTML in different way cause it uses the ancient Trident engine. However IE will not change background on hover state if element is empty (has no background) because IE assumes that there is no need changing or creating something that does not already exist.
Cheers!

Answer 2

Add "display: block;" to it, and it should work for you.

#header .read_about_it {
  display: block;
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

Answer 3

I've have the same problem and I've solve this problem with:

#header .read_about_it {
  display: block;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

The "background: rgba(255, 255, 255, 0)" is a keyword to solve this problem. But you want to IE-7 OR older you can put background-image: url(URL_TO_TRANSPARENT_IMAGE).

Answer 4

If you are using IE6 it does not support :hover on any elements except

<a>

I have gotten around it by using javascript

onmouseover
onmouseout

events.