locked
Troubleshooting IE6, submenus not appearing RRS feed

  • Question

  • User-546006562 posted

    I've read the posts about adding height to the <li>, but I haven't been able to get this design to work.  I suspect that I'm missing something right in front of my face.

    ------------------------------------Here's the main css code related to the menus:-----------------------------------

    /* Main Navigation --------------------------------------------------------*/

    div.mainnavcontainer {
        text-align: left;
        border-bottom: 1px solid #5e543b;
        margin: 0;
        padding: 0;
        background: #6b6146 url(../images/menufadedefault.png) left bottom repeat-x;
        height: 2.5em;
        }

    /* Menu items --------------------------------------------*/
    .mainmenu {
      font-size: .77em;
    }

    .mainmenu ul.AspNet-Menu
    {
        /* Tier 1 ------------------------------------*/
        width: 100%;
        float: left;
        margin: 0 0 0 -15px;
        padding: 0 0 0 15px; /* 0 0 12px 15px */
        list-style-type: none;
        z-index: 1;/* so drop-down menu appears over grid */
    }

    .mainmenu ul.AspNet-Menu ul { /* Tier 2 --------------------------------*/
        top: 100%;
        left: 0;
        z-index: 1;  /* so drop-down menu appears over grid */
        }

    .mainmenu ul.AspNet-Menu ul ul { /* Tier 3+ ----------------------------*/
        top: 0;
        left: 12em;
        z-index: 1;  /* so drop-down menu appears over grid */
        }

    .mainmenu li {/* all list items ----------------------------------------*/
            background: #6b6146 url(../images/menufadedefault.png) left bottom repeat-x;
        }

    .mainmenu li ul li:hover, /*submenu list items being hovered over-----*/
    .mainmenu li ul li.AspNet-Menu-Hover {
        background-color: #9a8c67;
        color: white;
        }

    .mainmenu a, /* all anchors and spans (nodes with no link) -----------*/
    .mainmenu span {
        color: white; height: 2.5em;
        padding: 4px 7px 4px 7px;
        line-height: 1.1em;
        text-decoration: none;
        float: left;   
        width: 12em;
        }
       
    .mainmenu ul li ul li a,
    .mainmenu ul li ul li {
        background: #6b6146; 
        }

    .mainmenu li:hover a, /* first menu hovered text --------------------*/
    .mainmenu li:hover span,
    .mainmenu li.AspNet-Menu-Hover a,
    .mainmenu li.AspNet-Menu-Hover span {
        color: white;
        background: url(../images/menufadeselected.png) repeat-x bottom left;
        }

    .mainmenu ul li ul li a,
    .mainmenu ul li ul li span,
    .mainmenu ul li ul li:hover span,
    .mainmenu ul li ul li.AspNet-Menu-Hover a,
    .mainmenu ul li ul li.AspNet-Menu-Hover span {
        color: white;
        background-image:none!important;
        }

    .mainmenu li:hover a:hover {
        color: white;/* first-level menu, linked text */
        }
       
    .mainmenu li:hover li:hover a, /* submenu hovered text-------------- */
    .mainmenu li:hover li:hover span,
    .mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    .mainmenu li:hover li:hover li:hover a,
    .mainmenu li:hover li:hover li:hover span,
    .mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    .mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span {
        background: #9a8c67;
        color: white;
        }

    .mainmenu li:hover li a, /* the tier above this one is hovered -----*/
    .mainmenu li:hover li span,
    .mainmenu li.AspNet-Menu-Hover li a,
    .mainmenu li.AspNet-Menu-Hover li span {
        color: white;
        }

    .mainmenu li:hover li:hover li a, /* third tier colors when the tier above this one is hovered*/
    .mainmenu li:hover li:hover li span,
    .mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
    .mainmenu li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span {
        color: white;
        background: #6b6146;
        }

    /* This section of the style sheet is intended to contain rarely changed rules used when the Menu control adapter is enabled. */
    /* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */
    /* See WhitePaper.aspx for details. */

    ul.AspNet-Menu {
        ;
        }

    ul.AspNet-Menu,
    ul.AspNet-Menu ul {
        margin: 0;
        padding: 0;
        display: block;
        }

    ul.AspNet-Menu li {
        ;
        list-style: none;
        float: left;
        }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span {
        display: block;
        text-decoration: none;
        }

    ul.AspNet-Menu ul
    {
        ;
        visibility: hidden;   
        }

    /* Add more rules here if your menus have more than three (3) tiers --------*/
    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul {
        visibility: hidden;
        }

    /* Add more rules here if your menus have more than three (3) tiers --------*/
    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul {
        visibility: visible;
        }

    .AspNet-Menu-Vertical ul.AspNet-Menu li {
        width: 100%;
        }
     

     ------------------------------------Here's the <IE7 css code:------------------------------------

    ul.AspNet-Menu li, .mainmenu li
    {
        float: left !important;
        height: 2.5em !important;
        width: 12em !important;
    }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        height: 2.5em !important;
    }

    .AspNet-Menu-Horizontal ul.AspNet-Menu li li
    {
        float: left !important;
    }

    /* Undoing rules used for IE7 and other browsers. */

    ul.AspNet-Menu ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible !important;   
    }

    /* Pre-IE7 rules used to avoid performance problems found when using the newer rules. */

    ul.AspNet-Menu ul
    {
        display: none;   
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li:hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul
    {
        display: none;
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul
    {
        display: block;
    }

    .AspNet-Menu-Horizontal ul.AspNet-Menu li li
    {
        float: none;
    }



    /* ---------commented out for test ----------

    ul.AspNet-Menu li {
        width: 12em;
        }


    ul.AspNet-Menu li
    {
        float: left !important;
        height: 2.5em !important;
    }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        height: 2.5em  !important;
    }

    .AspNet-Menu-Horizontal ul.AspNet-Menu li li
    {
        float: left !important;
    }

     Undoing rules used for IE7 and other browsers.

    ul.AspNet-Menu ul
    {
        visibility: visible !important;  
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible !important;   
    }

     Pre-IE7 rules used to avoid performance problems found when using the newer rules.

    ul.AspNet-Menu ul
    {
        display: none;   
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li:hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul ul ul
    {
        display: none;
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li li li.AspNet-Menu-Hover ul
    {
        display: block;
    }

    .AspNet-Menu-Horizontal ul.AspNet-Menu li li
    {
        float: none;
    }
     

     ------------------------------------And the related html:-------------------------------------------
     

    <div class="mainnavcontainer">
       
        <div class="mainmenu" id="ctl00_mnuUser">
        <div class="AspNet-Menu-Horizontal">
                <ul class="AspNet-Menu">
                    <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">
                            Account Home</span>
                        <ul>

                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Summary">Summary</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="News">News</a>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <a href="x.aspx" class="AspNet-Menu-Link" title="Data">Data</a>
                            </li>
                       </ul>
                    </li>
                    <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">Instructions</span>
                        <ul>

                            <li class="AspNet-Menu-Leaf">
                                <a href="x.html" class="AspNet-Menu-Link" title="Disbursements">
                                    Disbursements</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="x.aspx" class="AspNet-Menu-Link" title="Deposits">
                                    Deposits</a>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <a href="x.html" class="AspNet-Menu-Link" title="Transfers">Transfers</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="x.html" class="AspNet-Menu-Link" title="Invoices">Invoices</a>
                            </li>

                            <li class="AspNet-Menu-WithChildren">
                                <span class="AspNet-Menu-NonLink">Securities</span>
                                <ul>
                                    <li class="AspNet-Menu-Leaf">
                                        <a href="x.html" class="AspNet-Menu-Link" title="Deposit">Deposit</a>

                                    </li>
                                    <li class="AspNet-Menu-Leaf">
                                        <a href="x.html" class="AspNet-Menu-Link" title="Withdraw">Withdraw</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Void">Void</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Information</span>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Request Other Service">Request Other Service</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Process Warrants">Warrants</a>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Approve Requests">Approvals</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Maintain Templates">Templates</a>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">View Requests</span>
                            </li>
                        </ul>
                    </li>
                    <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">Financials</span>
                        <ul>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Client Statements</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Invoices</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Other</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Treasury</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">GASB40</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Endowments</span>
                            </li>
                        </ul>
                    </li>
    <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">Maintenance</span>

      <ul>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Maintain Account</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Maintain User</span>

                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Approve Pending Request</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="UserAndActMaintainance/MaintainClients.aspx" class="AspNet-Menu-Link" title="Maintain Client">Maintain Client</a>

                            </li>
                        </ul>
                    </li>
              <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">Client Service</span>
                        <ul>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Calculate Numbers</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Verify Depoits">Verify Deposits</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Process Checks">Process Checks</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Enter Details">Enter Details</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Process Transactions">Process Transactions</a>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <a href="http://forums.asp.net/AddPost.aspx?ForumID=1018#" class="AspNet-Menu-Link" title="Stop/Void Check">Stop &amp; Void</a>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Returns</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Review Receivables</span>
                            </li>

                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Enter Data</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Complete Entry</span>

                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Process Batch</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Security</span>

                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Distributions</span>
                            </li>
                        </ul>
                    </li>
                    <li class="AspNet-Menu-WithChildren">

                        <span class="AspNet-Menu-NonLink">Compliance</span>
                        <ul>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Restricted List</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Transactions</span>
                            </li>
                        </ul>
                    </li>
                    <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">Unclaimed</span>

                        <ul>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">For Sale</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Indicated</span>

                            </li>
                        </ul>
                    </li>
                    <li class="AspNet-Menu-WithChildren">
                        <span class="AspNet-Menu-NonLink">Bonds</span>
                        <ul>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Details</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">
                                <span class="AspNet-Menu-NonLink">Monitor Flows</span>
                            </li>
                            <li class="AspNet-Menu-Leaf">

                                <span class="AspNet-Menu-NonLink">Process</span>
                            </li>
                        </ul>
                    </li>
                </ul>

        </div>
    </div>
    <div class="clear"></div>
    </div>  <!--/mainnavcontainer -->
     

    Thursday, October 25, 2007 11:29 AM

Answers

  • User-546006562 posted

     Well, the resolution was right in front of my face.  The master page wasn't reading the javascript file, which contains instructions for IE related to menu display.
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 31, 2007 11:35 AM

All replies

  • User-2076991548 posted

    Sweet Lord Jesus son of god and cousin of Jay Leno... that's one nasty stylesheet.
    First of all im no expert, but I do work with css for years now.  "hover" does not work on IE except for <a>

     this:

    ul.AspNet-Menu ul
    {
        display: none;   
    }

    is rendering your top level UL invisible and ul.AspNet-Menu ul:hover wont work

    I hope it helps. After all I did test it on IE7 and cutted all properties one by one after reaching that
    Mauro

    Thursday, October 25, 2007 6:33 PM
  • User-546006562 posted

    Thanks for taking a look Mauro.  I am using a separate style sheet for <IE7 that should override the display: none; in the main style sheet.

    The related section is included below.  Not sure why it's not working, though.

    --------- 

     /* Undoing rules used for IE7 and other browsers. */

    ul.AspNet-Menu ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
    {
        visibility: visible !important;   
    }

    ul.AspNet-Menu li:hover ul,
    ul.AspNet-Menu li li:hover ul,
    ul.AspNet-Menu li li li:hover ul,
    ul.AspNet-Menu li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
    ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
    {
        visibility: visible !important;   
    }
     

    Friday, October 26, 2007 9:51 AM
  • User-2076991548 posted

    Thats ok but correct me if im wrong when i say u won;t get hovering effect in IE, but everything visible instead?

    What i mean is besides it overwritten or not, it's not gonna be a "funky" menu. Making that item visible will get u to the plain version (more or less) or the menu, and maybe even with some overlapping between floating items

    Friday, October 26, 2007 12:57 PM
  • User-2076991548 posted

    forget what i said. I did some research and it should work.

    But here it is why it wasnt:
    U must add the doctype!

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    That will make it work... forgetting the damn doctype gave me many headaches too

    Greets,
    Mauro

     

    Friday, October 26, 2007 1:02 PM
  • User-546006562 posted

     Well, the resolution was right in front of my face.  The master page wasn't reading the javascript file, which contains instructions for IE related to menu display.
     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 31, 2007 11:35 AM