Thursday, 17 June 2010

IE6 and the empty div

So I'm working on a site where the majority of the audience work within environments where Internet Explorer 6 (IE6) is still prevalent... now I used to work in a similar environment so I always used to use Portable Firefox, one of the joys of which is that it doesn't touch the underlying OS, neither does it take any notice of the various rules associated with IE6 so while others were bemoaning the loss of access to facebook I was wondering what all the fuss was about... but without them being on there there was less of a reason for me to be and I realised what a drag it was... which is all a bit of a long-winded introduction to IETester which allows me to now view sites created using my bright and shinney Windows 7 machine running the latest IE, Chrome, Firefox, Safari and Opera to run IE6... seems a bit naughty that though - like asking a supermodel to wear old, grungy Y-fronts.

Anyway, after playing with it for a while I discovered a problem with an underline I was using. Being the perfectionist I am I wanted the underline on some text to miss the descender of the text I was using, a little like underlining some text at school and wanting the line to miss the curly bits off the bottoms of "g"s, "j"s, "p"s and "q"s (and any other characters which your handwriting might make drop below the baseline). So I'd developed the site using lots of bright browsers and everything looked cool thanks to some judicious use of MeasureIt to make sure everything lined up correctly and then I looked at it using IETester and the underline was thick as anything (If in this instance "anything" is as thick as a line of text!) but, thanks to this post on The Webmaster World I clocked that IE6 was setting the height on an empty div as being the default height of a line of text. Explicitly telling IE6 that it wasn't so worked a treat and so a slung "line-height:1px;font-size:0px;" into the CSS and all was right in the world...

Still, a shame that I need to go routing around the internet looking for solutions for a browser that's nigh on 10 years old (released on the 27th August 2001) and is described as being the "least secure software on the planet". Perhaps I need to add a rider to sites in future that I'll not be supporting it anymore thanks to it's general crappyness... perhaps if I weren't working with an audience in mind that were constrained to use it I could get away with that... poor buggers.

And don't get me started about horizontal navigation uls... not even the judicious use of /IE7/ can solve that particular problem, I had to use CSS hacks (Which, as everyone knows, make the baby Jesus cry!).