SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE dropdown menu woes

    I'm having an issue that seems to be nothing new.

    Dropdowns become stuck on rollover in IE 6/7, and do not disappear unless the browser is refreshed.

    Site is here:

    PDX Kids Calendar Test Site

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    They seem to stick in Opera and FF as well here.

    Since CSS won't 'stick' like that in opera, I'd say that's a scripted menu? If so then I'd say faulty script, ask over in the javascript section.

    Though that's a bit of a case of "using javascript to do CSS' job"

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I've seen this issue discussed around here before. Here's one link I found. See if this helpeth:

    http://www.sitepoint.com/forums/css-...e7-584947.html

    This may also help:

    http://css-class.com/articles/explorer/sticky/index.htm
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have corrupted the JS in that you are applying the sfhover class to make the hover but not removing the same class.

    Code:
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    
    sfHover = function() {
    
        if (!document.getElementsByTagName) return false;
    
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
    
    
    
        for (var i=0; i<sfEls.length; i++) {
    
            sfEls[i].onmouseover=function() {
    
                this.className+=" sfhover";
    
            }
    
            sfEls[i].onmouseout=function() {
    
                this.className=this.className.replace(new RegExp(" sfhoverb"), "");
    
            }
    
        }
    
    }
    
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    //--><!]]></script>
    You add sfhover but you remove "sfhoverb" whch doesn't exist so the menu stays highlighted.

    It shuld have been " sfhover\\b"

    IE7 doesn't need that routine anyway so give it to IE6 only like this:

    Code:
    <!--[if lt IE 7]>
    <script type="text/javascript">
    
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    
    </script>
    <![endif]-->
    
    Make the script external because the cdata comments will mess up the conditional comments (i.e. call the script from withn the CCs).


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •