locked
Another menu is not displaying in IE6 using css control adapters RRS feed

  • Question

  • User-428932303 posted

    Hi:
     

    What am I doing wrong?

    I've copied the CSS, JavaScript, App_Code/Adapter folders to the Asp.net Web Site project.
    I've copied the App_browsers/CSSFirendlyAdapters.browser
    and commented out all other controlAdapters but
          <adapter controlType="System.Web.UI.WebControls.Menu"
                   adapterType="CSSFriendly.MenuAdapter" />

    The page source looks right but the menu displays on IE7, FF2 but not IE6  

    <div class="AspNet-Menu-Horizontal">
        <ul class="AspNet-Menu">
            <li class="AspNet-Menu-Leaf">
                <a href="ar/ar.aspx?token=DCD6E057AE67587CE710EDCE6035CE9D" class="AspNet-Menu-Link">
                    Receivable Control</a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a href="ap/ap.aspx?token=DCD6E057AE67587CE710EDCE6035CE9D" class="AspNet-Menu-Link">
                    Payables Management</a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a href="oe/oe.aspx?token=DCD6E057AE67587CE710EDCE6035CE9D" class="AspNet-Menu-Link">
                    Sales Analysis</a>
            </li>
            <li class="AspNet-Menu-Leaf">
                <a href="Login.aspx" class="AspNet-Menu-Link">
                    Logout</a>
            </li>
        </ul>
    </div>


    This is the master page up to the head section. 

    <%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>

    <!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 id="Head1" runat="server">
        <title>My App</title>
        <link href="App_Themes/Default/Default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../Script/swfobject.js"></script>
        <link runat="server" rel="stylesheet" href="~/CSS/Import.css" type="text/css" id="AdaptersInvariantImportCSS" />
    <!--[if lt IE 7]>
        <link runat="server" rel="stylesheet" href="~/CSS/BrowserSpecific/IEMenu6.css" type="text/css">
    <![endif]-->    
    </head>

    This is the modified Default.css that has the menu section.

    /* menu section for css control adapter menu*/

    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;
        background: url("../../images/btnMenuLarge.jpg") no-repeat center;
        height:34px;
        margin-left:3px;
    }

    ul.AspNet-Menu li:hover
    {
        ;
        list-style: none;
        float: left;
        background: url("../../images/btnMenuLargeOver.jpg") no-repeat center;
        height:34px;
        margin-left:3px;
    }

    ul.AspNet-Menu li a,
    ul.AspNet-Menu li span
    {
        display: block;
        text-decoration: none;
        padding-left:5px;
        padding-right:5px;
        padding-top:5px;
        color:White;
        height:34px;
    }

    ul.AspNet-Menu li a:hover,
    ul.AspNet-Menu li span:hover
    {
        display: block;
        text-decoration: none;
        padding-left:5px;
        padding-right:5px;
        padding-top:5px;
        color:Green;
        height:34px;   
    }

    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%;
    }

     

     

    Monday, September 24, 2007 7:29 PM

Answers

  • User-534056067 posted

    Try setting a specific width for your LI elements. Take a look at linke 188 of the sample style sheet for horizontal menus that comes with the adapter kit, http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fcssadapters%2fapp_themes%2fbasic%2fmenuexample.css&notree=true.

    Since you have a horizontal menu, you generally need to think of your LI elements as stacking (floating) one next to the other (horizontally) within a very wide UL element. So you set the width of the UL to "n times w" where "n" is the number of LI elements (menu items) and "w" is the width that you've set in your CSS rules for LI. So if each menu item is to be 100px and you have 4 of them then your UL should have a width of 400px and the LI elements should (in their CSS) have a width of 100px.

    There are ways of making horizontal menus that use proportional widths. They involve the use of rules that over-ride the inline/block setting for the CSS display property. This has been discussed elsewhere in this forum.

    IE6 is particularly apt to have problems with floated content that isn't given a width. When I build a site, I always use a mental rule that anything I float I give a width to. Maybe that will help here, too.

    Good luck. Post how it turns out.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 25, 2007 11:19 AM

