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 <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/
