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

Question

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 <a> tag but by a :hover for the <div>.

What I can't 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;
}

meder omuraliev · Accepted Answer · 2010-10-22T14:02:01.563

9

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/

edited Oct 22 '10 at 14:02

answered Oct 22 '10 at 13:46

meder omuraliev

183,342
71
393
434

Jeez, We are in 2010, IE is in 2006. It worked though, thanks a bunch for the tip. – RGBK Oct 22 '10 at 15:37
And, now we're in 2016, and damn IE still in 1800!! – Kariem Muhammed Feb 03 '16 at 15:02

score 5 · Answer 2 · edited Oct 30 '12 at 11:02

5

The problem is that for some time (a week? two weeks?) IE has changed the way it interprets background-color. It seems that you cannot say, that the color is transparent, rather the whole background. So you should change background-color: transparent into background: transparent. Very nasty.

edited Oct 30 '12 at 11:02

Andrew Barber

39,603
20
94
123

answered Oct 30 '12 at 10:45

Mathijas

51
1
1

Tony Cheng · Answer 3 · 2015-04-09T10:26:38.253

1

The same problem has been witnessed, where hovering on a transparent element's blank area doesn't make css rules related to hover take effects. The problem is fixed with giving the element the following style.

background-color: rgba(0, 0, 0, 0.001);

edited Apr 09 '15 at 10:26

answered Apr 09 '15 at 10:20

Tony Cheng

11
2

score 0 · Answer 4 · answered Mar 19 '15 at 16:39

You can use an 1x1 transparent gif as a datauri if you'd rather.

background-image:url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);

Up to you which one you'd prefer, this works and is an alternative to the selected answer.

score 0 · Answer 5 · edited Sep 23 '13 at 14:58

0

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.

edited Sep 23 '13 at 14:58

Imane Fateh

2,418
3
19
23

answered Oct 22 '10 at 13:42

Chris Bentley

1,945
18
23

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

5 Answers5

Linked