Recently I had the dreaded “but it doesn’t work in IE6” conversation with a client.
Usually all it takes to make a simple site work with IE6 is altering the widths of divs (as IE6 seems to treat divs as wider than they are) but this one was a real head scratcher
For a start – nothing was appearing inside the grey box – a div I had created to hold all the field information from the system.
Some tweaking with showing and hiding stylesheets lead me to believe it was definitely a CSS problem.
Eventually I discovered that if I made the div background-color:transparent everything showed up okay. Hmmm
I finally discovered that if I gave the containing div a z-index of -1 it would display the background colour behind the rest of the text as intended.
But where were my image buttons? The site had image buttons that were positioned absolutely to appear at the bottom righ of each of these divs. They were nowhere to be seen in IE6! Even if I gave them a really high z-index.
The only way to make them appear was turn off their absolute postioning and make them postion:static.
Ok so now they appeared – but I couldn’t click on them! Grrr!
Hmm – much tawling through the Net proved fruitless – it was only with much experimenting that I discovered if I took OFF the postion:relative I had put on the containing div it mean that the image buttons were magically clickable again!
Taking off the position:relative also meant that I could lose the z-index:-1 I had added earlier.
The site now works in IE6 but doesn’t look exactly the same in IE6 as a normal browsers as the image buttons are aligned left and not right
Well tbh I can live with that – and if any IE6 user complains – they know where they can stick their useless old non-complaint browser don’t they!