W3C home > Mailing lists > Public > www-style@w3.org > December 2009

Re: Insufficient margins/padding for list-items/quotes/etc. next to floats

From: Alan Gresley <alan@css-class.com>
Date: Mon, 28 Dec 2009 03:35:09 +1100
Message-ID: <4B378CBD.2020405@css-class.com>
To: Aryeh Gregor <Simetrical+w3c@gmail.com>
CC: James Hopkins <james@idreamincode.co.uk>, www-style@w3.org
Aryeh Gregor wrote:
> On Sat, Dec 26, 2009 at 7:40 PM, James Hopkins <james@idreamincode.co.uk> wrote:
>> This happens since the marker box is appearing outside of the principal box.
>> You could set the marker box so that it appears as the first inline box
>> within the principal box, by applying 'list-style-position:inside' - or I
>> may not be understanding your issue correctly?
> 
> First of all, that would result in undesired display for multiline
> lists.  Lines after the first would begin under the marker instead of
> to its left.  Second of all, it doesn't do anything at all for other
> situations, e.g. (lines manually wrapped this time to avoid mangling):
> 
> data:text/html,<!doctype html>
> <div style="float:left;padding:1em;margin:0 1em 1em 0;
> border:1px solid black;height:5em">Floated text</div>
> <blockquote>Quote is not indented extra.</blockquote>
> <p>A paragraph.</p>
> <blockquote style="clear:left">Quote is indented extra.</blockquote>
> <p>Another paragraph.</p>
> 
> The problem arises any time that you want two elements containing text
> to have different left margin/padding.

Adding a padding-left:30px to the UL fixes the placement of the marker 
when used with list-style-position:inside on the LI.


<http://css-class.com/test/css/list/list-markers-and-floats.htm>



-- 
Alan http://css-class.com/
Received on Sunday, 27 December 2009 16:36:11 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Tuesday, 22 May 2012 03:47:12 GMT