Why I Bit the Bullet (& IE’s Box Model CSS Bug)

>As a Computer Programmer (by trade and for fun) I’m obviously ever reliant on the ability to search the web for info… whether it’s parsing documentation, combing bulletin boards to uncover the solution to the daily problems that someone else has doubtless encountered, or the occasional hail mary when you have no clue what’s going on.

Lately I’ve been burning a bid of the midnight oil on a pet project, and tonight while trying to dust the cobwebs off of my HTML/CSS skills I realized that IE and Firefox were rendering my page differently. I remembered having bumped into the problem before but being rusty I had to go fishing and I found the solution on someone else’s blog. The issue was that IE isn’t standards compliant in terms of the way it behaves when rendering if padding and/or margins are specified. Firefox correctly adds the padding/margins to the size of the div (or whatever you’re applying the style to) while IE doesn’t. There is hope however, rather than going to wild extremes to hack the code to behave differently for different browsers you can just include something like the following at the top of your HTML document to include the proper document type definition:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

or

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

The bug is called the “Box Model Bug for IE”, if you’re really curious you can find more info here. Not the most interesting problem in the world, but it made me realize that rather than just being a leecher in the fount of Internet crap (and wisdom) I too can be a seeder, and thus I begin my own blog about my ventures in coding and all things related to Software Engineering.

Leave a Reply