home of the madduck/ blog/
Adding a note for IE users

I am not a web site designer, but occasionally I'll find myself creating a new website. No matter how ambitious I may be, it won't take long until I trip over Internet Explorer's pathetic XHTML+CSS handling.

For sites that are not classified "business," I have long been using a little note at the top of pages, which would use the * html body hack along with display:none to display only in IE, simply because I can't be bothered and do not have the time to write hacks to cater for the family of broken browsers Microsoft forces upon most of the WWW users. This note would alert the reader that s/he'd be able to read all content, but as long as s/he'd be using an inferior browser, the layout and design would be off.

There were three problems with this approach: text-mode browsers, search engines, and IE 7.0: text-mode browsers and search engines got to see the text (as they don't process CSS, generally), and I could not figure out how to prevent IE7 from hiding the note — the massively skilled and capable Microsoft programmers fixed the oh-so-handy * html body hack and thus prevented CSS to be catered for the broken MS browsers, even though they still need cludges all over the place. I am sure it was just a side effect of clumsiness, but it's now fixed (as opposed to the million other bugs that persist).

So today I sat down and implemented a Javascript solution, which uses the DOM to insert content, if it determined that it's running on Internet Explorer. I could have used the <!--[if IE]> ... <![endif]--> construct, but that only works on Windows and not on the Mac. Thus, the Javascript solution is better as it will reach more Internet Explorer users.

I ended up using innerHTML, which is a non-DOM Microsoft hack, but in the end, I am coding this only for the Microsoft browsers, so I can just as well use their stuff.

Note that you are welcome to use this script under the terms of the Artistic Licence 2.0. You will, however, need to ensure that the insertNote() function gets called after the DOM has loaded. I use this event handler for that.

You can see the script in action on my Debian site, using a little hack to display it even in non-IE browsers. Suggestions welcome!

NP: Amorphis / Elegy

Update: lots of people have contacted me to let me know that the note was visible in Opera and Firefox and so on and so forth. This is due to the ?ie-note query string in the URL, which I added to allow non-IE visitors to view the note (for whatever reason). Simply remove the query string and visit the page directly and you will not see the note unless you are using Internet Exploder.