Question

basically im in a little dilemma… As usual, IE6 is messing up some tiny line of CSS.

All i need to fix everything is:

overflow:hidden;

Thats it. But, heres the problem. This is for a uni assigned piece of coursework and they say only 1 css file which must be valid. And no conditional comments :S so there goes my plan. Is there any way to target IE6 ONLY (not 7+ etc.) and still maintain a valid CSS file?

PS: before any of you say, well you should rethink your CSS etc, I have, its for a CSS dropdown menu and a nested element is stretching my link container so i need overflow set to hidden. Only IE6 needs this :S

EDIT MY SOLUTION:

html>body .allbrowsersceptIE6 {
    overflow:visible;
}

.onlyIE6 {
    overflow:hidden;
}

It works because all other browsers use the first value and ignore the second one unless the second has !important on it 😀

Answer 1

If it comes down to using hacks as your only option: http://www.javascriptkit.com/dhtmltutors/csshacks2.shtml

So, you want to apply that rule to #menu or whatever:

* html #menu { overflow: hidden; }