Posts Tagged ‘IE hacks’

IE Hack: CSS drop shadow

Thursday, May 6th, 2010

Easy-to-apply, dynamic, auto-expanding drop shadows have always been a bit of a pain to apply across all the major browsers. We fairly recently got the box-shadow attribute, which can be applied with -moz-box-shadow and -webkit-box-shadow on gecko and webkit browsers. But it leaves the IE family out in the cold.

The easiest solution to the is the IE-proprietary filter attribute. It does not producte quite as nice shadows as the box-shadow attribute, but for simple just-a-few-pixels drop shadows it does the trick. One noticeable drawback is that IE for some reason disables anti-aliasing on elements that has this attribute. But I can live with that in most cases.

This box has a shadow
.shadow {
	zoom:1; /* This enables hasLayout, which is required for older IE browsers */
	filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
	-moz-box-shadow:2px 2px 2px #b0b0b0;
	-webkit-box-shadow:2px 2px 2px #b0b0b0;
	box-shadow:2px 2px 2px #b0b0b0;
}

This should look fairly similar in all major browsers, including IE 6+

IE Hack: inline-block

Tuesday, May 4th, 2010

I just decided that it would be a good idea to collect solutions to common IE css issues here on my blog. Sure, these are all over the web now a days, but hey, another place can’t hurt right? :)
I’m going to start posting them under the IE hacks category whenever I come across one.

This time it’s about the inline-block display property (introduced in CSS 2.1), which can be very useful in certain scenarios. The problem is that it is not supported IE <= 7 for elements that are block level by default.

Without further ado, here's the most simple solution I could find. Just append these two lines at the end of the CSS block where the inline-block style is set:

zoom: 1;
*display: inline;

Basically it triggers hasLayout for the target element, which is "kinda like magical fairy dust you can sprinkle on rendering issues and make them disappear".

Source: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/