ABBRacadabra

In Chapter 8 of the DOM Scripting book I’ve got a little script that looks through the contents of an HTML document, finds any instances of the abbr element and then constructs a definition list with the information contained within them. Then there’s a section in the chapter called A browser bomb in which I explain how the script needs to be forked because Internet Explorer refuses to recognise the abbr element—part of a longstanding spat with Netscape. This means not only that you can’t do any scripting on abbreviations, you can’t style them either.

But now it turns out that Internet Explorer has an interesting quirk. If you write:

document.createElement("abbr");

…suddenly the browser recognises the element and you are free to script and style abbreviations (you don’t even need to append that newly-created element to the document). This applies to any elements that IE doesn’t recognise, which could be very hand in migrating to HTML5.

It doesn’t qualify as an error so I’m not going to add it to the errata but I sure wish I had known about this when I was writing the book.

Posted by Jeremy on Monday, January 28th, 2008 at 6:24pm

Comments

I had to add it to the document to get it to work…

# Posted by Mats Lindblad on Monday, January 28th, 2008 at 10:08pm

Gee. You could start something and call it "Hacks for Internet Explorer"! How novel.

# Posted by Rob on Monday, January 28th, 2008 at 10:18pm

The thing that everyone has forgotten in all this are users that have Javascript turned off— script and style away, but your non-js users are screwed.

# Posted by Jeff on Tuesday, January 29th, 2008 at 1:45pm

Jeff, they’re not "screwed"—they just don’t get the script or the style which, because I’m using progressive enhancement, isn’t a dealbreaker.

# Posted by Jeremy Keith on Tuesday, January 29th, 2008 at 2:32pm

Awesome find, Jeremy! This might mean the end of the acronym tag workaround for IE abbr’s. Also, if you want to imitate the dashed border that’s present by default on abbr tags in Firefox, then use a style like this to make it work in IE:

border-bottom: dashed 1px #ccc; _display:inline-block

By default, IE won’t let you apply top or bottom borders to inline level elements unless you give it display: inline-block.

# Posted by Graham Peel on Tuesday, January 29th, 2008 at 4:06pm

I don’t know…I think it might be worth adding to the errata just so people who read the book (but not this blog!) discover that very useful little quirk. I don’t have any use for it now but will definitely be keeping it in the back of my head for the future.

# Posted by Elaine Nelson on Wednesday, January 30th, 2008 at 4:57pm

Great post. Thanks for keeping the web development community up to date. Thanks ckinfo

# Posted by ckinfo on Monday, February 4th, 2008 at 8:51pm

Wow. Filing that one away. Thanks Jeremy.

# Posted by Gordon Brander on Tuesday, February 5th, 2008 at 5:32pm

Thank you. Your site one of the best that I saw

# Posted by Andy on Wednesday, February 6th, 2008 at 1:24pm

Great Stuff. Thx a lot for sharing. Best Regards for author.

I have been looking for this info long time

# Posted by Lucas on Wednesday, February 6th, 2008 at 2:33pm

Hi Jeremy, thanks for that info! If you ever really release a book "Hacks for Internet Explorer" like Rob suggested let us know!

# Posted by filmmeister on Wednesday, February 6th, 2008 at 8:40pm

If you ever really release a book "Hacks for Internet Explorer" like Rob suggested let us know too!

# Posted by TMaxim on Thursday, February 7th, 2008 at 8:27am

That is Gold, just pure gold. Good find

# Posted by Gary Barber on Sunday, February 10th, 2008 at 5:29am

This is not just an IE quirk! If you use document.createElement("dufus") as above, the <dufus> tag will then be usable your document and show up in the browser. You can use it and style it as if it was a W3C HTML defined tag. Just be sure to use display: inline or display: block ( or … ) in the CSS!

This works in IE6, Firefox 2.0.0.12 and Opera 9.25

The older, more involved, way to get IE6 ( and below) to recognize is to use an XML namespace in your XHTML document. The <html> tag would look like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.W3.org/1999/xhtml" lang="en" xml:lang="en" >

The two namespaces are different according to the XMLNS spec, even though their URI’s resolve to the same place. You could then do this:

&lthtml:abbr> title="HyperText Markup Language">HTML</html:abbr>

to get IE to recognize the <abbr> tag.

# Posted by Rick on Monday, February 11th, 2008 at 8:09pm

It is a good tip. When I start working on a site, I will use it…

# Posted by Susan on Thursday, February 14th, 2008 at 12:17pm

Good

# Posted by DJ on Friday, February 15th, 2008 at 8:50pm

Hi Jeremy, thanks for that share

# Posted by Ramses on Sunday, February 17th, 2008 at 5:17pm

I agree it don’t need to be writed in Errata but thanks for sharing it with us.

# Posted by Sierra on Tuesday, February 19th, 2008 at 12:59am

Neat little trick for IE, thanks for sharing it.

# Posted by Margret on Wednesday, February 20th, 2008 at 2:47am

Thanks Jeremy! really a helpful tip

# Posted by Maria on Saturday, February 23rd, 2008 at 12:22pm

I tried it and it worked. nice trick

# Posted by Zeb on Saturday, February 23rd, 2008 at 2:59pm

Sorry. Comments are closed.

January 2008
SunMonTueWedThuFriSat
  12345
6789101112
13141516171819
20212223242526
2728293031  

Recommended Reading

XML Subscribe

Grab the RSS feed for this blog.

JavaScript API

Grab the RSS feed of comments for this entry.