On 2008-05-18, shapper <md*****@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).
