Kevin - I understand the border now. The text was calculated to be 19.2px by
the browser, so adding a border made it 20.2, and the 2nd list element didn't
slide to the left. Your explanation has helped a lot. Thanks again.
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/
