Hi!!

This issue I 'm experiencing is probably not a MenuAdapter problem, maybe more a browser problem. But, since it's been happening with my menu control I decided to look here for some ideas:

The scenario is:
I test my application in 3 different platforms: IE 6, Firefox 1.5 and IE 7 RC1.
I have a navigation menu at the top, which is using the CSS MenuAdapter. It is an Horizontal menu with 5 top level items.  
You can look at it at www.vedere-group.com

If you use Firefox, you will see my "intended" menu. This is: each top level item doesn't have a predefined width, so they align themselves according with the text inside. Here is the CSS chunk:

.MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li { padding: 3px 40px 4px 10px; color: inherit; background-color: #BEBEBE;}

If you use IE6 you will see a different alignment (kinda ugly), because I had to set the width of each item, otherwise I'll get a "vertical" menu (this means: the li items are not positioning right to each other, but below). For this, I use a conditional CSS:

And, if you use IE7 RC1, you'll get the proper "firefox" alignment, but the submenus get completely misaligned at the right of the top level item.

If i change the margins to make the sublevel item aligned in IE7 RC1 (like:  .MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul {width: 160px;margin: 18px 0 0 -50px;border: solid 1px #BEBEBE;} ), I screw up in IE6 and Firefox.!!

I can give more details or even try to upload sample pages, but I'm not sure what's the issue here, and if its a browser problem only. If anybody has some idea it would be much appreciated!

 Thanks,

Juan 

Ok, here is a follow-up:

I've been testing - fixing several hours and I think I fixed almost all the issues.
I've found that, in many cases, it was related with the way the different browsers render the box model, and I must say, I didn't recognize it before because I'm more a programmer than a designer, so I'm not very confident with all the browsers CSS hacks stuff.

But, there are only two issues I couldn't solve yet:

1) With IE 7 RC1: If you go to www.vedere-group.com , then mouse over the "Products" tab, and then mouse over one of the two sub items, you will notice a 2 or 3 pixels transparent space appearing below the particular item. This is only in IE7 and I couldn't fix it. At least, any idea on which property could affect it?

2) Still, with IE6, if I don't explicitely set the width attribute for the top - level items ( .MainMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li), I get a vertical menu, i.e: all the top level items are stacked below to each other instead of sequentially be on the right.

So. I think I narrowed the problem a lot, but I still couldn't figure out those two :)...

Any thoughts?

Thanks,

Juan

I hope you don't mind, but I'd like to address the second problem first.  I'm not sure I understand the problem.  You are saying that if you set a width for the top level <li> elements then the menu items are laid out horizontally and everything is OK.  Is there a problem with setting the width like this?  Does it break something else?

Maybe you asking if there is a way to get the <li> tags to line up horizontally without specifying a width for them so their widths correspond to their text (and automatically adjust to be wider or narrower as the text is added to or subtracted from).  That's a reasonable thing to want to do.  The crux is making the <li> use display:inline but there are a few other things that you need to do, too.  Take a look at this earlier posting if you haven't already, http://forums.asp.net/thread/1327524.aspx.

Like I said, let's work out the solution your second issue first.  Then we can start tackling the IE7 problem... which, frankly, I've not yet had a chance to think about... sorry!

Hi Russ, thanks for your time!

Well, of course I don't have any problems addressing one problem at the time!

And, yes, you've understood correctly: What I want to do is to get the li tags to line up horizontally without specifying a width for them so their widths correspond to their text.
If I do set a width I loose the "alignment" effect I'm trying to achieve, so yes, I have a problem with that.

I'm going to take a look at the post you say, I'll hope to find the solution there!

And, as soon as you have the chance to have a look at the IE7 problem, just let me know!

Thanks,

Juan