Skip navigation

Ok. Not really magic and I bet other people got this figured out and it’s just me because I’m not following standards. Anyway…

My portfolio website was the first time I ever did table-less layout. So, it was also the first time I discovered what a pain in the ass IE is when it comes to CSS handling. See for yourself.

This is how the home page looks with Chrome and, with some minor differences, in Firefox: in Google Chrome

My portfolio website rendered in Google Chrome.

Exactly how I intended it.

Now take a look at what happens when you give it to IE 9, which, as of this writing, is supposed to be the best stable build of IE. in IE9

My insides repulsively retch at this FrankenstIEn (sic) of a page.

I wasted spent countless hours experimenting with CSS so that IE may render it well. But, as you may have surmised looking at that screen shot, I ended up with my arms raised in frustrated surrender and just put up that message (which, yes, only appears for IE users) suggesting that they download either Chrome of Firefox.

It looked like that for a long time until I discovered−wait for it, drum roll please−doctypes and quirks mode.

Doctypes are, to oversimplify, comments at the beginning of HTML documents. It is like the hashbang line they always tell you to put at the beginning of your shell/Perl/Python scripts. They don’t really affect your code though they tell the executing environment (in this case, the browser) additional info about your code.

So, I put the following doctype declaration in my pages

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

And behold how IE renders my portfolio homepage (another drum roll please): in IE9, post DOCTYPE


Despite that it now renders as expected in IE, I chose to keep that little banner/taunt because really, world, we shouldn’t be using a browser that is as standards compliant as any 1990’s browser in the year 2012.

And I know that this isn’t the magic panacea of this wretched IllnEss. I’m sure it isn’t difficult to make IE break when your using CSS layers and positions even with quirks mode. But for sites with simple layouts, this one is definitely my life saver.

Leave a Reply

Your email address will not be published. Required fields are marked *