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 <har...@comcast.net>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 [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/
>
______________________________________________________________________
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/
