bird: Linkbündige Ausrichtung von ul und p nach span mit 'float:left'

Beitrag lesen

SELF-Forum

Linkbündige Ausrichtung von ul und p nach span mit 'float:left'

bird
– Informationen zu den Bewertungsregeln

p und ul untereinander werden korrekt linksbündig angezeigt. Sobald beide aber hinter einem
<span ... style="float:left; ...
erscheinen, sind die Punkte der ul-Aufzählung nicht mehr linksbündig mit dem p-Block (IE 8) - s. Screenshot:

Was muss im Quellcode geändert werden, um dies zu erreichen?

Im folgenden die betroffenen html- und css-Befehle - beispielhaft zusammengebaut in eine selbständige html-Datei.

Anmerkung: Der html-Code wird aus einer Programmierung heraus automatisch generiert, also könnten innerhalb der Programmierung nur ALLE p oder ul geändert werden, da es kein Unterscheidungsmerkmal für ein ul gibt, dass zufällig neben einem Bild "landet". Die width-Angabe wird ebenfalls automatisch an allen Stellen generiert in Abhängigkeit vom im jeweiligen Fall vorliegenden Bild.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
<html>  
<head>  
	<style type="text/css" media="all">  
		span.fliesstext-image-mit-untertitel-float {  
			margin-right: 20px !important;  
			margin-bottom: 10px !important;  
		}  
			img.fliesstext-image-float {  
				margin-bottom: 5px;  
			}  
			span.fliesstext-image-untertitel-float {  
				margin:0px;  
				color: #999;  
				font-size:12px;  
			}  
		#MainContent ul {  
			list-style-image: url(grafiken/ul-li.gif);  
			margin-left:15px;  
		}  
		#MainContent ul li {  
		}  
	</style>  
</head>  
<body>  
		<div id="MainContent">  
		<p>text:</p>  
		<ul><li>text text text text text text text text text text</li><li>text text text text text text text text</li></ul>  
		<p>text.</p>  
		<p><span class="fliesstext-image-mit-untertitel-float" style="float:left;width:150px;"><img src="bild.jpg" alt="bild" title="bild" class="fliesstext-image-float" width="150" height="100" /><br><span class="fliesstext-image-untertitel-float">text text</span><br></span></p>  
		<p>text</p>  
		<ul><li>text text</li><li>text text text text text text text text text text text text</li><li>text</li><li>text</li><li>text</li><li>text</li><li>text</li></ul>  
		<p>text text text text</p>  
		<ul><li>text</li><li>text</li></ul></div>  
</body>  
</html>

Die Hinweise im Forum zum Thema (auf die ich nicht mehr antworten konnte, da archiviert) z.B. http://forum.de.selfhtml.org/archiv/2009/10/t191593/#m1277673 helfen in meinem Fall nicht weiter.

Herzlichen Dank für eine helfende Antwort!

Beitrag melden
–
Informationen zu den Bewertungsregeln