IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)

Question

Hi all

I have been struggling to find out why this rollover is not behaving as it should in IE8.

Go here : http://baked-beans.tv in IE8, you'll see that the rollover only works on the lower half of the thumbnails.

Btw, this is not activated by an tag but by a ":hover" for the .

What I cant figure out is why it works on only the lower half of the div, below the image, but not on the image (the image is not z-indexed so thats not the issue)

As soon as I change the background-color to anything else besides transparent, it works 100%. So this just blows my mind... why the bottom half, but not the top half, and only when i set bg-color to transparent?! Gotta love Internet Explorer.

This works as it should on every other browser (the entire square acts as a rollover)

Here's the CSS:

.cat_rollout {
position: absolute;
float:left;
top:0;
left:0;
min-height:274px;
min-width:274px;
font-size: 0;
background-color: transparent;
}

 .cat_rollout:hover {
background-image: url(images/rollover.png);
min-width:254px;
min-height:242px;
padding-left: 20px;
color: white;
font-size: 21px;
font-weight: normal;
line-height: 24px;
padding-top: 34px;
}

Answer 1

Have you tried using background-colour:none; instead of background-colour:transparent;?

Answer 2

You could also try changing the hover selector to

.thumb_container:hover .cat_rollout {...}

so that the parent containment div is the element reacting to the hover.

Answer 3

Try faking a background image or setting it to a blank.gif instead of making it transparent.

background:url(blank.gif);

See http://work.arounds.org/issue/22/positioned-anchor-not-clickable-ie6/