I think this makes sense. Because the <li>s are floated the <ul>s have 0 height, so they both start at the same location. When you add negative margin to the first <li> it's pulled above the containing <ul>. The second <li> when floated left only sees the beginning of the <ul> and then is pulled up, and thereby overlapping.
I'm sure someone here knows more about box model implementations by browsers and could provide a more technical answer. Kevin On Tue, May 17, 2011 at 12:13 PM, Sara Haradhvala <[email protected]>wrote: > Hi Jim, > > Margins and padding are 0. > > Here is the HTML: > > <div id="menu"> > <ul> > <li> > <a href="#">a1</a> > <a href="#">a2</a> > </li> > </ul> > <ul> > <li> > <a href="#">b1</a> > <a href="#">b2</a> > </li> > </ul> > </div> > > The CSS is: > > * {margin:0; padding:0} > #menu {margin-top:20px} > ul {list-style:none} > ul * {float:left;} > li {margin-top: -20px} > > Thanks, > Sara > > > > > On May 17, 2011, at 2:11 PM, JWN wrote: > > > Morning Sara > > > > You wrote > > > > > >> Hi, > >> > >> I have two unordered lists, where each list has 1 list item with 2 > links. If I float the list items and anchors left, all 4 anchors line up > horizontally as expected. If I add a margin to the list items (but not the > anchors), all anchors move down and are still horizontally lined up as > expected. But if I put a negative margin on the list items instead, the > anchors move up as expected, but the anchors from the 2nd list overlay the > anchors from the first list instead of sitting to the right of them. I'm not > understanding why this is, and hope someone can explain. > >> > >> I'm using firefox 4 on the Mac. > >> > >> Thanks, > >> Sara > > > > > > Just a guess but you might try zeroing out margins and padding on the > body. > > > > body { > > margin:0; > > padding:0; > > } > > > > Can you provide a link to an actual page or at least a test page showing > the problem? It's always easier to help when we can see what is going on > with the rest of CSS / xHTML. > > > > Best > > > > Jim Nannery > > www.oldcurmudgeon.net > > > > ______________________________________________________________________ > 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/ > ______________________________________________________________________ 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/
