✔ Kein Umbruch beim IE

[Sprint]

Hallo an alle Auskenner,

der IE treibt mich mal wieder zum Wahnsinn. Wie hier zu sehen ist, packt der IE alle Bilder in eine Reihe, statt sie, die das umgebende div vorgibt, am Ende umzubrechen. Das ganze ist folgendermaßen aufgebaut (stark gekürzt):

<div id="text">
	<h1><span>Fotos</span></h1>
	<form>
		<div id="galerie_bild_fuss" style="width:100%">
			<input type="submit" name="submitButtonName" >
		</div>
		<div id="galerie_bild">
			<div id="galerie_bild_rahmen">
				<a href="galerie/090325-26.jpg" rel="sexylightbox"><img src= ...></a>
			</div>
			<div class="section auswahl">
				<label><input type="checkbox"></label>
			</div>
		</div>
		.
		.
		.
	</form>
</div>

CSS:

#text {
	float: left;
	width: 61% !important;
	width: 64%;
	padding: 5px 0px;
	display: block;
	!important;/** mozilla **/
	padding: 5px 1.2%; background: url(../images/left.jpg) no-repeat right top;
}
#galerie_bild {
	font-size: 0.7em; line-height: 100%; text-align: center; margin: 1px 10px 5px 5px;
	width: 140px; height: 180px; float: left; clear: right; 
	border: dotted 1px #686868; 
}
#galerie_bild_fuss { 
	width: inherit; height: 60px; float: none; clear: none; margin-bottom: 10px; 
}

Um hier nicht seitenlange Listings zu präsentieren, hoffe ich, daß die Ausschnitte reichen. Ich hab es auch schon mal mit einem weiteren umgebenden div um die ganzen Bilder und sogar mit einer Tabelle probiert, hat aber nichts geholfen. Alle Browser machens richtig, der IE nicht.
Kann mir jemand sagen, wo das Problem liegt?

 

[Maik]

Hi,

wenn ich die rotmarkierten Passagen auskommentiere, bricht bei mir der IE (6 + 7) die floatenden Boxen wie gewünscht um:

#text {
	float: left;
	width: 61% !important;
	width: 64%;
	padding: 5px 0px;
	display: block;
	/*!important;*//** mozilla **/
	padding: 5px 1.2%; background: url(../images/left.jpg) no-repeat right top;
}
#galerie_bild {
	font-size: 0.7em; line-height: 100%; text-align: center; margin: 1px 10px 5px 5px;
	width: 140px; height: 180px; float: left; /*clear: right;*/
	border: dotted 1px #686868; 
}
#galerie_bild_fuss { 
	width: inherit; height: 60px; float: none; clear: none; margin-bottom: 10px; 
}

Desweitern muß ein ID-Bezeichner (galerie_bild_fuss, galerie_bild, galerie_bild_rahmen, komm_box) im HTML-Dokumentbaum eindeutig sein, und darf darin nicht mehrmals vergeben werden. Für diesen Fall sind die Klassen vorgesehen.

mfg Maik

 

[Sprint]

Super, das war's. Den Rest werde ich dann auch noch umbauen.
Vielen Dank!