Whatever:Hover doesn't work in IE7

[trancehead]

Does anyone know why IE7 has problems with whatever:hover?

You can see the problem at www.cybercellar.co.za with the wine list menu. If you hover the Red section it should (and does in IE 6 and FF) show a flyout menu of the different Reds (Cabernet Sauvignon, etc). In IE7 as soon as you mouseover the Red item the whole menu disappears.

I am currently using conditional comments so IE7 shouldn't even be affected by this (and I don't think it's the csshover.htc). Is there anything that anyone can see in the css section that could be causing this. The CSS is below:

<style type="text/css" media="screen">

#menu {
position: absolute;
background: #DEDAAC;
float: left;
padding-left: 2px;
padding-right: 2px;
padding-top: 0px;
padding-bottom: 0px;
z-index: 50;
height: 24px;
text-align: left;

}

#menu ul {
list-style: none;
margin: 0;
float: left;
padding: 0px;
text-align: left;
}

#menu a {
color: #781F61;text-decoration: none;
display: block;
margin: 0;
padding-left: 2px;
padding-right: 2px;
padding-top: 5px;
padding-bottom: 5px;
background: #DEDAAC;
text-decoration: none;
text-align: left;
}

.DropBorders li { border-left: 1px solid #98956D;border-right: 1px solid #98956D; font-weight: normal; border-bottom: 1px solid #98956D; }
// This is for each "flyout menu"

#menu a:hover {
color: #6F2627;
background: #F4F2DF;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

}
</style>

[dharrison]

Hi trancehead

I sympathise! I am using the same drop-down menu (after a bit of re-styling) on my new website.

At a glance I'd say your CSS is OK. if we are being picky I would say lose the float: left function under the #menu and add left: 0px. I recall having issues with float when I was customising my menu.

I think it is to do with the csshover.htc because because it was set up so IE can support it http://www.xs4all.nl/~peterned/csshover.html

but having said all of that, I have just opened it up in IE7 and its working fine for me. have you tried Ctrl and F5 a couple of times to refresh the page?

HTH. Re-post or PM me if I can help further.

Thanx

[getmea]

I just installed IE7 over the weekend and must say the same thing is happening to me - the rentire menu disappears. Sorry, I'm not a CSS expert nor moderate. If it is not happening to dharrison, IS it s CSS issue?

[trancehead]

Hi,

csshover was originally to get IE6 and below to do the whole :hover thing properly.

The thing is it works fine in IE6 and I have reworked it slightly (using conditional comments) to not be called by IE7.

Apparently it should work just fine in IE7 without the Javascript but as usual IE won't play fair.

I don't understand why it works for some and not for others. It is most frustrating.

[dharrison]

I must confess, I have given the layout on mine a lot of tweaking.

The main issue I found in IE7 was the positioning of the sub-menus would veer off to the right and disappear under the main menu bar. Thats why I lost the float: function on the main menu bar.

Getmea - I mod because some of the info I have given on the forums has been very good. At the end of the day, I am still learning, just like everyone else. I don't always get it right, but who does?

[trancehead]

Originally Posted by dharrison

The main issue I found in IE7 was the positioning of the sub-menus would veer off to the right and disappear under the main menu bar. Thats why I lost the float: function on the main menu bar.

That's it, you've cracked it. Works like a dream now.

[dharrison]

Glad to be able to help

[bj]

I know this is crazy, since IE7 is supposed to support hover without the script, but I had the same problem on IE7, changed the code to feed the script to all versions of IE and it worked. Go figure.

YMMV.

For anyone else who does a search and finds this thread, .htc files need to be served by your server as text files. When it isn't served properly it is often the cause of this script malfunctioning. This mime type can be set through your cpanel.