Blog

Another menu is not displaying in IE6 using css control adapters [Answered]RSS

4 replies

Last post Mar 15, 2009 07:30 AM by red

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
arora
Member

1 Points

26 Posts

Another menu is not displaying in IE6 using css control adapters

Sep 24, 2007 07:29 PM|arora|LINK

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" />

</head>

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

/* menu section for css control adapter menu*/

ul.AspNet-Menu
{
    position: relative;
}

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

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

ul.AspNet-Menu li:hover
{
    position: relative;
    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
{
    position: absolute;
    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%;
}

css adapters ie6 menu
- Reply
Russ Helfand
Member

290 Points

741 Posts

Re: Another menu is not displaying in IE6 using css control adapters

Sep 25, 2007 11:19 AM|Russ Helfand|LINK

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.

Russ Helfand
Groovybits.com
- Reply
arora
Member

1 Points

26 Posts

Re: Another menu is not displaying in IE6 using css control adapters

Sep 25, 2007 06:39 PM|arora|LINK

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

/* menu section for css control adapter menu*/

ul.AspNet-Menu
{
    position: relative;
}

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

ul.AspNet-Menu li
{
    position: relative;
    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
{
    position: relative;
    list-style: none;
    float: left;
    background: url("../../images/btnMenuLargeOver.jpg") no-repeat center;
    height:34px;
    width:200px;
    margin-left:3px;
}
- Reply
rheinig
None

0 Points

5 Posts

Re: Another menu is not displaying in IE6 using css control adapters

Oct 04, 2007 05:22 AM|rheinig|LINK

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.

red

Member

11 Points

53 Posts

Re: Another menu is not displaying in IE6 using css control adapters

Mar 15, 2009 07:30 AM|red|LINK

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

.myMenu ul
{
    background:#fff;
    

}


/* Top tier */
.myMenu .AspNet-Menu-Vertical ul.AspNet-Menu
{
    width: 9em;
}


/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
.myMenu ul.AspNet-Menu ul
{
    width: 10.5em;
    left: 8.9em;
    top: -1em;
    z-index: 400;
    

}


.myMenu ul.AspNet-Menu ul ul
{
    width: 11.5em;
    left: 10.4em;
}


/* The menu adapter generates a list item (li) in HTML for each menu item. */
/* Use this rule create the common appearance of each menu item. */
.myMenu ul.AspNet-Menu li
{
    background:#fff ;
    

    

}


/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
.myMenu ul.AspNet-Menu li a,
.myMenu ul.AspNet-Menu li span
{
    color: black;
    padding: 4px 4px 4px 16px;
    border:0px solid #ccc;
    border-bottom: 0;
/*    width:<span class='val'><span class='unit'>80</span>px</span>;*/
    /*background:<span class='val'> transparent url(arrowRight.gif) right center no-repeat</span>;*/
}
.myMenu ul.AspNet-Menu li li a,
.myMenu ul.AspNet-Menu li li span
{
        border-right:1px solid #ccc;
        border-left:1px solid #ccc;
        border-bottom:1px solid #ccc;
        padding: 1px 4px 1px 16px;
        

}
.myMenu ul.AspNet-Menu li li:first-child
{
        border-top:1px solid #ccc;
}
/* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
.myMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
    background-image: none;
}


/* Not used presently.  This is here if you modify the menu adapter so it renders img tags, too. */
.myMenu ul.AspNet-Menu li a img
{
    border-style: none;
    vertical-align: middle;
}


/* When you hover over a menu item, this rule comes into play. */
/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
/* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
/* See MenuAdapter.js (in the JavaScript folder). */
.myMenu ul.AspNet-Menu li:hover,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
    background:#fff;
}
/*this background is for the submenu*/
.myMenu ul.AspNet-Menu li li:hover,
.myMenu ul.AspNet-Menu li li.AspNet-Menu-Hover
{
    background:#7bb9b4;
}
/*top hover*/
.myMenu ul.AspNet-Menu li:hover a,
.myMenu ul.AspNet-Menu li:hover span,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover span
{
    color: Black;
}
/*submenu hover*/
.myMenu ul.AspNet-Menu li:hover li:hover a,
.myMenu ul.AspNet-Menu li:hover li:hover span,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
.myMenu ul.AspNet-Menu li:hover li:hover ul a:hover,
.myMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover
{
    color: White;
}


.myMenu ul.AspNet-Menu li:hover ul a,
.myMenu ul.AspNet-Menu li:hover ul span,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,
.myMenu ul.AspNet-Menu li:hover li:hover ul a,
.myMenu ul.AspNet-Menu li:hover li:hover ul span,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,
.myMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span
{
    color: Black;
}


/* While you hover over a list item (li) you are also hovering over a link or span because */
/* the link or span covers the interior of the li.  So you can set some hover-related styles */
/* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
.myMenu ul.AspNet-Menu li a:hover,
.myMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color: Black;
    /*background:<span class='val'> transparent url(activeArrowRight.gif) right center no-repeat</span>;*/
}


.myMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
    background-image: none;
}




.myMenu .AspNet-Menu-Horizontal
{
    position:absolute;
    left: 16em;
    top: 30px;
    z-index: 300;
    

}


/* This rule controls the width of the top tier of the horizontal menu. */
/* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */
/* up from left to right. In other words, this width needs to be the width of the individual */
/* top tier menu items multiplied by the number of items. */
.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu
{
    /*width:<span class='val'> <span class='unit'>720</span>px</span>;*/
}


/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
/* Remember that only the topmost tier of the menu is horizontal.  The second and third tiers are vertical. */
/* So, they need a much smaller width than the top tier.  Effectively, the width specified here is simply */
/* the width of a single menu item in the second and their tiers. */
.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul
{
    width: 10.5em;
    left: -5em;
    top: 100%;
}


.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    top: -0.3em;
}


.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul
{
    width: 10.5em;
}


/* Generally, you use this rule to set style properties that pertain to all menu items. */
/* One exception is the width set here.  We will override this width with a more specific rule (below) */
/* That sets the width for all menu items from the second tier downward in the menu. */
.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
     /*width:<span class='val'> <span class='unit'>10</span>em</span>;the width of each menu item*/
    text-align:center;
    

}


/* This rule establishes the width of menu items below the top tier.  This allows the top tier menu items */
/* to be narrower, for example, than the sub-menu items. */
/* This value you set here should be slightly larger than the left margin value in the next rule. See */
/* its comment for more details. */
.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
{
    text-align:right;
    width: 12.5em;
    

}


.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
{
    width: 12.5em;
}


/* Third tier menus have to be positioned differently than second (or top) tier menu items because */
/* they drop to the side, not below, their parent menu item. This is done by setting the last margin */
/* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */
/* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */
.myMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul
{
    margin: -1.4em 0 0 10.35em;
}

RED

‹ Previous Thread|Next Thread ›