All replies

  • User-534056067 posted

    Try setting a specific width for your LI elements. Take a look at linke 188 of the sample style sheet for horizontal menus that comes with the adapter kit, http://www.asp.net/CSSAdapters/srcviewer.aspx?inspect=%2fcssadapters%2fapp_themes%2fbasic%2fmenuexample.css&notree=true.

    Since you have a horizontal menu, you generally need to think of your LI elements as stacking (floating) one next to the other (horizontally) within a very wide UL element. So you set the width of the UL to "n times w" where "n" is the number of LI elements (menu items) and "w" is the width that you've set in your CSS rules for LI. So if each menu item is to be 100px and you have 4 of them then your UL should have a width of 400px and the LI elements should (in their CSS) have a width of 100px.

    There are ways of making horizontal menus that use proportional widths. They involve the use of rules that over-ride the inline/block setting for the CSS display property. This has been discussed elsewhere in this forum.

    IE6 is particularly apt to have problems with floated content that isn't given a width. When I build a site, I always use a mental rule that anything I float I give a width to. Maybe that will help here, too.

    Good luck. Post how it turns out.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 25, 2007 11:19 AM
  • User-428932303 posted

     That did it! Thanks Russ!  I added the widths and the menus appeared.

     

    /* menu section for css control adapter menu*/

    ul.AspNet-Menu
    {
        ;
    }


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

    ul.AspNet-Menu li
    {
        ;
        list-style: none;
        float: left;
        background: url("../../images/btnMenuLarge.jpg") no-repeat center;
        height:34px;
        width:200px;
        margin-left:3px;
    }

    ul.AspNet-Menu li:hover
    {
        ;
        list-style: none;
        float: left;
        background: url("../../images/btnMenuLargeOver.jpg") no-repeat center;
        height:34px;
        width:200px;
        margin-left:3px;
    }

     

     

    Tuesday, September 25, 2007 6:39 PM
  • User1508127182 posted

    With similar gripes I found a different root cause: Since IE is so crippled, it needs the js to dynamically add and remove the "AspNet-Menu-Hover" CSS class. With proper browsers, the menu works without help from script. In my case, the script simply failed to load, which came to be because I used the source of the current CSSFriendly, which is meant to be used as compiled DLL, directly in App_Code instead. Now this code changed the way client scripts are registered by trying to load it from a webresource first, and the conditional they put in doesn't work as intended (getting a URL for the resource succeeds even when the server will return a 404 for it). With the most recent code, this is centralized in Helpers.RegisterClientScript and easily fixed (actually I don't know how to fix it properly, I just throw out the GetWebResourceUrl call).

     Thus, if stuff works in FF, Opera and IE7 but not in IE6, one might want to check if perchance the scripts fail to be served.

    Thursday, October 4, 2007 5:22 AM
  • User1222855324 posted

    It's been a long time, but I'm having this problem with IE6 displaying vertically, I need this menu with proportional widths as you mentioned. any way how can I make it work with IE6 it's working for me with IE7,FF

    1    .myMenu ul
    2    {
    3        background:#fff;
    4        
    5    }
    6    
    7    /* Top tier */
    8    .myMenu .AspNet-Menu-Vertical ul.AspNet-Menu
    9    {
    10       width: 9em;
    11   }
    12   
    13   /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    14   /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    15   /* the topmost tier's appearance. */
    16   .myMenu ul.AspNet-Menu ul
    17   {
    18       width: 10.5em;
    19       left: 8.9em;
    20       top: -1em;
    21       z-index: 400;
    22       
    23   }
    24   
    25   .myMenu ul.AspNet-Menu ul ul
    26   {
    27       width: 11.5em;
    28       left: 10.4em;
    29   }
    30   
    31   /* The menu adapter generates a list item (li) in HTML for each menu item. */
    32   /* Use this rule create the common appearance of each menu item. */
    33   .myMenu ul.AspNet-Menu li
    34   {
    35       background:#fff ;    
    36       
    37       
    38   }
    39   
    40   /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
    41   /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
    42   /* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
    43   /* The second image comes from this rule (below). */
    44   .myMenu ul.AspNet-Menu li a,
    45   .myMenu ul.AspNet-Menu li span
    46   {
    47       color: black;
    48       padding: 4px 4px 4px 16px;
    49       border:0px solid #ccc;
    50       border-bottom: 0;
    51   /*    width:<span class='val'><span class='unit'>80</span>px</span>;*/
    52       /*background:<span class='val'> transparent url(arrowRight.gif) right center no-repeat</span>;*/
    53   }
    54   .myMenu ul.AspNet-Menu li li a,
    55   .myMenu ul.AspNet-Menu li li span
    56   {
    57           border-right:1px solid #ccc;
    58           border-left:1px solid #ccc;
    59           border-bottom:1px solid #ccc;
    60           padding: 1px 4px 1px 16px;
    61           
    62   }
    63   .myMenu ul.AspNet-Menu li li:first-child 
    64   {
    65           border-top:1px solid #ccc;
    66   }
    67   /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
    68   .myMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
    69   .myMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
    70   {
    71       background-image: none;
    72   }
    73   
    74   /* Not used presently.  This is here if you modify the menu adapter so it renders img tags, too. */
    75   .myMenu ul.AspNet-Menu li a img
    76   {
    77       border-style: none;
    78       vertical-align: middle;
    79   }
    80   
    81   /* When you hover over a menu item, this rule comes into play. */
    82   /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
    83   /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
    84   /* See MenuAdapter.js (in the JavaScript folder). */
    85   .myMenu ul.AspNet-Menu li:hover, 
    86   .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover
    87   {
    88       background:#fff;
    89   }
    90   /*this background is for the submenu*/
    91   .myMenu ul.AspNet-Menu li li:hover, 
    92   .myMenu ul.AspNet-Menu li li.AspNet-Menu-Hover
    93   {
    94       background:#7bb9b4;
    95   }
    96   /*top hover*/
    97   .myMenu ul.AspNet-Menu li:hover a, 
    98   .myMenu ul.AspNet-Menu li:hover span, 
    99   .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
    100  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover span
    101  {
    102      color: Black;
    103  }
    104  /*submenu hover*/
    105  .myMenu ul.AspNet-Menu li:hover li:hover a, 
    106  .myMenu ul.AspNet-Menu li:hover li:hover span, 
    107  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
    108  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
    109  .myMenu ul.AspNet-Menu li:hover li:hover ul a:hover, 
    110  .myMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover, 
    111  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
    112  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
    113  {
    114      color: White;
    115  }
    116  
    117  .myMenu ul.AspNet-Menu li:hover ul a, 
    118  .myMenu ul.AspNet-Menu li:hover ul span, 
    119  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
    120  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
    121  .myMenu ul.AspNet-Menu li:hover li:hover ul a, 
    122  .myMenu ul.AspNet-Menu li:hover li:hover ul span, 
    123  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
    124  .myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
    125  {
    126      color: Black;
    127  }
    128  
    129  /* While you hover over a list item (li) you are also hovering over a link or span because */
    130  /* the link or span covers the interior of the li.  So you can set some hover-related styles */
    131  /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
    132  .myMenu ul.AspNet-Menu li a:hover,
    133  .myMenu ul.AspNet-Menu li span.Asp-Menu-Hover
    134  {
    135      color: Black;
    136      /*background:<span class='val'> transparent url(activeArrowRight.gif) right center no-repeat</span>;*/
    137  }
    138  
    139  .myMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
    140  {
    141      background-image: none;
    142  }
    143  
    144  
    145  .myMenu .AspNet-Menu-Horizontal
    146  {
    147      position:absolute;
    148      left: 16em;
    149      top: 30px;
    150      z-index: 300;
    151      
    152  }
    153  
    154  /* This rule controls the width of the top tier of the horizontal menu. */
    155  /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */
    156  /* up from left to right. In other words, this width needs to be the width of the individual */
    157  /* top tier menu items multiplied by the number of items. */
    158  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
    159  {
    160      /*width:<span class='val'> <span class='unit'>720</span>px</span>;*/
    161  }
    162  
    163  /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
    164  /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
    165  /* the topmost tier's appearance. */
    166  /* Remember that only the topmost tier of the menu is horizontal.  The second and third tiers are vertical. */
    167  /* So, they need a much smaller width than the top tier.  Effectively, the width specified here is simply */
    168  /* the width of a single menu item in the second and their tiers. */
    169  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
    170  {
    171      width: 10.5em;
    172      left: -5em;
    173      top: 100%;
    174  }
    175  
    176  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
    177  {
    178      top: -0.3em;
    179  }
    180  
    181  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
    182  {
    183      width: 10.5em;
    184  }
    185  
    186  /* Generally, you use this rule to set style properties that pertain to all menu items. */
    187  /* One exception is the width set here.  We will override this width with a more specific rule (below) */
    188  /* That sets the width for all menu items from the second tier downward in the menu. */
    189  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
    190  {
    191       /*width:<span class='val'> <span class='unit'>10</span>em</span>;the width of each menu item*/     
    192      text-align:center;
    193      
    194  }
    195  
    196  /* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
    197  /* to be narrower, for example, than the sub-menu items. */
    198  /* This value you set here should be slightly larger than the left margin value in the next rule. See */
    199  /* its comment for more details. */
    200  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
    201  {
    202      text-align:right;
    203      width: 12.5em;
    204      
    205  }
    206  
    207  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
    208  {
    209      width: 12.5em;
    210  }
    211  
    212  /* Third tier menus have to be positioned differently than second (or top) tier menu items because */
    213  /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */
    214  /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */
    215  /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */
    216  .myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
    217  {
    218      margin: -1.4em 0 0 10.35em;
    219  }
    220  
    221  
    
     
    Sunday, March 15, 2009 7:30 AM