IE transparency and font rendering

paul — Sat, 06 Feb 2010 23:16:09 +0000

While designing a website, I wanted to add some semi-transparent backgrounds using CSS rgba.
In this article, the author suggests using a PNG as a fallback for browsers that don’t support the rgba declaration.
Having read about Internet Explorer’s proprietary filters, I decided to use that instead, to avoid having to download another image.
I added the following declarations to the IE stylesheet with conditional comments:

.content, #primary {
       background:transparent;

     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ebe7e7,endColorstr=#80ebe7e7);

	}

.page-title, .singular-page-title {
	       background:transparent;

                  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80146ea4,endColorstr=#80146ea4);
}

This is the result:

You can see that the result is not very pretty! The font doesn’t seem to render very well.

I suspected that the IE filters were the culprit, so I removed the declarations, and here is the result:

Much better!

Conclusion: I’ll use the PNG fallback method.

Have you experienced this issue? Is there a fix?
Leave your comments!

Sidera Design » css

IE transparency and font rendering