August 2005 - Posts

I recently made the verbal error of saying that for the new BASE element changes in IE 7 you had to put your tag inside the HEAD element. Well, someone pointed out to me rather quickly that on Firefox you could just have a bare TITLE and BASE followed by some body content and away you go the page would validate and parse properly. Well, we do the same thing in IE, and it is called implied tags in HTML. There are some gotchas though.

First, I'll start with the trick... What in the heck is IE doing?
<HTML id="dumpInternals"><TITLE></TITLE><BASE href="foo"><BUTTON onClick="alert(dumpInternals.outerHTML)">Click Me!</BUTTON></HTML>

That is your boilerplate. When you click on your button there you'll find that IE is actually putting the TITLE/BASE in the implied HEAD of the document and then putting the BUTTON into the implied BODY. Good stuff, and the document is still perfectly valid. Issues can arise when you do this though because you aren't necessarily realizing what elements belong in the HEAD and which belong in the BODY and so you might terminate your HEAD enclosure early and put a bunch of random elements that don't belong in the BODY into the BODY.

This won't look right without your IE 7 Beta 1, since the BASE element is going to wrap a bunch of stuff, but you can get the gist. The below will show you that the second BASE ended up inside of the BODY. That isn't good, we don't look for BASE elements there and it won't get used. (Read my previous post on IE 6 behavior and you'll see that it used to get used because of some container magic, but not anymore, we are compliant).
<HTML id="dumpInternals"><TITLE></TITLE><BASE href="foo"><BUTTON onClick="alert(dumpInternals.outerHTML)">Click Me!</BUTTON><BASE href="foo"></HTML>

The set of implied rules has impacts in other areas as well. You can, for instance, end up using document.writeln to prematurely terminate your HEAD element and move a bunch of stuff out into the BODY. So, if you are doing inline document writes you should probably do them where you want the content to go. Writing the content out in script blocks that appear in the head is the wrong way to go about it. You could hook up to some events or have a container element that you write into, and that is acceptable, but with inline writes you could get unexpected behavior.

Recently I noticed a site that was doing a document.writeln in their HEAD element about half-way through the head content. End result? Well, the content got moved into the BODY element and the object model tree for the page was completely wrong. Good thing they weren't navigating the object model looking for stuff and good thing the extra META/LINK elements weren't being used as well. With a static parse of the page you wouldn't even notice these problems, but when DHTML becomes involved it can change the structure of your document on the fly and rewrite what the object model tree looks like.

I should back this up with some samples. I'll try and get those prepared shortly.

Looks like my post went live over on the IETB regarding changes we made to the BASE element in IE 7. Previously the BASE element had some issues, primarily by design, that made certain actions within the guts of IE very easy to do, but polluted the exposed object model and overall tree hiearchy. Well, it was time to fix that. If you are interested in how we fixed it, go check out my entry All your <base> are belong to us.

There have been some comments on the post so I'll try to cover them over here with what might be some interesting posts about how IE works.

Posted by Justin Rogers | 45 comment(s)
Filed under:
More Posts