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.
