IE BASE Tag Bug

Bengt e-mailed me with a problem he was having using one of my layouts on a Drupal-powered website. He linked me to a thread on Drupal’s forum about the problem.

After a lot of hacking around I felt confident enough in my findings to post my initial findings on this bug, what triggers it, and how to work around it.

Symptoms Of The Bug

The initial signature of this bug is text in IE is not selectable. Attempts to highlight text doesn’t work or you’re only able to select a whole block of text. What other issues there may be that are caused by this bug I don’t really know, but I’m sure there’s a few others.

Cause Of The Bug

It’s the BASE tag. It seems by simply including a BASE tag will trigger this bug.

The symptoms only appear when IE is in standards mode. It does not happen when it is quirks mode.

When in standards mode I found that if you stuck a closing BASE tag, the symptoms go away. Unfortunately a closing BASE tag is forbidden under HTML 4.01. But it appears to be perfectly valid under XHTML.

A lot of XHTML pages will use the short-had version of a closing tag, which is simply a forward slash before the greater-than sign used to close an HTML tag. This short-hand version doesn’t remove the symptoms. Only a full-blown closing BASE tag does it.

A closing BASE tag does not put IE into quirks mode. IE remains in standards mode, but HTML 4 documents will be called invalid by the w3 validator.

So What To Do?

XHTML users need not worry. Just throw in the closing BASE tag and you’re fine.

HTML users have a couple options. You could force IE into quirks mode somehow (bad/missing DTD… see here for more information) or you could toss in a closing BASE tag and just live with the fact your page will be marked invalid.

Or you could just not use the BASE tag alltogether.

Or, last, but not least, you could use IE conditional comments. It’s proprietary stuff, and I’m not a big fan of that, but it gets the job done in delivering valid HTML 4 documents that don’t break under IE.

<base href="http://drupal.org/"><!--[if IE]></base><![endif]-->

I’ll toy with this a little more, but what’s there is probably best.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s