IE CSS Bug: background-color: transparent behaves differently to background-color: (any other colour)
Solution 1
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/
Solution 2
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.
Solution 3
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);
Comments
-
RGBK about 4 years
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; }
-
RGBK over 13 yearsJeez, We are in 2010, IE is in 2006. It worked though, thanks a bunch for the tip.
-
Kariem Muhammed about 8 yearsAnd, now we're in 2016, and damn IE still in 1800!!