Hi, The final result of this line of thought is shown here: http://stephentang.info/floattest/test2.html
Based on feedback here, I think this solves my issues: - Changed the background bullet image into a list-style-image. - Used position: relative and left properties on the ul to shift the bulleted list away form the floated element, if the list extends past the bottom of the floated element, wrapping occurs normally, which is what was desired. Thanks for those that who contributed advice to this. --Stephen On Tue, May 12, 2009 at 11:04 AM, Stephen Tang <clowwizarder...@gmail.com> wrote: > Hi Alan, > Thanks for your input. I may have to some browser hacking. If the > the bullet list item is long, it will wrap (which is what the end user > wants to happen). I think the positioning of the green bullet based > on coordinates 310px, 8px will not work for lists that are underneath > the floated element. This area is managed by a content management > system, so I don't have control over the content. I may try swapping > out the bullet image for a green disc, since the bullet image is > really a green disc. > > Thanks, > Stephen > > On Tue, May 12, 2009 at 10:40 AM, Alan Gresley <a...@css-class.com> wrote: >> Stephen Tang wrote: >>> >>> Hi, >>> I have a div/image that is floated left from the rest of the content. >>> My content consists primarily of <p> tags and lists. The text needs >>> to wrap below the floated dv/image. This part is not difficult. >>> However, I have a list where the bullets have been replaced with >>> images. When I do this, the image bullets are all the way to the left >>> of the page and collides with the floated div/image. >>> >>> When I check this in firebug, I noticed that the <ul> takes up the >>> width of the parent element, so the bullet images are placed on the >>> left side. I wanted the bullets to be immediately next to the list >>> items (if I use the default bullets, the bullets appear next to the >>> list item. Is there any way to get the bullet images next to the list >>> items again? I don't want to jeopardize the text-wrapping either. >>> >>> Here is the URL: >>> http://stephentang.info/floattest/test.html >>> >>> Thank you for your time in reading this. >>> >>> Sincerely, >>> Stephen >> >> >> >> Hello Stephen. This works in Firefox. Change this CSS. >> >> ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 0 8px; } >> >> to >> >> ul li { background:transparent url(bullet_hdr.gif) no-repeat scroll 310px >> 8px; } >> >> >> Image positions for list items vary widely across browserland. You may have >> to hack browsers with this one. >> >> >> -- >> Alan http://css-class.com/ >> >> Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo >> > ______________________________________________________________________ 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/
