Recently, in working on a web application (PHP/jQuery), I needed to add a drop shadow to a div container box. Ideally, I wanted to do this in CSS, and write some elegant code that would be cross-browser compliant and look awesome. Easy right (roll eyes here).

I found a really excellent technique, here: http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ . This technique fit the bill perfectly for me, in that it used CSS and was cross browser compliant.

Here is the CSS I put in:

.shadow {
	-moz-box-shadow: 3px 3px 4px #606060;
	-webkit-box-shadow: 3px 3px 4px #606060;
	box-shadow: 3px 3px 4px #606060;
	/* For IE  */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow
            (Strength=4, Direction=135, Color='#606060')";
	filter: progid:DXImageTransform.Microsoft.Shadow
            (Strength=4, Direction=135, Color='#606060');
	}

However, I quickly noticed something odd. In internet explorer (I should be up front, as a web developer, I am not a fan), the font became granular and somewhat harder to read when I used my new .shadow class.

After an internet search, and some good old fashioned trial and error, I discovered that Microsoft purposely disables cleartype font (basically anti-aliasing smoothing of text) on elements that have an IE filter applied. I also discovered that there was not a fix on the horizon. After much research, however, I did find a great workaround.

I created a new class:

.shadowtype {
      position: relative;
      top: 0px;
      left: 0px;
  }

I then wrap my text inside a new div container, inside the shadow container, like this:

<div class="someothercss shadow">
<div class="shadowtype">
my content here
</div>
</div>

The effect is that I know have my cross browser shadow, but without losing cleartype in Internet Explorer.

Enjoy my rookie web designing. I will share other tips here when I have them.