My main menu bar is not supposed to wrap (it doesn't on my 2nd gen ipod touch) - but I fear that on some device somewhere, it will wrap. This wouldn't be the end of the world except for the ugly way the wrapped menu item overlaps the following content. (you can see the effect if you size the browser window down far enough for the top menu to wrap - some browsers don't shrink that small though, chrome on windows 7 does).
A puzzling thing is that the submenu also wraps, but the following content politely gets out of the way of the wrapped item...and I don't see the difference between the 2 menus! Does it have something to do with the fact that the main menu is contained inside a "header" div inside the main "container" div, and the sub menu and the rest of the content are just inside the "container"? I'm stumped! Any help greatly appreciated. Google doesn't seem to understand my wording of this problem :) Here's the page: http://kvikna.com/testing/ieeg/features.html Not even sure what code to include here, but here's the html of the navbars: <header> <div id="logo"><a href="index.html"><img src="pics/ieeg_logo.png" alt="iEEG logo" border="0"></a></div> <nav class="mainmenu"> <ul> <li><a href="features.html" class="selected">Features</a></li> <li><a href="*">Demo</a></li> <li><a href="*">Buy</a></li> <li><a href="*">Meet us!</a></li> </ul> </nav> </header> <nav class="submenu"> <ul> <li><a href="features.html" class="selected2">Hosted EEG</a></li> <li><a href="*">Connectivity</a></li> <li><a href="*">EEG Review</a></li> <li><a href="*">Patient DB</a></li> </ul> </nav> And the css. The 2 menu styles are more or less the same where measurements go and both display as inline-block: .mainmenu { background-color: #5a83c6; height: 2em; font-family: amblebold; } .mainmenu ul,.submenu ul { list-style-type: none; line-height: 2em; } .mainmenu li,.submenu li { display: inline-block; height: 2em; } .mainmenu li a,.submenu li a { -webkit-tap-highlight-color: rgba(0,0,0,0); display: inline-block; height: 2em; padding: 0 0.4em; text-align: center; text-decoration: none; } Best Regards, Laura ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
