How to ignore hover in IE 7?

by sunil ravulapalli /11. January 2008 23:34 /css /Comments (0)

Okay, here is a very "unlike me" entry.

Its something to do with Cascading style sheets(CSS). If you don't know what it is, you can safely stop reading right here. If you care less you can also stop reading.

The only reason I am actually writing about this is that i did not find a single article describing the need for this.

PROBLEM:
I had a huge 3 level menu(suckerfish/tanny style). It took almost 2-3 seconds for the hover to activate my sub level menus in IE 7.

ANALYSIS:
The 'hover' implementation in IE 7 totally sucks once page size gets large(mine is 50k, without images). May be it was because I had like 200 li's in the menu :). No its not ridiculous. Amazons' left nav has almost a hundred. And its only 2 levels.

Anyway, the delay was totally unacceptable.

In the current implementation IE 6 uses javascript and ignores hover because it does not understand it. IE 7 however picks up the hover and uses it, messing up my nav.

I cannot use conditional comments for NON-IE browsers, so I had to find some hack so that IE 7 will ignore hover and use the javascript meant for IE 6.
In IE 6 we had a lot of choices. But since IE 7 was closer to CSS standards it became more annoying to hack it. It took me a lot of time but eventually found a fix here.

SOLUTION:
1.Put a lang attribute in the body tag like this:
<body lang="en"> . . . </body>

2.Prefix *:lang(en) in front stuff you want to ignore(You might recognise the follwing CSS from suckerfish)

#nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
left: auto;
}
#nav li:hover {
color : #FFFFFF;
background-color : #2D76AB;
}

making them

*:lang(en) #nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}
*:lang(en) #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
left: auto;
}
*:lang(en) #nav li:hover {
color : #FFFFFF;
background-color : #2D76AB;
}

IE 7 will ignore these hover definitions, other browsers will pick them up.

3. Dont forget to change your conditional comments to:

<!--[if IE]><script type="text/javascript" src="js/iehover-fix.js"></script><![endif]-->

Note:I am not an expert in CSS. There might be a more obvious way. But i didn't find it. This works for me just fine.

blog comments powered by Disqus