views:

169

answers:

1

In FF and IE8 things look pretty good. I have a mock up of the drop down that I'm trying to create with rounded corners at bottom here: www.geowinedb.org/drop-down-test/test.html. In IE6 the mega div is extending to the far left edge of the window. What do I need to change/add (e.g. underscore hacks) to get the drop-down to shrink-wrap its contents (the ul). Thanks.

p.s. I'll be back to ask about the z-index problem that blocks the drop-down (IE6 again), but if anyone want to answer that as well it will be much appreciated.

EDIT 20091107: More specifics on the requirements: It must work in IE6+ and the drop down menus cannot be fixed width. The client wants to be able to change menu item text at will and have the drop-downs size automatically.

EDIT 20091111: I never did find a great solution. The menu along with some other requirements for hover changes, meant that javascript was necessary. So, I found that I could position each main menu item absolute, then position each sub-menu div absolute (this solved the z-index problem), and last I computed the width from the underlying ul and set the outer div width. Then the rounded corners positioned themselves correctly on all the browsers that I needed.

A: 

Does it bother to use fixed width for your UL (and maybe UL.mega-b too) ? because this way you will definitely avoid this problem.

display:block in your UL can also be the cause of this.

Soufiane Hassou
Thanks Soufiane. I can't use fixed width. But, took your advice and re-worked the `display: block`. I noticed to that adding `float: left` to the `mega-b` helps a lot in IE6, but then I lose the rounded corners. I updated the test pages with these changes.
Brett Pontarelli