On Mar 18, 2009, at 5:15 PM, Göldi wrote: > i have a question regarding behaviour of unordered lists beside a > left-floating image compared to a another element like paragraph. > > here is the code: > > <div class="anyContainer"> > <img src="anyimage.jpg" style="float: left;"/> > <p>This is any text on the right side of the image</p> > <ul> > <li>This is a list entry behaving badly</li> > <li>This is another list entry behaving badly</li> > </ul> > </div> > > this happens: the paragraph's text starts exactly after the image, > same does the list's text, but not the bullets, they are *over* the > image itself (hidden in ie7), and that's not what I want > > 'workarounds': > - "list-style-position: inside" moves the bullets out of the image, > but i do not want inside bullets. > - fiddling with margins: i could set left margin for the ul, but > what's if there is an image with different width or no image at all?
That is a difficult problem for which there are no perfect solutions. Due to the float, the line-box for the paragraphs and the list items are pushed to the side. That is the correct behaviour. But the list markers are not really part of the line-box, and what browsers do is quite a bit of a fudge. IE 8, at least the copy I have open (running on Windows 7 beta) leaves the list markers at the left side (on top of the left floated block). That is, unlike other browsers, it doesn't move the list markers at all. For most browsers (not IE 8 beta), setting a big enough margin-right on the left-floated block will (partially) solve the problem. Something like 1em ~ 1.5em should be good. The list markers will still be 'out of alignment', hanging outside of the left edge of the text blocks (parag and list-items). There has been quite a bit of discussion on the CSS Working group mailing list (www-style) about this issue, without reaching a definite resolution. What IE 8 does is not wrong per the spec, what other browsers do is not really correct, but matches a bit more author expectations. Philippe --- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] 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/
