Opacity in IE6

The Issue: First problem is that text set with opacity looks like crap. It’s to do with the anti-aliasing (yes, even with ClearType enabled).

Second problem is that even when you use


.opaque {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}


The opacity doesn’t kick in.

The Solution: For problem 2, add zoom: 1; to the IE-only rule above.

Happiness ensues.

As for IE6 anti-aliasing ugliness, I just wipe out the filter: filter: none;. So you don’t get opacity in IE6. Not the end of my world.

According to stats for the website, at least a quarter of the IE traffic is still using version 6. UPGRADE, PEOPLE! DO IT! DO IT NOW!

The bane of my existence…

Italics in IE6

The Issue: Italics force their container slightly wider in order to show the overflowing slanting edge of the letter when the container (such as an <em>) does not have a set width.

This happens to break my P.I.E. (Positioning Is Everything) layout.

Happily, this is a well-documented bug at P.I.E.

The Solution: Because I no longer care about IE5, let alone IE5.5, I use this:

<!--[if lte IE 6]>
em, .italics { overflow: hidden; zoom: 1; }
<![endif]-->

Happiness ensues.