While testing I came across this weird bug/artifact. the contents of the <ol> <li>s (1 2 3) are shown twice: http://www.kacevisual.com/files/float-test/float-test.html
Does anyone understand why? Kevin On Tue, May 17, 2011 at 5:04 PM, Sara Haradhvala <[email protected]> wrote: > Thanks so much for the explanation, Kevin. What you're saying totally > makes sense! And it explains why that negative margin acts differently from > the positive margin (in the latter case, the 2nd li bumps into the margin). > But I'm wondering why putting a1px border on the list elements makes the > anchors align - even with the negative margin. The uls are still zero > height. > > Sara > > > > On May 17, 2011, at 6:58 PM, Kevin A. Cameron wrote: > > 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/
