Windows Internet Explorer
Image via Wikipedia

Did you ever get one of those days when no matter what you do or try, nothing seems to work for you?

Well I had one of those days today – a site we are currently working on was giving all of us heartache, so I decided to get my hands dirty and give the lads a dig out.

It was a strange one, we use the Son of Suckerfish method for most of our websites that use drop down menus. Suckerfish is a great way to have a dropdown menu work purely with CSS alone. The only javascript required is approximately 8 lines of code and it’s only there to support non-standard compliant browsers such as Internet Explorer.

All was well and good with this new site until of course it was tested in Internet Explorer 6. For some odd reason the drop down menus were appearing behind other divs on the page and therefore you couldn’t see them. After hours of trying many different things from the z-index to positioning, we couldn’t find a suitable solution. Most solutions would have meant rewriting the HTML code to suit. This was something we didn’t really want to think about as it was only happening in one browser… IE6.

Thankfully I found a great little solution to the issue on a blog (sorry the blog address escaped me now) – it was another few lines of code:

function reIndex(){
forms = document.forms
zi = 2000;
cn = document.getElementsByTagName(‘div’);

for (n=0;n<cn.length;n++){
cn[n].style.zIndex=zi–;
}
}

You just need to call the function from the body tag onload and voila.

This basically reindexes all the divs on your page so that IE6 doesn’t fall on it’s face when you give it something to do that it’s not capable of doing!

Be Sociable, Share!