CSS hack for issue of IE 6?

Question

I have a HTML page where i have div to show help as shown in image above at bottom.

I also have combo box (select input) which is comming on top of this help div in IE 6.

For other browser and and IE6+ versions, it is working fine.

Is there any CSS hack for this issue for IE 6?

Answer 1

This is a very famous and old bug with IE6. What you need to do is to have an iframe before the div. This bug is quite well documented. It happens because in IE6 select boxes were ActiveX controls and were meant to be above all the elements of the page. iframe is also an ActiveX control and can be set above the select box. You can read up about the hack on this website http://www.javascriptjunkie.com/?p=5.

I am pretty sure a similar question has been asked around on SO as well but I couldn't find it.

Answer 2

There are well-documented CSS hacks for all the versions of IE.

For IE6, use the underscore hack -- put an underscore character at the front of the selector to target just IE6.

This page has full details: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

Answer 3

As i know, by default IE6 will put above the other elements.

You could hide them (display: none) when this div.help is shown