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,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    •