Archive for January, 2008

Dealing with CSS Rendering of Internet Explorer 6

Monday, January 21st, 2008

One big headache I’ve had for the past year with coobird.net was the font rendering on Internet Explorer 6 (IE6). Compared to other browsers, IE6 will render the fonts at a larger size that is defined by using Cascading Style Sheets (CSS). My browser of choice is Firefox, so I generally create content and view them on Firefox. Unfortunately, IE6 implements CSS differently from other browsers, the end result is text that’s too big and borders that are too thick.

The following are some screenshots of coobird.net before changes were made to make the page rendering more consistent between IE6 and other browsers:
coobird.net on Firefox
Firefox 2
coobird.net on Opera
Opera 9
coobird.net on Internet Explorer 6
Internet Explorer 6

Searching around for the CSS font rendering of Internet Explorer 6, there are quite a few people out there who are experiencing the same problem. One way to fix this problem is to use a different style sheet for Internet Explorer 6 using conditional comments. (Hack-free CSS for IE was a good article on conditional comments.)

Currently, coobird.net implements the conditional comments technique mentioned above to use a separate style sheet that specifies different font sizes and border thicknesses for IE6. Finally coobird.net looks half-way decent on Internet Explorer 6.