[TYPO3-content-rendering] CSS problem with floats and bullet lists

[Ernesto Baschny [cron IT]]

JoH schrieb am 06.04.2006 13:41:

>> Maybe some CSS-enthusiast has a solution for this problem. I've found
>> no solution in my quick Google research.
>>
>> The challenge is here:
>>
>> http://www.baschny.de/test-bullet.html
>>
>> Is someone able to style the bullet-list that is rendered to the side
>> of the floated box with correct margins and bullets positioning, and
>> without affecting the appearance of bulleted lists in other
>> circumstances (i.e. no float to the left)?
>>
>> This is related to the bug report
>> http://bugs.typo3.org/view.php?id=66.

> Well - this is not a bug but default behaviour.

Very "strange" behaviour, one must confess.

> As you can see in your example the containers for ul and li are in the right
> place. The red box that got float:left now pushes the content of these containers
> to the right, making it float around it. The bullet of a bullet list is just a
> virtual content, since it doesn't exist in the HTML text.
> So only the text itself is pushed to the right receiving the bullet
> afterwards.

I understood the problem. The margin-left (IE) or padding-left (FF)
applies to the whole UL block, which is then not regarded for every
single LI-line. Same "problem" seems to happen if I add a padding-left
to a P-tag: won't apply as a separator between the paragraph an a
floated element to its left.

> IMHO the only solution: Don't use bullet lists with floated elements.
> Instead of using "in text left" here, you will have to use the "no wrap"
> version instead.

Having the above thoughts in mind, I've got a bit nearer to a solution,
which was: Remove margin/padding from the "UL" itself and add a
margin-left:2em to each LI element. This works nicely in FF, but doesn't
work on IE. See:

http://www.baschny.de/test-bullet-try.html

Another try was to make the UL "display:inline", which seems to have
some affect on IE, but messes all margins. So I will give up here and
continue with more important stuff. :)

> BTW: Don't you think a floated bullet list is one of the ugliest things you
> could do?

A bullet list that wraps around a floated image, you mean? Yes, of
course I think its ugly, but not as ugly as the bullets "invading" a
floated image area.

Cheers,
Ernesto