PDA

View Full Version : Hover in ie7?



twstdelf
Apr 27th, 2009, 11:15 PM
hey there, I have a css-based dropdown menu that I'm having some issues w/. It works perfectly in FF, and has a ie6-specific javascript helper. But the menu will not "pull-down" in ie7 specifically. It seems to be ignoring the hover pseudo-class ... going crazy...

Here is the relevant css:


#primary-menu ul.menu li ul {
left: -999em;
margin: 30px 0 0 0;
padding: 0;
position: absolute;
width: 144px;
}

#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
left: 0;
}


Any thoughts / help would be greatly appreciated...
Cheers,
TE

SB65
Apr 28th, 2009, 11:27 AM
Hi twstdelf

I played around with this for a while, and found that if I add:


#primary-menu ul.menu li ul {
left: -999em;
margin: 30px 0 0 0;
padding: 0;
position: absolute;
width: 144px;
}

#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
left: 0;
top:0
}

(with top set to any value) then IE7 behaves itself, otherwise the second level ul doesn't change position on the hover - as you point out. If anyone else can suggest why this happens, I'd be very interested. A cursory Google didn't find anything relevant, but I may not have looked hard enough....

Rowsdower!
Apr 28th, 2009, 04:14 PM
hey there, I have a css-based dropdown menu that I'm having some issues w/. It works perfectly in FF, and has a ie6-specific javascript helper. But the menu will not "pull-down" in ie7 specifically. It seems to be ignoring the hover pseudo-class ... going crazy...

Here is the relevant css:


#primary-menu ul.menu li ul {
left: -999em;
margin: 30px 0 0 0;
padding: 0;
position: absolute;
width: 144px;
}

#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
left: 0;
}


Any thoughts / help would be greatly appreciated...
Cheers,
TE

I haven't dug very deeply into your issue yet (and without the rest of your CSS and the HTML, I won't really be able to) but it seems to me like this might be involved in your problem:
#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
left: 0;
}

If you have a class called "hover" then nevermind. If not, try it this way and see if the problem persists:
#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li:hover ul {
left: 0;
}

Then again, this would be listing the same element twice so I might be misunderstanding your page structure.

Anyway, please give a link to a live test page (definite first choice) or else at least post the full code here for us to examine for errors.

SB65
Apr 28th, 2009, 04:52 PM
In danger of hijacking twstdelf's thread here, but I used the following basic code to recreate this issue :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css" media="screen">

#primary-menu ul.menu li ul {
left: 4em; /* changed so it's on screen for testing*/
position: absolute;
}

#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
left: 0;
top:0 /* hover fails in IE7 without a top value*/

}
</style>
</head>

<body>
<div id="primary-menu">
<ul class="menu">
<li>Menu 1
<ul><li>Menu 1A</li></ul>
</li>
<li>Menu 2</li>
</ul>
</div>


</body>

</html>

Rowsdower!
Apr 28th, 2009, 05:00 PM
OK, fair enough (and quite considerate, I might add) but what about adding this instead of the top value (since we don't necessarily want one added):


#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
position:relative;
left: 0;
}

You know what, nevermind... I'm not reading code very carefully today. Try this:

#primary-menu ul.menu li:hover ul,
#primary-menu ul.menu li.hover ul {
display:block;
left: 4em;
}

SB65
Apr 28th, 2009, 05:38 PM
Yup, that's a better way of doing it.

I still don't understand why it happens in the first place though.......

Rowsdower!
Apr 28th, 2009, 06:16 PM
I'm not too sure, myself. I never use these sliding menus so I don't have a keen grasp of how to debug them and why things break. I'm more used to the type of submenu that uses display:none; and then on hover of the parent <li> uses display:block;.

twstdelf
Apr 28th, 2009, 06:39 PM
Grrr... hrm... thanks for your suggestions, but nothing seems to be helping...

Even tried the display/none/block method, ie7 just sticks its fingers in it's ears and blows raspberries at me! :mad:

I'm still working on it - but at a loss as to what to try next...
Any other ideas are welcome.

Rowsdower!, SB65: I could pm you the url if you think it'd help?

TE

SB65
Apr 28th, 2009, 06:54 PM
Found this (http://http://www.webmasterworld.com/css/3146637.htm) which is in the same area. Might be worth a look through. Looks to me like this is a bug.

At home now so can confirm the original code works OK in Opera, Chrome and Safari as well.

Send me a PM if you want but may not have any time to have a look.

twstdelf
Apr 28th, 2009, 07:07 PM
Found this (http://http://www.webmasterworld.com/css/3146637.htm) which is in the same area. Might be worth a look through. Looks to me like this is a bug.

At home now so can confirm the original code works OK in Opera, Chrome and Safari as well.

Send me a PM if you want but may not have any time to have a look.

IE... *sigh*! I will have a look at the link you sent and pm you the url. No worries if you don't get a chance to check it out - I understand. Thanks either way for all the help already. :)

TE

twstdelf
Apr 28th, 2009, 07:40 PM
Oh! for the love of...

It's not a perfect fix, as I *have* had css-drop-downs working perfectly under an xhtml-transitional doctype - so I still don't really understand it.

Buuut, I changed the doctype to xhtml-strict and now the menu is working as expected... not ideal, but at this point, whatever - I have to tweak the Views output in Drupal further before it will validate correctly anyways, so it's good enough for now! ;)

Thanks for the help guys!
Take care,
TE