The Occasional Masthead

If you’re reading this with Internet Explorer (and you’re on the front page), you’ll find a badge in the right hand column which leads you off to a page explaining briefly why you should consider using something other than Internet Explorer.

Tim Bray and Peter-Paul Koch talk about the problems better than I can right now, and I strongly recommend you read what they have to say.

This is not simple Microsoft bashing. All browsers are buggy, but some are more buggy than others. And buggy browsers are one reason why developing good quality web sites is expensive and frustrating. The problem is that Explorer has a massive market share, is more buggy than all of it’s serious competitors, and will no longer be fixed unless you pay for a new version of Windows.

None of this is in any way good for the consumer. So. Send a message. Use Safari if you’re running Mac OS X, or one of the Mozilla clones like Camino. If you come across a website that doesn’t “work” without Explorer, contact the author and tell them their site is broken.

Driving home from the QLHF meeting yesterday, before going over to Steven’s for dinner, I had a thought about how to keep my desired blog entry layout for well behaved browsers and something kind of OK for Internet Explorer.

If you peek in the source code for this page, you’ll notice that in the header there’s a snippet of JavaScript. It checks if the browser is Explorer, or not, and writes an appropriate bit of CSS for each case. This works because the structure of an entry is roughly:

    <div class = entry>
        <div class = header>
            Title
            <div class = timestamp >
                1:50 pm
            </div>
         </div>
         <div class = entrytext >
             vague rambling.
         </div>
    </div>

The “entry” <div> is set to position:relative. For everything other than Explorer, the “timestamp” <div> is then positioned absolutely by specifying its left and bottom, which aligns it relative to the “entry” <div>. For MSIE, the timestamp is just left where it is, with a bit of padding at the top for neatness.

So the external style sheet has styles for everything except the “timestamp” <div>, and the embedded JavaScript supplies that last little bit. I’m quite happy with this solution, as I feel it’s a reasonably neat hack.

There are still some things to do. Explorer 5.2 on the Macintosh still insists on leaving some space above the body text entry, blatantly disregarding the CSS 2 recommendation. I don’t think I’ll pursue this too much further, and instead just keep recommending people upgrade to browsers that work.

I might adapt that chunk of JavaScript to put a chunk at the bottom of the main blog page explaining why MSIE is not a good thing, or at least a link pointing to the relevant pages. Then I’ll have a cup of coffee and a bit of a nap.