Oops. Forgot reply-all again... ---------- Forwarded message ---------- From: Tom Livingston <[email protected]> Date: Mon, Mar 4, 2013 at 12:28 PM Subject: Re: [css-d] clear content after non-floating items? To: Laura Valentino <[email protected]>
There doesn't appear to be any floats involved in the main menu at that width (it appears to be using inline-block), but you do have a fixed height on nav.mainmenu. That could be it... On Mon, Mar 4, 2013 at 12:15 PM, Laura Valentino <[email protected]> wrote: > 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 [[email protected]] > 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/ > -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com -- Tom Livingston | Senior Interactive Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ css-discuss [[email protected]] 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/
