List gets over Div

[shapper]

Hello,

I created a menu using an unordered list and after the list I have a
div with some text:

http://www.27lamps.com/public/Menu.htm

My menu gets over the div. Why?

Thanks,
Miguel

[Ben C]

Re: List gets over Div

On 2008-05-18, shapper <mdmoura@gmail. comwrote:

Hello,
>
I created a menu using an unordered list and after the list I have a
div with some text:

http://www.27lamps.com/public/Menu.htm

>
My menu gets over the div. Why?

It's a similar problem to one you posted earlier. You're putting padding
on inline boxes (the <a>s).

Inline boxes are a little bit strange in that their top and bottom
borders and padding are pure "drawing" effects-- they don't affect the
layout or spacing of the text at all, they just get drawn on top of or
underneath whatever else happens to be in the way.

Line-height determines how far apart lines are and it is unaffected by
top and bottom padding/borders on inline boxes. It only cares about
their font-size, line-height and vertical-align.

You could add padding: 0.8em to the <ul(or a bit more) as well and
that should make room for the <a>s with their padding, but this isn't a
cast-iron guarantee because the specification doesn't define exactly how
inline box height is calculated.

Or make the <li>s left floats instead and put an empty clearing <li>
after them or overflow:hidden on the <ul(won't work in IE).