[css-d] ul, p after image floating left
Hi all 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;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis 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? i wonder why these lists are rendered as they are, because i can not imagine a case for which this behaviour is useful. any help/good workarounds/comments appreciated! thanks -peter __ 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/
Re: [css-d] ul, p after image floating left
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;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis 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/
Re: [css-d] ul, p after image floating left
hi peter, in addition to Philippes explanation: div img src=anyimage.jpg width=250 height=100 style=float: left; margin-right:2em; / pThis is any text on the right side of the image/p ul style=overflow:hidden; padding-left: 1em; liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div seems to work everywhere (i.e. XP, IE6, 7, Win7, Mac etc) tina Von: Göldi peter.goe...@gmail.com Datum: Wed, 18 Mar 2009 09:15:01 +0100 An: CSS-Discuss css-d@lists.css-discuss.org Betreff: [css-d] ul, p after image floating left Hi all 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;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis 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? i wonder why these lists are rendered as they are, because i can not imagine a case for which this behaviour is useful. any help/good workarounds/comments appreciated! thanks -peter __ 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/ __ 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/
Re: [css-d] ul, p after image floating left
On Mar 18, 2009, at 6:48 PM, Göldi wrote: thanks for your hints. seems to be a problem with no reasonable solution. why are the list markers not part of the box? shouldn't that be changed? i like your approach, tina, problem is if the height of the list is bigger than the image's, the list items below the image are not shifting to the left edge of the surrounding container. There are two options, none of them are perfect: 1. as suggested by Tina, using overflow:hidden (or any trigger for a block formatting context). the list will not wrap under the image 2. omit the overflow:hidden. The list flows under the image. The list- marker, when next to the image, hangs outside of the left edge of the text blocks. http://dev.l-c-n.com/_temp/list-marker-float.html Screenshots: IE 8, win 7 http://dev.l-c-n.com/_b/list-marker-IE8.png Fx3.1b3+ (and other browsers) http://dev.l-c-n.com/_b/list-marker-FX3.1b.png 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/
Re: [css-d] ul, p after image floating left
thanks for your hints. seems to be a problem with no reasonable solution. why are the list markers not part of the box? shouldn't that be changed? i like your approach, tina, problem is if the height of the list is bigger than the image's, the list items below the image are not shifting to the left edge of the surrounding container. cheers -peter 2009/3/18 Bettina li...@newhouse.at: hi peter, in addition to Philippes explanation: div img src=anyimage.jpg width=250 height=100 style=float: left; margin-right:2em; / pThis is any text on the right side of the image/p ul style=overflow:hidden; padding-left: 1em; liThis is a list entry behaving badly/li liThis is another list entry behaving badly/li /ul /div seems to work everywhere (i.e. XP, IE6, 7, Win7, Mac etc) tina Von: Göldi peter.goe...@gmail.com Datum: Wed, 18 Mar 2009 09:15:01 +0100 An: CSS-Discuss css-d@lists.css-discuss.org Betreff: [css-d] ul, p after image floating left Hi all 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;/ pThis is any text on the right side of the image/p ul liThis is a list entry behaving badly/li liThis 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? i wonder why these lists are rendered as they are, because i can not imagine a case for which this behaviour is useful. any help/good workarounds/comments appreciated! thanks -peter __ 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/ __ 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/ __ 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/
