locked
Menu - I can't center the menu or align the sub menus RRS feed

  • Question

  • User-1149302654 posted

     Please help. I am struggling to design the css friendly asp.net. I can't get the menu to centre align (it's always left aligned despite even trying to wrap it in another tag) and I can't get the css to correctly align the submenus cross browser (IE6, IE7 and FF). Here's is my code.

     ASP.Net

    <asp:SiteMapDataSource runat="server" ID="siteMapDataSource" ShowStartingNode="false" />
    <asp:Menu runat="server" ID="MainMenu" CssSelectorClass="MainMenu" Orientation="Horizontal" DataSourceID="siteMapDataSource" />

    Html Output

    <div class="MainMenu" id="ctl00_MainMenu">
    <div class="AspNet-Menu-Horizontal">
    <ul class="AspNet-Menu">
    <li class="AspNet-Menu-Leaf">
    <a href="/LogOut.aspx" class="AspNet-Menu-Link">
    Log Out</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Accounts/UsoLookup/" class="AspNet-Menu-Link">
    USO Lookup</a>
    </li>
    <li class="AspNet-Menu-WithChildren">
    <a href="/Cbs/" class="AspNet-Menu-Link">
    Course Bookings</a>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Bookings/" class="AspNet-Menu-Link">
    Bookings</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Courses/" class="AspNet-Menu-Link">
    Courses</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Categories/" class="AspNet-Menu-Link">
    Categories</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Evaluations/" class="AspNet-Menu-Link">
    Evaluations</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Reporting/" class="AspNet-Menu-Link">
    Reporting</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/WaitingList/" class="AspNet-Menu-Link">
    Waiting List</a>
    </li>
    </ul>
    </li>
    <li class="AspNet-Menu-WithChildren">
    <a href="/Sow/" class="AspNet-Menu-Link">
    Schemes Of Work</a>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="/Sow/Eyfs/" class="AspNet-Menu-Link">
    Early Years</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Sow/Ks12/" class="AspNet-Menu-Link">
    Key Stages 1 and 2</a>
    </li>
    </ul>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Manuals/" class="AspNet-Menu-Link">
    Manuals</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Tasklog/" class="AspNet-Menu-Link">
    Tasklog</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/WebsiteDirectory/" class="AspNet-Menu-Link">
    Website Directory</a>
    </li>
    </ul>

    </div>
    </div>

    CSS

    A.AspNet-Menu-Link
    {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    A.AspNet-Menu-Link:Hover
    {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    color: white;
    text-decoration: none;
    }
    LI.AspNet-Menu-Leaf, LI.AspNet-Menu-WithChildren
    {
    margin: 3px;
    padding: 3px;
    width: 130px;
    border: 1px solid black;
    background-color: #ffffcc;
    }
    LI.AspNet-Menu-WithChildren UL LI.AspNet-Menu-Leaf
    {
    /* IE6:<span class='val'> left: -<span class='unit'>69</span>px</span>; top:<span class='val'> <span class='unit'>4</span>px</span>; */
    /* FF:<span class='val'> left: -<span class='unit'>4</span>px</span>; top:<span class='val'> <span class='unit'>4</span>px</span>; */

    left: -69px;
    top: 4px;
    margin: 0px;
    padding: 3px;
    width: 130px;
    border: 1px solid black;
    background-color: #ffffcc;
    }
    UL.AspNet-Menu LI:Hover, LI.AspNet-Menu-Hover
    {
    margin: 3px;
    padding: 3px;
    width: 130px;
    border: 1px solid black;
    background-color: #ff8000;
    }
    LI.AspNet-Menu-WithChildren UL LI.AspNet-Menu-Leaf:Hover, LI.AspNet-Menu-WithChildren UL LI.AspNet-Menu-Hover
    {
    width: 130px;
    border: 1px solid black;
    background-color: #ff8000;
    }
      
    Wednesday, August 6, 2008 3:09 AM

Answers

  • User-1149302654 posted

     Hi Brain,

     App_Themes automatically loads all stylesheets to I can't use conditional statements. I've switched off the CSS friendly adapters and am sticking with normal .net. This is now working for me.

     Chris.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 7, 2008 9:06 AM

All replies

  • User-1385398420 posted

    To get your menu to center, you need to specify a width for it, and set the left/right margins to "auto". I use 1100 below as it seems just a bit wider than your menu items (130px) and padding.

    ul.AspNet-Menu  { width: 1100px; margin: 0 auto; }

    Your dropdowns seem to work fine in FF3 (though they are not aligned perfectly under the parent menu item, due to the left: -69px you have in your CSS; this may be by design, though). Menus don't appear at all in IE7 -- primarily because IE doesn't permit :hover on list items. IE7 works around this by using JavaScript, which is embedded by the adapters.

    I created a test page (I'd attach it if I could!) and noticed that IE7 wasn't getting the JS applied due to the following in MenuAdapter.js:

    if (isPreIE7)
    {
    addLoadEvent(SetHover__AspNetMenu);
    }

    Comment the first line "if (isPreIE7)" seems to fix it. I'm not sure if this is a wider issue (I don't use the menu adapters anywhere) -- so I wonder if others are having a similar problem with IE7 menus, but in the test HTML I threw together with your markup it works with the changes I outlined above.

    Wednesday, August 6, 2008 11:17 AM
  • User-1149302654 posted

    Hi Brian,

    Your centering fix works in IE. However, it's still left aligned in FF3.

    With regards to the IE7 menus, they do show on the actual site. As I can't get the actual site uploaded there is some code that will be missing.

    With regards to child menu alignment, I currently have left: -69px; top: 4px; in my css. This is perfect alignment for IE6. However, IE7 needs left: -134px; top: 20px; and FF3 needs left: -4px; top: 4px;. I can't figure out how to hack my css to serve all 3 options without using anything other than the CSS document itself (a restriction of the App_Themes.

    Regards.
    Chris.

    Wednesday, August 6, 2008 1:43 PM
  • User-1385398420 posted

    Hi Brian,

    Your centering fix works in IE. However, it's still left aligned in FF3.

    Hate to say it, but "it works for me." I'm adding the full text HTML page contents at the bottom of this post. It includes all content that would also come directly from the CSS adapters.

    With regards to child menu alignment, I currently have left: -69px; top: 4px; in my css. This is perfect alignment for IE6. However, IE7 needs left: -134px; top: 20px; and FF3 needs left: -4px; top: 4px;. I can't figure out how to hack my css to serve all 3 options without using anything other than the CSS document itself (a restriction of the App_Themes.

    You can use conditional comments to load a separate stylesheet for IE (or only specific versions of IE). See http://www.quirksmode.org/css/condcom.html

    The full test HTML page I was using follows...

     

    <html>
    <head>
    <script>
    function CanHaveClass__CssFriendlyAdapters(element)
    {
    return ((element != null) && (element.className != null));
    }

    function HasAnyClass__CssFriendlyAdapters(element)
    {
    return (CanHaveClass__CssFriendlyAdapters(element) && (element.className.length > 0));
    }

    function HasClass__CssFriendlyAdapters(element, specificClass)
    {
    return (HasAnyClass__CssFriendlyAdapters(element) && (element.className.indexOf(specificClass) > -1));
    }

    function AddClass__CssFriendlyAdapters(element, classToAdd)
    {
    if (HasAnyClass__CssFriendlyAdapters(element))
    {
    if (!HasClass__CssFriendlyAdapters(element, classToAdd))
    {
    element.className = element.className + " " + classToAdd;
    }
    }
    else if (CanHaveClass__CssFriendlyAdapters(element))
    {
    element.className = classToAdd;
    }
    }

    function AddClassUpward__CssFriendlyAdapters(startElement, stopParentClass, classToAdd)
    {
    var elementOrParent = startElement;
    while ((elementOrParent != null) && (!HasClass__CssFriendlyAdapters(elementOrParent, topmostClass)))
    {
    AddClass__CssFriendlyAdapters(elementOrParent, classToAdd);
    elementOrParent = elementOrParent.parentNode;
    }
    }

    function SwapClass__CssFriendlyAdapters(element, oldClass, newClass)
    {
    if (HasAnyClass__CssFriendlyAdapters(element))
    {
    element.className = element.className.replace(new RegExp(oldClass, "gi"), newClass);
    }
    }

    function SwapOrAddClass__CssFriendlyAdapters(element, oldClass, newClass)
    {
    if (HasClass__CssFriendlyAdapters(element, oldClass))
    {
    SwapClass__CssFriendlyAdapters(element, oldClass, newClass);
    }
    else
    {
    AddClass__CssFriendlyAdapters(element, newClass);
    }
    }

    function RemoveClass__CssFriendlyAdapters(element, classToRemove)
    {
    SwapClass__CssFriendlyAdapters(element, classToRemove, "");
    }

    function RemoveClassUpward__CssFriendlyAdapters(startElement, stopParentClass, classToRemove)
    {
    var elementOrParent = startElement;
    while ((elementOrParent != null) && (!HasClass__CssFriendlyAdapters(elementOrParent, topmostClass)))
    {
    RemoveClass__CssFriendlyAdapters(elementOrParent, classToRemove);
    elementOrParent = elementOrParent.parentNode;
    }
    }

    function IsEnterKey()
    {
    var retVal = false;
    var keycode = 0;
    if ((typeof(window.event) != "undefined") && (window.event != null))
    {
    keycode = window.event.keyCode;
    }
    else if ((typeof(e) != "undefined") && (e != null))
    {
    keycode = e.which;
    }
    if (keycode == 13)
    {
    retVal = true;
    }
    return retVal;
    }

    /* Derived from http://simonwillison.net/2004/May/26/addLoadEvent/ */
    function addLoadEvent( func )
    {
    var oldonload = window.onload;

    if ( typeof window.onload != 'function' )
    {
    window.onload = func;
    }
    else
    {
    window.onload = function() {
    if (oldonload) { oldonload(); }
    func();
    }
    }
    }
    var hoverClass = "AspNet-Menu-Hover";
    var topmostClass = "AspNet-Menu";
    var userAgent = navigator.userAgent;
    var versionOffset = userAgent.indexOf("MSIE");
    var isIE = (versionOffset >= 0);
    var isPreIE7 = false;
    var fullVersionIE = "";
    var majorVersionIE = "";
    if (isIE)
    {
    fullVersionIE = parseFloat(userAgent.substring(versionOffset+5, userAgent.length));
    majorVersionIE = parseInt('' + fullVersionIE);
    isPreIE7 = majorVersionIE < 7;
    }

    function Hover__AspNetMenu(element)
    {
    AddClass__CssFriendlyAdapters(element, hoverClass);

    if (isPreIE7)
    {
    var child = element.firstChild;
    while (child)
    {
    if (child.tagName == "UL")
    {
    var grandchild = child.firstChild;
    while (grandchild)
    {
    if (grandchild.tagName == "LI")
    {
    if ((typeof(grandchild.iFrameFormElementMask) != "undefined") && (grandchild.iFrameFormElementMask != null))
    {
    grandchild.iFrameFormElementMask.style.display = "block";

    var w = grandchild.offsetWidth;
    if ((grandchild.offsetWidth == 0) && (typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null) && (element.iFrameFormElementMask.style.width.length > 0))
    {
    w = element.iFrameFormElementMask.style.width;
    }
    grandchild.iFrameFormElementMask.style.width = w;

    var h = grandchild.offsetHeight + 5 /* fudge to cover margins between menu items */;
    if ((grandchild.offsetHeight == 0) && (typeof(element.iFrameFormElementMask) != "undefined") && (element.iFrameFormElementMask != null) && (element.iFrameFormElementMask.style.height.length > 0))
    {
    h = element.iFrameFormElementMask.style.height;
    }
    grandchild.iFrameFormElementMask.style.height = h;
    }
    }

    grandchild = grandchild.nextSibling;
    }
    }

    child = child.nextSibling;
    }
    }
    }

    function Unhover__AspNetMenu(element)
    {
    RemoveClass__CssFriendlyAdapters(element, hoverClass);

    if (isPreIE7)
    {
    var child = element.firstChild;
    while (child)
    {
    if (child.tagName == "UL")
    {
    var grandchild = child.firstChild;
    while (grandchild)
    {
    if (grandchild.tagName == "LI")
    {
    if ((typeof(grandchild.iFrameFormElementMask) != "undefined") && (grandchild.iFrameFormElementMask != null))
    {
    grandchild.iFrameFormElementMask.style.display = "none";
    }
    }

    grandchild = grandchild.nextSibling;
    }
    }

    child = child.nextSibling;
    }
    }
    }

    function SetHover__AspNetMenu()
    {
    var menus = document.getElementsByTagName("ul");
    for (var i=0; i<menus.length; i++)
    {
    if(menus[i].className == topmostClass)
    {
    var items = menus[i].getElementsByTagName("li");
    for (var k=0; k<items.length; k++)="" items[k].onmouseover="function()" hover__aspnetmenu(this);="" items[k].onmouseout="function()" {="" unhover__aspnetmenu(this);="" }=""> if (isPreIE7 && ((typeof(items[k].iFrameFormElementMask) =="undefined") || (items[k].iFrameFormElementMask == null)))
    {
    var iFrameFormElementMask = document.createElement("IFRAME");
    iFrameFormElementMask.scrolling="no";
    iFrameFormElementMask.src ="javascript:false;";
    iFrameFormElementMask.frameBorder = 0;
    iFrameFormElementMask.style.display ="none";
    iFrameFormElementMask.style.position ="absolute";
    iFrameFormElementMask.style.filter ="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)";

    iFrameFormElementMask.style.zIndex = -1;
    items[k].insertBefore(iFrameFormElementMask, items[k].firstChild);
    items[k].iFrameFormElementMask = iFrameFormElementMask;
    }
    }
    }
    }
    }

    //if (isPreIE7)
    //{
    addLoadEvent(SetHover__AspNetMenu);
    //}
    </items.length;>style>
    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This 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%;
    }

    A.AspNet-Menu-Link
    {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    color: black;
    text-decoration: none;
    }
    A.AspNet-Menu-Link:Hover
    {
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    color: white;
    text-decoration: none;
    }
    LI.AspNet-Menu-Leaf, LI.AspNet-Menu-WithChildren
    {
    margin: 3px;
    padding: 3px;
    width: 130px;
    border: 1px solid black;
    background-color: #ffffcc;
    }
    LI.AspNet-Menu-WithChildren UL LI.AspNet-Menu-Leaf
    {
    /* IE6:<span class='val'> left: -<span class='unit'>69</span>px</span>; top:<span class='val'> <span class='unit'>4</span>px</span>; */
    /* FF:<span class='val'> left: -<span class='unit'>4</span>px</span>; top:<span class='val'> <span class='unit'>4</span>px</span>; */
    left: -69px;
    top: 4px;
    margin: 0px;
    padding: 3px;
    width: 130px;
    border: 1px solid black;
    background-color: #ffffcc;
    }
    UL.AspNet-Menu LI:Hover, LI.AspNet-Menu-Hover
    {
    margin: 3px;
    padding: 3px;
    width: 130px;
    border: 1px solid black;
    background-color: #ff8000;
    }
    LI.AspNet-Menu-WithChildren UL LI.AspNet-Menu-Leaf:Hover, LI.AspNet-Menu-WithChildren UL LI.AspNet-Menu-Hover
    {
    width: 130px;
    border: 1px solid black;
    background-color: #ff8000;
    }

    ul.AspNet-Menu { width: 1100px; margin: 0 auto; }
    </style>
    </head>
    <body>
    <div class="MainMenu" id="ctl00_MainMenu">
    <div class="AspNet-Menu-Horizontal">
    <ul class="AspNet-Menu">
    <li class="AspNet-Menu-Leaf">
    <a href="/LogOut.aspx" class="AspNet-Menu-Link">
    Log Out</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Accounts/UsoLookup/" class="AspNet-Menu-Link">
    USO Lookup</a>
    </li>
    <li class="AspNet-Menu-WithChildren">
    <a href="/Cbs/" class="AspNet-Menu-Link">
    Course Bookings</a>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Bookings/" class="AspNet-Menu-Link">
    Bookings</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Courses/" class="AspNet-Menu-Link">
    Courses</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Categories/" class="AspNet-Menu-Link">
    Categories</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Evaluations/" class="AspNet-Menu-Link">
    Evaluations</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/Reporting/" class="AspNet-Menu-Link">
    Reporting</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Cbs/WaitingList/" class="AspNet-Menu-Link">
    Waiting List</a>
    </li>
    </ul>
    </li>
    <li class="AspNet-Menu-WithChildren">
    <a href="/Sow/" class="AspNet-Menu-Link">
    Schemes Of Work</a>
    <ul>
    <li class="AspNet-Menu-Leaf">
    <a href="/Sow/Eyfs/" class="AspNet-Menu-Link">
    Early Years</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Sow/Ks12/" class="AspNet-Menu-Link">
    Key Stages 1 and 2</a>
    </li>
    </ul>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Manuals/" class="AspNet-Menu-Link">
    Manuals</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/Tasklog/" class="AspNet-Menu-Link">
    Tasklog</a>
    </li>
    <li class="AspNet-Menu-Leaf">
    <a href="/WebsiteDirectory/" class="AspNet-Menu-Link">
    Website Directory</a>
    </li>
    </ul>

    </div>
    </div>
    </body>
    </html>
      
    Wednesday, August 6, 2008 2:04 PM
  • User-1149302654 posted

     Hi Brain,

     App_Themes automatically loads all stylesheets to I can't use conditional statements. I've switched off the CSS friendly adapters and am sticking with normal .net. This is now working for me.

     Chris.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 7, 2008 9:06 AM