|
For the last 5 hours, I've been struggling with IE to get it to render the CSS box model correctly. I know the DOCTYPE has to be set with a valid W3C URL to switch browsers like Mozilla, IE5 (mac), IE6 (win) and Opera 7 into Standards Compliant Mode. My DTD is correct.
<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Mozilla Firebird renders the page as expected. IE does not. I seem to say that far too frequently when it comes to that browser, especially now that I code for W3C compliancy.
After much frustration, I decided I needed find out if IE or my code was the problem. I Googled "IE6 box model xml transitional". I should've done that 5 hours ago. The first hit told me everything I needed to know.
IE6 claims compliancy, but chokes on the XML declaration, which causes the engine to not see the DOCTYPE. That's why my layout is whacked. Without recognizing the DOCTYPE, IE reverts to backwards compatibility Quirks (aka non-compliant crap) Mode. Thus, the box model is rendered incorrectly, as it is in NS4, and all previous version of IE and Opera.
GAH! All that time wasted. I certainly learned a lesson, one that will not soon be forgotten. When in doubt, suspect the browser, not my code.
To disable this annoying little feature one must not use the XML declaration. The first statement must be DOCTYPE for IE to switch to standards compliant mode. Fortunately, this is allowed and the document still validates.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Further research revealed that IE6 Service Pack 1 does not fix the incorrect handling of XHTML documents.
01:06 on June 06, 2003
|