Hi,

Hopefully someone can help.

I have an asp.net menu with horizontal static top tier followed by 2 dynamic vertical lower tiers.

It renders fine in all other browsers etc. etc. - apart from IE6.

In IE6 the menu is not rendered horizontally and insttead the items are stacked vertically.

It is my understanding that when using horizontal orientation, the menu items are effectively floated next to each other. 

So I can get round this float problem in IE6 by specifying a width for the items i.e.:

*html .AdminMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
	width: 45px;
	text-align: left;
	margin: 0;
	padding: 0;
}

Problem is, I do not want to set the width for each item. If I do this then it means regardless of the length of the text the width will always be the same.

On other browsers I do not set a width but instead set left/right margin so that every item is evenly spaced.

How can I do this in IE6? Essentially each li should wrap the text and float next to eachother.

Many thanks.

Ben

Ben

I just cam across this problem myself.  Did you ever come up with a solution?

Josh

 I'm having this same problem to.  With no widths specified, it looks great in IE7, IE8, Firefox, and Chrome.  IE6 is the only one that isn't working.  If I do as Bend did and set a fixed width for everything, it renders in IE6 but that doesn't really work for me as some of my menu items are 4 characters long ("Home") and some are as many as 20 characters long.

 PLEASE HELP!!  This site has to go live this Friday and the IE6 menu issue is the only thing holding us up!

  Here is my CSS.  Right now I have a IE6 CSS that is included conditionally that sets a fixed width, but again I'd rather not do fixed with if at all possible.

1    /*Position the entire menu (SET A FIXED WIDTH IN IE6MENU.CSS!)*/
2    .mnuMain{position:absolute; top:94px; font:normal normal bold 16px Arial;}
3    /* Tier 1 UL, this is the container for the entire menu - Set width to 0px to make the menu vertical */
4    .mnuMain ul.AspNet-Menu{width:724px; z-index:255;}
5    /* Tier 1 LI - This is each top level item.  Width should be preceding width / # of top level items */
6    .mnuMain li{height:48px !important; text-align:center; z-index:255;}
7    /* Tier 2 UL */
8    .mnuMain ul.AspNet-Menu ul{width:200px; top:100%; left:0; background:#7f1f11; z-index:255; border:solid 1px white; border-top:none;}
9    /* Tier 2+ LI - Make this the same width as the preceding */
10   .mnuMain li li{width:200px; z-index:255; margin:0; color:White; text-align:center; z-index:255; padding:3px 0px;}
11   /* Tier 3+ UL */
12   .mnuMain ul.AspNet-Menu ul ul{width:200px; top:5px; left:200px; z-index:255; border:solid 1px white;}
13   /* BACKGROUND of items being hovered over */
14   .mnuMain li:hover, 
15   .mnuMain li.AspNet-Menu-Hover{background:#c9c099; z-index:255;}
16   /* Tier 1 As and spans */
17   .mnuMain a, 
18   .mnuMain span{color:White; z-index:255; padding:14px 7px;}
19   /* Tier 2+ As and spans (if a different size from tier 1) */
20   .mnuMain li li a, 
21   .mnuMain li li span{color:White; z-index:255; padding:3px 0px;}
22   /* Leaves */
23   .mnuMain li.AspNet-Menu-Leaf a, 
24   .mnuMain li.AspNet-Menu-Leaf span{background-image:none !important; z-index:255;}
25   /* TEXT of items being hovered over */
26   .mnuMain li:hover a, 
27   .mnuMain li:hover span,
28   .mnuMain li.AspNet-Menu-Hover a,
29   .mnuMain li.AspNet-Menu-Hover span,
30   .mnuMain li:hover li:hover a,
31   .mnuMain li:hover li:hover span,
32   .mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
33   .mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,
34   .mnuMain li:hover li:hover li:hover a,
35   .mnuMain li:hover li:hover li:hover span,
36   .mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,
37   .mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li.AspNet-Menu-Hover span
38           {color:#7f1f11;}
39   /* The tier above this one is hovered */
40   .mnuMain li:hover li a, 
41   .mnuMain li:hover li span,
42   .mnuMain li.AspNet-Menu-Hover li a,
43   .mnuMain li.AspNet-Menu-Hover li span,
44   .mnuMain li:hover li:hover li a,
45   .mnuMain li:hover li:hover li span,
46   .mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li a,
47   .mnuMain li.AspNet-Menu-Hover li.AspNet-Menu-Hover li span
48           {color:White;}
49   /* This tier is selected */
50   .mnuMain .AspNet-Menu-Selected{color:#7f1f11; background-color:#c9c099;}
51   /* A tier below this one is selected */
52   .mnuMain .AspNet-Menu-ChildSelected{color:#7f1f11; background-color:#c9c099;}
53   /* A tier above this one is selected */
54   .mnuMain .AspNet-Menu-ParentSelected{color:White;}

Hi,

I am afraid that I have not come up with a solution yet for this and this is the only thing holding me up from a release also.

Will be doing some work on this tonight so will let you know if I find a solution.

Cheers,

Ben

Hi,

I came up with a fix for my problem.

I found that it was only the horizontal menu items with text containing spaces that caused the problem e.g. "First Second".

I don't know why but I changed the text to "FirstSecond" and the li wrapped the text fine.

So I changed my title value in web.sitemap to title="First Second" and my word (with a space) was now wrapped.

The only ie6 specific css that i had to add was:

*html .AdminMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li
{
    width: 1%;
}

and this was for the dynamic vertical menus to display.

Hope this helps some people.

The menu still doesn't look as good in IE6 but then if everything was as good in IE6, people would not be tempted to upgrade :)

Great find Ben!

I've updated my site and can verify that this works.

Thanks
Josh