Hierarchical menus fail in ie but work in firefox / netscape / opera

Discussion in 'Javascript' started by JB, Mar 7, 2006.

  1. JB

    JB Guest

    I have created a heirarchical menu system using div layers and display
    properties. This works perfectly well in firefox and netscape but the
    results in ie are appalling.

    In firefox the menus expand and contract as expected. In ie all menu
    items are always shown. Everything past the first </div> tag is show
    at the full screen width and the only thing that is expended or
    contracted is the white space between the menu items which ie has
    spuriously added anyway. Can some kind soul tell me what I am doing
    wrong.

    Code follows (apologies for the length of the extract)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    body { font-family: Arial, Helvetica, sans-serif; }

    ..menu { vertical-align:top;
    width: 160px;
    padding: 0px;
    margin: 0px;
    list-style:none; }
    ..menu ul { padding: 0px; }
    /* navigation level1 */
    ..level1 { margin: 0px; padding: 0px; list-style: none; font-weight:
    bold; font-size: 11px; line-height: 13px; display: block;}
    ..level1 li { display: block; }
    ..level1 a { color: #FFFFFF; padding: 5px 5px 5px 10px; display: block;
    border-bottom: 1px solid #ffffff; background-color: #999999;
    text-decoration: none;}

    /* navigation level2 */
    ..level2 {margin: 0px; padding: 0px; list-style: none; font-weight:
    normal; font-size: 11px; line-height: 12px;}
    ..level2 li { display: block; }
    ..level2 a { color:#000000; padding: 4px 4px 4px 20px; display: block;
    border-bottom: 1px solid #ffffff; background-color:#FEE5AC; }

    /* navigation level3 */
    ..level3 {margin: 0px; padding: 0px; list-style: none; font-weight:
    normal; font-size: 11px; }
    ..level3 li { display: block; }
    ..level3 a { padding: 4px 4px 4px 25px; display: block; border-bottom:
    1px solid #ffffff; background-color: #FDF2D6; color: #000000; }

    /* menu visibility */
    #men-0-sub {display:none;}
    #men-0-0-sub {display:none;}
    #men-0-1-sub {display:none;}
    #men-1-sub {display:none;}
    </style>
    </head>

    <body>
    <p>This is a menu</p>
    <script language="javascript">
    <!--
    function select(menid) {
    //alert("set selection to " + menid);
    }

    function togglemenu(menid) {
    if (document.getElementById) {
    // this is the way the standards work
    var style2 = document.getElementById(menid).style;
    //style2.visibility = "hidden";
    style2.display = style2.display? "":"block";
    } else if (document.all) {
    // this is the way old msie versions work
    var style2 = document.all[menid].style;
    style2.display = style2.display? "":"block";
    } else if (document.layers) {
    // this is the way nn4 works
    var style2 = document.layers[menid].style;
    style2.display = style2.display? "":"block";
    }
    }
    -->
    </script>

    <div class="menu">
    <ul>
    <li class="level1" id="men-0"><a
    href="javascript:togglemenu('men-0-sub');select('men-0');">menu
    0</a></li>
    <div id="men-0-sub">
    <li class="level2" id="men-0-0"><a
    href="javascript:togglemenu('men-0-0-sub');select('men-0-0');">menu 0
    0</a></li>
    <div id="men-0-0-sub">
    <li class="level3" id="men-0-0-0"><a
    href="javascript:select('men-0-0-0');">menu 0 0 0</a></li>
    <li class="level3" id="men-0-0-1"><a
    href="javascript:select('men-0-0-1');">menu 0 0 1</a></li>
    </div>
    <li class="level2" id="men-0-1"><a
    href="javascript:togglemenu('men-0-1-sub');select('men-0-1');">menu 0
    1</a></li>
    <div id="men-0-1-sub">
    <li class="level3" id="men-0-1-0"><a
    href="javascript:select('men-0-1-0');">menu 0 1 0</a></li>
    <li class="level3" id="men-0-1-1"><a
    href="javascript:select('men-0-1-1');">menu 0 1 1</a></li>
    </div>
    <li class="level2" id="men-0-2"><a
    href="javascript:select('men-0-2');">menu 0 2</a></li>
    <li class="level2" id="men-0-3"><a
    href="javascript:select('men-0-3');">menu 0 3</a></li>
    </div>
    <li class="level1" id="men-1"><a
    href="javascript:togglemenu('men-1-sub');select('men-1');">menu
    1</a></li>
    <div id="men-1-sub">
    <li class="level2" id="men-1-0"><a
    href="javascript:select('men-1-0');">menu 1 0</a></li>
    </div>
    </ul>
    </div>

    </body>
    </html>
     
    JB, Mar 7, 2006
    #1
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. ß Ø ® G
    Replies:
    8
    Views:
    362
    ß Ø ® G
    Oct 6, 2003
  2. Bob
    Replies:
    24
    Views:
    1,562
  3. Jeff
    Replies:
    3
    Views:
    1,136
  4. Thom Little

    Firefox - Mozila - Netscape - Opera Rendering

    Thom Little, Jul 28, 2004, in forum: ASP .Net Web Controls
    Replies:
    11
    Views:
    316
    Dsyfa
    May 13, 2006
  5. Bob
    Replies:
    3
    Views:
    109
    Randy Webb
    Jul 14, 2006
Loading...

Share This Page