I’m writing this quick blog post (after an all nighter, so forgive the poor writing), to hopefully help out some other poor unsuspecting developer who might be sat there at 5am trying to work in a fix for Internet Explorer, and overflows that wont overflow. There are plenty of bugs for IE, and plenty of posts about them, but I couldn’t find a single one for this issue, so here goes…
I had a shopping cart button in an e-commerce site I am working on, and the button uses the nice little kick up to one side/wrap around effect, like this:
Which, as we can ALL agree, looks flipping great. Now, I have used CSS3 for the drop shadow on the box there, as its the latter part of 2011, and I’m not using gradient images to cater to old cruddy browsers!
The problem is, people still use old cruddy browsers, and IE 8- doesnt support the “box-shadow” property, so, you have to add the following bit of code to get IE7 and 8 (6 too, but who cares) to display a shadow:
/* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
Thats great, if all you want to do is show a shadow, then you’re laughing, and can call it a night. On the other hand, if your site needs any kind of “overflow: visible” for an element using this shadow filter, then you will see something like the following:
So, I spent hours, applying z-index’s, zooms, position relatives, position absolute, floats, margins, overflows and just about every other trick in the book. And then it hit me. You cant use overflow on any element using the shadow filter!!! (and potentially any other filter for IE too, I am not about to test it to find out…).
So, if you are trying to add a shadow AND overflow to an element, I urge you to give up, and do something like the following work around I implemented:
First, get rid of the filters on the class, and just leave the css for everything else:
.product {
width: 100px;
height: 100px;
overflow: visible;
position: relative;
-moz-box-shadow: 0px 0px 4px #000;
-webkit-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
and then add an alternative for the IE browsers:
/* for IE7 and below (if you care) */
*+html .product {
border: 2px solid #ccc;
border-left: none;
border-top: none;
}
/* for IE8 */
@media \0screen {
.product {
border: 2px solid #ccc;
border-left: none;
border-top: none;
}
}
And you will get something that looks like this:
- a fair alternative I think you’ll agree.
So I am sorry I couldn’t solve this one for you, but its a decent work around to cater for outdated, and frankly sh*t browsers, and I have loaded this article with as many of the (“overflow IE not visible”) keywords as I could think of to search for myself, and I hope it will crop up in some results and perhaps save one of you a few hours of struggling!
