Firestarter

With the arrival of  Internet Explorer 7 web devlopers will need to carefully consider the doctypes and css hacks they previously used to distinguish between standards browsers and the IE.

There is an good introduction to doctypes here:  Document Type Declaration - Wikipedia

For designers/css coders read: http://www.alistapart.com/articles/doctype

A listapart lists the following as correct doctypes:

HTML 4.01 Strict, Transitional, Frameset

• < . !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• < . !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
• < . !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

• XHTML 1.0 Strict, Transitional, Frameset

• < . !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• < . !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 DTD

< . !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Here’s an explanation of when to use what

http://www.htmlhelp.com/tools/validator/doctype.htmlThe key differences between transitional and strict are in HTML declarations are:

• Depreciated elements are not allowed.  These include “font” “center” etc. 
• Link targets are not allowed, so you can can’t validate if you want to use HTML popups.  This is a killer for me, as Javascript popups can’t be followed by search engines!
• Frames are not allowed.  No arguement from me here…

The other important difference is how the CSS is rendered.  Most importantly which “box model” IE will use!  If you set strict, then IE6 will render the correct box model, but IE5 and IE5.5 won’t, so then you need to use different Conditional test/hacks in the CSS. Agh!

 See http://css.maxdesign.com.au/listamatic/about-boxmodel.htm for great explanation of what to use.

In summary:

• No doctype will set both IE5 and IE6 “quirks mode”
• HTML transitional - no “URL” - again IE5 and IE 6 “quirks mode” (traditionally good for simplifying hacks)
• HTML transitional - full URL -  IE5 “quirks mode”, IE 6 “standards mode”

More at http://www.webmasterworld.com/forum83/7345.htm

Finally http://www.quirksmode.org/css/quirksmode.html site explains further:

In strict mode ad image is an inline element, which means that some space should be reserved for possible descender characters like g, j, or q. Of course an image doesn’t have descender characters, so the space was never used, but it still was there. The solution is to explicitly declare images block level elements: img {display: block}. Nonetheless browser vendors introduced “almost strict mode”. This was defined as strict mode, but with images continuing to be blocks, and not inline elements.

And the full kahoona onn technical rendering with charts on what gets rendered and full list of doctypes see http://hsivonen.iki.fi/doctype/

IE6 has another bug [now fixed in IE7].  This allow validation of HTML, but still allows use of the old IE5 box model in IE6.  You have to include an XML prolog right at the start of the document: < . ?xml version="1.0" encoding="iso-8859-1"?> [remove dot]

So moving forward:

• IF you want “target” links available in most CMS editors then have to use transitional or it will not validate.
• IF you use transitional, and you want IE6 to render the same as IE5 (ie. crap box model), then you can still have quirks mode in IE6 if you don’t include the full URL to W3C. But it won’t validate.
• If you want to validate and force box model display to quirks mode use the XML prolog…[UPDATE: Looks like MS has removed the XML prolog hack - see comments in MSDN article below] IE5,6 and 7 (and let other browsers to it right).
• What about IE7? see http://blogs.msdn.com/ie/archive/2006/02/02/523679.aspx for more info. 
• So it looks like - if you go for “strict” or “transitional” with full URL (which results in standards CSS) then you need to filter pre IE6/7.
• The filter hacks used in the past will have problems in IE7 see http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx 
• http://msdn.microsoft.com/library/default.asp?url=/library/en-us/IETechCol/cols/dnexpie/ie7_css_compat.asp
• It seems as if IE conditional filters will be the only safe way forward, now that many of the hacks will no longer work. http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp

      
Comments are off for this post