Posted by rf on 08/30/07 09:52

"sevillad" <sevillad@gmail.com> wrote in message
news:1188465301.212877.74360@o80g2000hse.googlegroups.com...
> On Aug 29, 12:48 pm, "rf" <r...@invalid.com> wrote:

>> line-height.

> Thanks, it's solved. I would also like to understand why adding border
> or padding didn't work, since it seems to be a common solution.

I assume you mean margin, not border. Margin and padding work differently
for inline elements. Put this:
* {border: solid 1px pink;}
at the very top of your CSS. You will see exactly which real estate each
element is taking up, and you will see that the margin and/or padding
applied to the now inline <li> elements actually escapes outside the <ol>s
real estate. When the <ol> goes to two lines this becomes quite apparent,
and is the source of your original problem.


Have a good read in the specs about the visual layout model.

> On a related note, I don't really know where to add CSS when I have
> elements inside other elements (in my case, I have a UL, and LI's
> inside, and in each one there's an A).

Er, where the CSS rules should take effect, to produce the visual effect you
desire? Um. Hard question.

> And now that I'm at it, should
> I wrap those A's in DIVs or P's for the sake of meaningful code?

No. Why would that make the code more meaningful? There lies the way of div
soup :-) The <a> can quite happily live inside a <li>. No need for more.

--
Richard.

[Back to original message]