Problem with hover pseudo class in IE7

Discussion in 'CSS' started by KLB, Nov 2, 2006.

  1. #1
    IE7 finally supports the hover pseudo class beyond just anchor tags (e.g. <a href="">). Unfortunately I'm having a wicked time with a DHTML menu I'm working on not working correctly in IE7. It displays out correctly and if one drills down into a drop down menu and then backs the cursor out through the menu hierarchy everything works just fine. If however one drills down into the menu, then moves the cursor off the menu and then goes back into the menu, oftentimes ghost menu lists are left behind. These ghosts will go away once one has moved the cursor up and down the menu list.

    I have created a demonstration page of this problem that is free of other detritus to make it easier for diagnosis. The demo page is at: http://environmentalchemistry.com/IE7HoverGlitch.html

    The page in question works correctly in Firefox and Opera. The page also validates to W3C's HTML 4.01 Strict and CSS specifications.

    While the page does work correctly in IE5.5 and IE6, this is only because I have provided a JavaScript replacement to the hover pseudo class for those two browsers as they do not support hover. IE7 does not make use of these JavaScripts to operate the menus as it doesn't need them.

    If anyone can verify that they are seeing this problem and/or can provide a potential work around to this issue I'd greatly appreciate it. I've plainly run out of ideas as to how to get IE7 to play straight on this issue.
     
    KLB, Nov 2, 2006 IP
  2. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #2
    My problem is apparently related to IE's "hasLayout" property and a bug that has been in IE's rendering engine for quite some time (see: http://www.webmasterworld.com/rv4.c...ttp://www.webmasterworld.com/forum83/6999.htm).

    I still haven't found a DHTML solution to my problem, however, I discovered that if I forced the JavaScript I use to emulate the hover effects of my menu in IE5.5 and IE6 on to IE7 then IE7 will behave properly. I'm leaving my IE7 hover glitch page above as is without the JavaScript hack as I reported my rendering problem to the IE7 UAS team (they take IE7 page rendering bug reports) and I'm hoping they have a DHTML solution or that maybe they will send my report on to the IE7 development team as a bug report that they need to fix in IE7. It is a shame to finally get hover support in IE7 only to find it broken by a goofy bug. :(
     
    KLB, Nov 3, 2006 IP
  3. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I tried to fix your menu by giving hasLayout ( adding a,h3{min-width:1%;} ...) but it had side effects on positions and didn't make all the ghosts disappear.
    You are not the only one to notice the problem. You may find ideas there :
    +http://www.webmasterworld.com/css/3146637.htm
     
    Dan_A, Nov 5, 2006 IP
  4. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #4
    That Webmaster World is in reference to my posting of this issue in their Webmaster World Supporter's forum. I couldn't post my problem in their main CSS forum because they do not allow the publishing of URLs to one's own site in their main forums.

    I tried all kinds of tricks in regards to eliminating the use of "width" and "height" styles, but this created all kinds of nasty side effects in other browsers. Basically my whole problem with my menus in IE7 and depending upon the hover pseudo class revolves around bugs with the hasLayout property in IE.

    I don't think there is much we can do from a pure HTML/CSS perspective to work around this IE bug. The only real solution is to continue on the use of JavaScript to control the display state of menus just as was done in IE5.5 and IE6, which do not support the hover pseudo class.
     
    KLB, Nov 5, 2006 IP
  5. Murphy_cz

    Murphy_cz Peon

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    See "IE7:hover ghosts bug" - http://murphy.cz/ie7-hover-ghosts-bug/ ;–)
     
    Murphy_cz, May 30, 2007 IP
  6. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Adding min-height: 1%; to your nested lists' style rules will solve the problem. No hacks needed, just stick it in with the rest of the style properties.
     
    Dan Schulz, May 30, 2007 IP
  7. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I'll have to experiment with the 1% thingy and see what happens. This should not be necessary however. Last fall when I raised this question my solution was to simply have IE7 use the same JavaScript onmouseover/onmouseout events that I was using for IE6. My hope is to eventually be able to eliminate the onmouse events to reduce the size and complexity of my code. Of course this can't happen until virtually all users accessing my site are using a browser that fully supports the hover event properly (which could be years).
     
    KLB, May 31, 2007 IP
  8. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Okay for the record, I did try the min-height:1% thingy and it does NOT solve the problem at all. The ghost sub-menus still appear.

    Basically, while IE7 makes strides in the right direction in regards to properly supporting the hover pseudo-class its support is not complete and can not be relied on for sub-menus. If one is using multiple level dynamic menus they will need to use the onmouse events to display/hide submenus in IE6 & IE7. Maybe the next iteration of IE will solve this problem, but this also means we will have to be relying on onmouse events for a decade yet to come given how slow Microsoft is to roll out new versions of IE. This is very, very irritating.
     
    KLB, May 31, 2007 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I took a look at your code (finally). There's too much code there for such a simple dropdown menu (which isn't even working properly in Opera 9.2). Have you looked into Suckerfish by any chance as an alternative?

    the only thing you'd have to do to make it work 100% in IE 7 is to add min-height: 1% to the nested unordered lists.
     
    Dan Schulz, May 31, 2007 IP
  10. KLB

    KLB Peon

    Messages:
    1,167
    Likes Received:
    68
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I have tested the menu against Opera 9.01 and Opera 8.5 during its development and just retested against those two versions of Opera (I don't have v9.2), if there is a problem, I don't know what it would be, particularly since the menu works correctly in Firefox 1.5 & 2.0; IE5.5, 6.0 & 7 and Safari. While the actual menu is totally JavaScript driven, the written code does validate to W3C HTML 4.01 Strict and CSS2 specifications.

    The code may look complex, but there is method to the madness. The way I originally wrote the code was to first write it as a straight DHTML menu system and got it working in Firefox/Opera. I then added in onmouse events so that it would work in MSIE. Once this was completed I converted the entire menu to be written by JavaScript such that it could be housed in a separate file and thus would not need written into the HTML source of every page users load (thus speeding up the loading of pages after a user loads the first page).

    To reduce the total file size of the JavaScript I went through and developed the replacement variables and functions for common strings using one and two character names (thus "</li><li>" became "L"). Once this was completed I wrapped the code in PHP so that PHP could be used to strip out all unnecessary formatting white space (tabs, spaces, new lines, comments, etc.) that exist in the code to make editing and updating the menu easier. PHP is also used to write dynamic sections of the menu that are pulled in via RSS feeds (e.g. my latest blog posts). By using PHP to generate the JavaScript file I was also able to GZIP the file as it was sent to the user, thereby reducing its transmission size even further. In short, PHP writes the JavaScript and the JavaScript writes the HTML and this is all done to reduce file size.

    The end result of all the replacement and rewriting of the menu is that I am able to reduce the transmitted size of the menu from around 75kb down to around 10kb. As a result I'm essentially able to have a very comprehensive site directory at the top of every one of my pages without causing my pages to load slowly. For those users who and search engines that do not support JavaScript, my abridged pure HTML vertical menu is available on each page.

    In regards to the IE7 min-height thingy, you'll just have trust me when I say the rendered menu I use validates to W3C HTML 4.01 Strict and CSS2 specifications (I just checked to make sure) and that adding min-height:1% to the nested unordered lists does not work (as it shouldn't).
     
    KLB, May 31, 2007 IP
  11. icesar

    icesar Peon

    Messages:
    84
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    @ Dan Schultz: Thank you! Thank you! This :hover ghost bug was driving me crazy and making me lose sleep. I'm using something along the lines of Suckerfish, and the min-height:1% hack fixed the ghost problem! You rock.
     
    icesar, Feb 7, 2008 IP
  12. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well, Dan, that sortof answered my question... except I should already be triggering haslayout by having a width for the nested lists.

    This is what's weird-- IE7 is using that Javascript for something, but I'll be damned what for. I made a copy, a direct copy of Suckerfish, and REMOVED the new class from the CSS (sfhover)... so what's the CSS working with now that the Javascript merely changes the name of a class?? Nothing.

    I made HTML and CSS pages I was working from... I remove the JS from HTML, no work in IE7 (I was hoping to use the .htc whatever:hover that's already on the work server for IE6), but put the JS back in but without real class names, and it works. All the class names have been changes to "freaks" and the function name is sfFreak and there's no reference to any of those in the CSS.

    I also changed the head cause I thought at first it had something to do with their site being XHTML1.1 which IE would have problems with if not served as text/html... and changed the html cause originally I had my own menu in there.
     
    Stomme poes, Feb 15, 2008 IP