Now I'll just see how it looks in IE6...

Posted by Wow, that's great. What does it look like in IE6? on 8 September 2009 | 0 Comments

Tags: IE, IE6, cross browser, browser, css, markup, design, layout

You create this really cool CSS/Ajax/html layout. I mean really nice, clean, neat and tidy. It looks great in FireFox, Safari and IE7 is almost perfect too. Happy days.

...until you hear thos dreaded words. 'How does it look in IE6?'.

Now before you start thinking, 'here we go again, Ed and his hatred of IE6', I don't hate IE6. I just think it's like having a steam driven car. Fantasti in its day. Revolutionary. Ground breaking. But 100 years out of date.

The example in question is at http://www.hit.org.uk/training/. In the middle column, we've added some neat css flyouts. We had them working absolutely fine in Firefox, Safari and IE7+. Check it in IE6. Nada. Nothing. No show. What's a programmer/designer/disparaging soul to do?

The original css had been hacked around from another recent triumph at http://www.express-safety.co.uk where we added some nice pure css menus. And they looked cool.

So when the guys at HIT said they wanted to make their training section 'a bit sexier', I just had to suggest using a flyout menu, similar to the one we added to Express Safety.

The problm they were facing was that there was just too much information, which meant losing some of it below the fold with 3 sections.

We chatted about it for a while and came up with a 'tabbed' section layout and because the course listings needed to show a lot of info at this point, rather than dropping down, we decided flying out to te left would be the best option.

Cue a nice [but properly invalid] markup, ome tricky css and hey presto, we had a winner.

...until IE6 arrived that is.

The problem is, many of HIT's site visitors still use IE6 (maybe 25%, which is above the average these days) so we needed to make things work in IE6 too.

Ok, problem 1. They just didn't show in IE6. Not to worry. Just do the old 'hide the </a> and wrap it all in a table' trick. Still no show. Hmm. Ok, try a few things and position:absolute cures it.

Now we have a problem in Firefo et al. It uses a centred layout, so we can't set a -neg left and top to position the flyout. Ok, knock up a little javascript to calculte and set the left offset from the screen size. Sorted. It worked in IE once we found the proper call for screen width.

More tweaks later, like adding hug amounts of negative margins for IE6 and we get close, but that's good enough for me.

So why am I telling you this? Well, it took a day to do the that worked in IE7+, as well as all the other browsers, then about 3 days to get it looking acceptable [it looks nothing like it should] in IE6. IR6 is causing people to compromoise or ignore layout issues and the solution is to upgrade as soon as you can.