One of the many mysteries.

At work I have been reading about javascript in an effort to start to understand how to use it and write more complex scripts that use the document object model (DOM). If that sounded like greek well... it still sounds like greek to me however if you have seen some bells and whistles on the web and there wasn't a plugin required then it was most likely javascript mixed with cascading style sheets (The two mixed together = DHTML, D might stand for difficult, or demanding, but really it means "dynamic").

All this time I knew that IE did not seem to render web pages correctly when it came to the spacing (margin, padding, border). I didn't know why so much as Mozilla seemed to do it right and IE was close and well me being me close is what usually caused me to work on something to the wee hours of morning in college or late into the evening at work. The other day however I read a paragraph in my O'Reilly "Javascript the Definitive Guide" book that at least explained things a little bit.

IE renders spacing incorrectly because when you tell it a width and a height of an object (lets call it a widget), part of the width and height isn't just the area on the widget where the text appears but it is also the border and margin around the text (even if the border and margin is set to 0). So if you set the width to be 300 and the height to be 500 with a border of 5 pixels and a margin of 10 pixels the area on the widget where the text appears would be something more like 270px W X 470px H. This is a problem is because when you specify a width and a height that is width and height WITHOUT the margin and border.

Now to make IE behave (sit Uboo sit) all you have to do is add this line (meta tag) to the top of your HTML file:

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"

Haza! I wish I would have known that 5 years ago.