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

Thu Apr 6 18:10:25 CEST 2006

hi again...

in my opinion the only chance to have a floating picture on the left and 
beside to that a list is that this list, if its right of the image and 
not after it, is also floated left like this... there is another maybe 
easier way.. if you put a clear after all lists (this looks nice in ie) 
and is also working in an not so nice but standard way in firefox, opera 
and safari:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bullet besides float boxes test</title>
<style type="text/css">
.to-left {float:left;border:2px solid 
darkred;margin-right:10px;padding:2px;display:block;}
.image {width:200px;height:80px;border:1px dotted 
darkgreen;margin-bottom:2px;}
ul {border:1px solid 
blue;margin:0;padding:0;list-style:inside;display:block;float:left;}
ul li {border:1px solid green;margin:2px;}
p {margin:0;padding:0;}
.ul:after {
	content:".";
	height:0;
	visibility:hidden;
	display:block;
	clear:both;
}
</style>

<!--[if IE]>
	<style>
		ul {height:1%;float:none;}
	</style>
<![endif]-->

</head>
<body>
	<div class="to-left">
		<div class="image">200x80px float-left box</div>
		<div class="image">200x80px float-left box</div>
	</div>
	<p>Test paragraph besides the floated-box.</p>
	<div class="ul">
		<ul>
			<li>List besides the floated-box</li>
			<li>List 2</li>
			<li>List 3</li>
			<li>List 4</li>
		</ul>
	</div>
	<p>Test paragraph after the floated box.</p>
	<div class="ul">
	<ul>
		<li>Normal list.</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
	</ul>
	</div>
	<p>Test paragraph after the floated box.</p>
	<div class="ul">
	<ul>
		<li>Normal list.</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
	</ul>
	</div>
</body>

but the cleaner way could be something like this i think:

<style type="text/css">
.image-to-left .to-left {float:left;border:2px solid 
darkred;margin-right:10px;padding:2px;display:block;}
.image-to-left .image {width:200px;height:80px;border:1px dotted 
darkgreen;margin-bottom:2px;}
.image-to-left ul {border:1px solid 
blue;margin:0;padding:0;list-style:inside;float:left;}
.image-to-left ul li {border:1px solid green;margin:2px;padding:0;}
.image-to-left p {margin:0;padding:0;}
.image-to-left .clear{clear:both;font-size:1px;line-height:1px;height:1px;}
</style>
</head>

<body>
<div class="image-to-left">
	<div class="to-left">
		<div class="image">200x80px float-left box</div>
		<div class="image">200x80px float-left box</div>
	</div>
	<p>Test paragraph besides the floated-box.</p>
	<ul>
		<li>List besides the floated-box</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4 </li>
	</ul>
	<div class="clear">&nbsp;</div>
	<p>Test paragraph after the floated box.</p>
	<ul>
		<li>Normal list.</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
	</ul>
	<div class="clear">&nbsp;</div>
	<p>Test paragraph after the floated box.</p>
	<ul>
		<li>Normal list.</li>
		<li>List 2</li>
		<li>List 3</li>
		<li>List 4</li>
	</ul>
</div>

so now there is the problem, that an editor must use a clear element on 
the right place to handle this...

i dont know any other way

but if you want floating lists... than the inside thing isn´t that bad? :-(

I don´t know... but i think there are no other ways... if someone knoows 
more i would be really happy... a floating, boxed list around edges 
would be very nice...

greets

matthias

Ernesto Baschny [cron IT] schrieb:
> Matthias Peltzer schrieb am 06.04.2006 14:18:
> 
>>> The challenge is here:
>>>
>>> http://www.baschny.de/test-bullet.html
> 
>> try it with:
>>
>> UL LI {
>>     border: 1px solid green;
>>     list-style:inside;
>> }
>>
>> this should work...
> 
> http://www.baschny.de/test-bullet-peltzer.html
> 
> Different, but not a nice solution: Wrapping text in lists won't align
> along the text, and the margins/paddings also aren't respected in the
> besides-float variant.
> 
>> but nice is another way... floating lists... hmmm...
> 
> Tell us about it. :)
> 
> Cheers,
> Ernesto