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.
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
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
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:
<html: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
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
Sorry. Comments are closed.