On Oct 5, 2008, at 10:08 AM, Ian M. Evans wrote:
> I have a problem where the first few list items in an ordered list
> have
> their numbers overlapping a left floated div, i.e. the list item
> numbers
> appear inside the border of the left-floated box.
>
> Here's the html:
>
> <h1>Quid pro quo</h1>
>
> <div id="sponsor">Message from sponsor</div>
>
> <p>Introductory paragraph. Yada yada yada</p>
>
> <ol>
> <li>List Item 1</li>
> <li>List Item 2</li>
> <li>List Item 3</li>
> <li>List Item 4</li>
> </ol>
That is always a complex situation. Depeending on what the overal look
of the page needs to be you can:
1. set a wide enough left margin on the ol, wider than the width of
the floated block, and use padding-left to create the space for the
list marker. In your example, this would do:
ol {margin-left: 240px; padding-left:1.5em;}
or
2. set ol {list-style-position: inside}.
Both have advantages and weaknesses.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
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/
