Opacity, Jagged Edges, and Header Tags in IE

I discovered a bug in IE today. If:

1. You have headers (as in <h1>, <h2>, <h3>, etc) and…
2. That header appears above another transparent area and…
3. That headers has any transparency effects itself then…
4. You get jagged edges

This is compounded by the fact that the area I was dealing with was a white box on top of the transparent text, so by all means the area “behind” the headers weren’t transparent. See screen shot to the right.

This is retarded. I have a simple fix for this problem. Simply add this to your CSS code:

1. /*
2.  * this is a necessary work around for transparency to work with h tags. 
3.  */
4. .container h1, .container h2, .container h3, .container h4, .container h5, .container h6 {
5.     background-color: white; // or whatever color you are working with
6. }

Replace “container” with whatever area you need to fix.

This is only a problem in IE; Firefox handles things just fine.