Bloody IE6

A bit of a technical rant this one I'd forgotten how damn difficult it was to create a drop-down menu in CSS that works in bloody Internet Explorer bloody 6. In theory it should be easy - create the menu as a list using the ul and li tags then set the hover attribute on the li children. Easy peasy if I'm writing for Firefox, Opera, or Safari, but oh no you've got allow for the gorilla in the room that is IE6.

See IE6 doesn't allow you to use the hover attribute with anything other then anchors (links) it doesn't recognise child selectors so you have to spell everything out in descending order - gah!

Oh well a snippet of conditional code, and yes I'm always highly amused that IE has the built-in ability to be able to specify code that only it can read, that points to an js file that bodges the job by applying a class name to every menu item when the mouse passes over it and removes it as the mouse leaves. (Hmm better change it to an htc I suppose)

So far so good, except it's a bit jumpy and the menu occasionally vanishes [sigh] I slap a border around various items and yep now I remember IE creates a gap between list items, if the mouse updates while in this gap the class is removed and the menu vanishes; so I add yet another bit of IE only code to fix that.

So I have a html file, a proper css file, and for IE a js file and another css file I've named bloodyie6.css.

I've had to add a couple of extra gubbins due to the fact that IE's box model (the way it determines where everything goes on the page) is quite frankly shite too.

Now sure the W3C specs aren't a model of accuracy and sometimes open to interpretation on how to implement something, but at times you have to wonder if Microsoft purposefully built this browser to be incompatible with every other one.