CSS Friendly Control Adapters

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

red — Sun, 15 Mar 2009 11:30:45 GMT

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

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

rheinig — Thu, 04 Oct 2007 09:22:54 GMT

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.

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

arora — Tue, 25 Sep 2007 22:39:10 GMT

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

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

Russ Helfand — Tue, 25 Sep 2007 15:19:25 GMT

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.

Another menu is not displaying in IE6 using css control adapters

arora — Mon, 24 Sep 2007 23:29:25 GMT

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