Internet Explorer has its own unique and dysfunctional way of interpreting the CSS box model of website layout. It is frustrating for web designers to find that a site, which looks so pretty in Firefox and Safari, has burst at the seams in IE.
One way you can minimize the pain of coding for IE is to structure the head of your HTML in a way that forces IE to run in standards mode, as opposed to quirks mode.
Quirks mode is triggered:
- when the doc type declaration is missing/incomplete
- if it’s HTML 3 or earlier, or if a system identifier is missing
- when a comment or other content appears before doc type
- when there are errors anywhere in the document
- in IE6 – when there is an XML declaration before a doc type declaration
A tutorial by Bill Weinman on lynda.com gives some sample code for the top of your HTML file that will force IE into standards mode:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br /> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> < ?xml version="1.0" encoding="utf-8"?><br /> <html xmlns="http://www.w3.org/1999/xhtml"></html>
If you still trigger quirks mode, check for errors in your HTML using the w3 validator.
Now you should have an error-free, standards triggering page that will render correctly in IE.
But to eliminate any nasty surprises at launch, always check your page. If you are on a Mac, IE NetRenderer is a useful resource, though it doesn’t seem to work for all sites. If IE NetRenderer comes up blank, try browsershots. It’s slow to render, but always gives results.
But for “Internet Explorer Testing Done Right,” try Parallels, which allows you to run Windows from OS X without rebooting.
Using these tools, you can be certain that all is running well in Internet Explorer land.
