CSS box model woes

This weekend I spent a couple of hours struggling with a new DIV-based layout design for peelinc.com (it’s not up yet, don’t bother looking). The core of my problem was that I was designing for the border box model but the browser was rendering it with the W3C content box model. It wasn’t until I realized that I needed to explicitly state that I wanted the border box model that things started working correctly.

And really W3C – content box model? Trying to develop a fully-fluid layout using the content box model is nuts.

Except I couldn’t get IE8 to render using the border box model even though it’s supported. And yes, I had the !DOCTYPE specified so it was suppose to be rendering it in standards compliance mode. After enough digging I figured out that despite the DOCTYPE, it was rendering it in IE7 compatability mode instead. Arg. I was able to get IE8 to cooperate by using the IE document compatibility meta tag:

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” >

Yet another reason why I hate hate hate IE.

But now, thankfully, the page renders exactly as I had intended on Safari, Chrome, Firefox, and IE8 without any browser hacks (if you don’t consider telling IE8 to use the freakin’ standards a hack). No idea what it’ll look like on IE6 or IE7, but frankly I’m not worried if it looks a bit wonky in those — the content will still be perfectly readable.

Published by

cpeel

I'm a gay geek techie space nerd living in Seattle, WA.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s