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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    JS drop down menu not working with IE7

    Thanks for looking, I am a novice.

    Desire: Drop down menu that works with IE7 & 8

    Works with: MSIE6? andversions (that I have checked) of FF, Safari, Safari for iPhone

    Page:
    http://sfphotography.com/menu/test.html

    All files:
    http://sfphotography.com/menu/

    Note, there are no linked pages, IE7 does not even show the option for selecting pages.

    [code=html]
    <script type="text/javascript" src="drop_down.js"></script>
    <style type="text/css">
    @import url(style2.css);
    </style>

    <body text="black" bgcolor="white" link="#a50921" vlink="#767676" background="">


    <div align="center">
    <ul><font size="2">
    <li><a href="#">Rooms</a>
    <ul>
    <li><a href="queen.html">2 Queen / King</a></li>
    <li><a href="family.html">Family Suite</a></li>
    <li><a href="jacuzzi.html">Jacuzzi Suite</a></li>

    </ul>
    </li>
    <li><a href="#">Rates</a>
    <ul>
    <li><a href="queen_.html">2 Queen / King</a></li>
    <li><a href="family_.html">Family Suite</a></li>
    <li><a href="jacuzzi_.html">Jacuzzi Suite</a></li>

    </ul>
    </li>
    </font>
    </ul>
    [/code]

    [code=javascript]
    // JavaScript Document

    startList = function() {
    if (document.all&&document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
    node = navRoot.childNodes[i];
    if (node.nodeName=="LI") {
    node.onmouseover=function() {
    this.className+=" over";
    }
    node.onmouseout=function() {
    this.className=this.className.replace(" over", "");
    }
    }
    }
    }
    }
    window.onload=startList;
    [/code]

    [code=CSS]

    body {
    font: normal 11px verdana;
    }

    ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    }

    ul li {
    position: relative;
    }

    li ul {
    position: absolute;
    left: 149px; /* Set 1px less than menu width */
    top: 0;
    display: none;
    }

    /* Styles for Menu Items */
    ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc;
    border-bottom: 0;
    }

    /* Fix IE. Hide from IE Mac \*/
    * html ul li { float: left; height: 1%; }
    * html ul li a { height: 1%; }
    /* End */

    ul li a:hover { color: #a50921; background: #f9f9f9; } /* Hover Styles */

    li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

    li:hover ul, li.over ul { display: block; } /* The magic */
    [/code]
    Last edited by sfphoto; 12-15-2010 at 01:10 AM.

  • #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
    Works with: MSIE6
    Sure? Doesn't work at my end.

    Anyway, before talking about cross browser compatibility issues, you need to have a valid markup.
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    For this, change your current incomplete DOCTYPE to a valid one. I'd recommend an HTML Strict one.

    After that validate your markup and fix all errors in it, such as removing deprecated tags like <font>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the tips.

    I am on a Mac & no IE, had a friend check with IE6 said fine but he she did not realize there were drop down menus.

    Cleaning up the HTML seems to now make it work (in IE7). There is an error message though: Object required

    Hopefully some one can check and confirm that the drop down items appear ??

    ref: http://sfphotography.com/menu/test.html

    (note- links are dead, am working on getting the drop down to appear like it does in FF)

    Thanks!
    Last edited by sfphoto; 12-15-2010 at 01:14 AM.

  • #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
    Remove
    Code:
    // JavaScript Document
    from your javascript file and add id="nav" to your <ul>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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