Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts

    Post Drop down nav menu not working in ie6

    Hello,

    I am struggling to get the following working.

    I have a CSS drop down nav menu which does not work in ie6, even though I followed the instructions from:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Here is the 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);


    I've placed the javascript in the body of my index page.

    Here is the xhtml (and some php for the current state effect):

    <div id="navigation">
    <ul id="nav">
    <li<?php if ($thisPage=="Home")
    echo " id=\"currentpage\""; ?>>
    <a href="/index.php">Home</a></li>
    <li<?php if ($thisPage=="About")
    echo " id=\"currentpage\""; ?>>
    <a href="/about.php">About</a></li>
    <li<?php if ($thisPage=="Services")
    echo " id=\"currentpage\""; ?>>
    <a href="/services.php">Services</a>
    <ul id="subnav">
    <li id="subnav_bg"><a href="repairs.php">Repairs</a></li>
    <li id="subnav_bg"><a href="upgrades.php">Upgrades</a></li>
    <li id="subnav_bg"><a href="wi-fi.php">Wi-Fi Setup</a></li>
    <li id="subnav_bg"><a href="protection.php">Protection</a></li>
    <li id="subnav_bg"><a href="datasolutions.php">Data solutions</a></li>
    <li id="subnav_bg"><a href="remotefixes.php">Remote fixes</a></li>
    </ul>
    </li>
    <li<?php if ($thisPage=="Contact")
    echo " id=\"currentpage\""; ?>>
    <a href="/contact.php">Contact</a></li>
    </ul>
    </div>

    And finally the css:

    #sitenav {
    background:url(images/nav_bg.gif) no-repeat scroll left top;
    float: left;
    width: 740px;
    height: 25px;
    padding: 0 0 0 0;
    }


    #navigation #currentpage a {
    background: #fff;
    color: #333;
    }

    #nav li:hover ul, #nav li:sfhover ul {
    left: auto;
    }


    li {
    list-style-type: none;
    }

    a {
    text-decoration: none;
    color: #000;
    }

    a:hover {
    color: #fff;
    }

    a:active {
    outline: none;
    }

    a:focus
    {
    -moz-outline-style: none;
    }


    /* Navigation Menu */

    #nav {
    height: 2em;
    margin: 0;
    padding-left: 1.5em;
    font-weight: bold;
    }


    #nav li {
    position: relative;
    float: left;
    width: 6em;
    height: 25px;
    line-height: 25px;
    background-color: #717171;
    }

    #nav li#home {
    width: 44px;
    line-height: 25px;
    margin: 0;
    padding: 0;
    }

    #nav li#services {
    width: 60px;
    line-height: 25px;
    margin: 0;
    padding: 0;
    }

    #nav li:hover {
    background-color: #6FBD44;
    }

    #nav li a {
    display:block;
    float: left;
    width: 100%;
    text-align: center;
    }


    /* 2nd tier */


    #subnav li a: {
    display:block;
    float: left;
    width: 100%;
    text-align: left;
    }



    #nav li ul {
    position: absolute;
    width: 5em;
    left: -999em;
    }


    #nav li:hover ul {
    left: auto;
    margin: 0;
    padding: 0;
    position: relative;
    }


    #nav li:hover ul li {
    width: 110px;

    height: 2em;
    border: none;
    border-bottom: 1px solid #ccc;
    overflow: hidden;
    }

    #nav li:hover ul li a {
    display: block;
    margin: 0;
    padding: 0 0 0 .3em;
    height: 100%;
    line-height: 2em
    }

    #nav li:hover ul li a:hover {
    background-color: #ccc;
    }

    ul#subnav li#subnav_bg a {
    background-color: #EFEFEF;
    text-align: left;
    text-indent: 8px;
    }

    ul#subnav li#subnav_bg a:hover {
    background-color: #ccc;
    }

    My website (work in progress) is: www.glentechsolutions.co.uk

    Any help would be most appreciated.

    Many Thanks

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have you changed your CSS to work with that javascript snippet? Try by changing it like
    Code:
    #nav li:hover ul, #nav li.sfhover ul {
    left:auto;
    margin:0pt;
    padding:0pt;
    position:relative;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    snarf1974 (08-26-2008)

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Thanks very much for your suggestion.

    Sorry I plastered all the code, I'm new here, obviously won't be doing that next time.

    I inserted '#nav li.sfhover ul' as you said:

    Code:
    #nav li:hover ul, #nav li.sfhover ul {
    left:auto;
    margin:0pt;
    padding:0pt;
    position:relative;
    }
    Everything is working well in ie6 now, apart from the drop down under 'Services'. When I hover over 'Services' the drop down menu does not appear. Where else should I insert '#nav li.sfhover ul' ?

    Many Thanks

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have you updated it in to the website? (I couldn't see it)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Yes, I've updated main.css

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Fix the errors in your CSS, see http://jigsaw.w3.org/css-validator/v...ning=1&lang=en
    BTW
    #nav li:hover ul, #nav li:sfhover ul {
    left: auto;
    }
    should be
    Code:
    #nav li:hover ul, #nav li.sfhover ul {
    left: auto;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Ohhhhh, nearly there.

    I've fixed all the errors, bar this one:

    Code:
    Property -moz-outline-style doesn't exist :  none
    I'm not sure if there is another way to hide the dotted border when you click on a link in firefox.

    The only problem aside from that is the drop down menu in ie6 pushes the divs underneath down, and doesn't go over the div. Also the border-bottom color isn't showing.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    outline:none; ? (but this may cause some accessibility issues)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Aug 2008
    Location
    Liverpool
    Posts
    53
    Thanks
    37
    Thanked 0 Times in 0 Posts
    Think I'll stick with Property -moz-outline-style.

    Thanks for all your help btw.

    Just one more thing, how do I stop the drop down forcing everything else down in ie6?


  •  

    Posting Permissions

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