✔ float Bildergalerie Background Problem in IE

[renard]

Hallo!

Ich habe mir aus einem Tutorial eine gefloatete Bildergalerie übernommen. Irgendwo hab ich gelesen, dass ich die am besten noch in ein div reinpacke, das ich ebenfalls floate, damit es in allen Browsern richtig angezeigt wird. Problem hier: Der Hintergrund #content ist im IE unterbrochen, die gefloateten Bilder stehen quasi im "Leeren". In allen anderen Browsern wird die Galerie richtig angezeigt. Ich hab schon viel herumprobiert, wess aber nicht, woran es liegt. Zum Haare Ausreissen

Hier mein Code:
<div id="content">
<p>Bitte klicken Sie zur Verg&ouml;&szlig;erung auf die Bilder.</p>

<div style="float: left;">

<div class="thumbnail">
<a href="bilder/normal/bild1_quad.jpg" rel="lightbox"><img src="bilder/thumbnails/bild1.jpg" width="80" height="80" alt="Rein spielt im Kilt Dudelsack" border="0"/></a><br/>
<!--<span class="th_hervorhebung">Rein mit Dudelsack</span>-->
</div>
<div class="thumbnail">
<a href="bilder/normal/bild2_quad.jpg" rel="lightbox"><img src="bilder/thumbnails/bild2.jpg" width="80" height="80" alt="Rein in Grossaufnahme beim Dudelsackspielen" border="0"/></a><br/>
<!--<span class="th_hervorhebung">Rein Detail</span>-->
</div>
<div class="thumbnail">
<a href="bilder/normal/bild3_quad.jpg" rel="lightbox"><img src="bilder/thumbnails/bild3.jpg" width="80" height="80" alt="Vogelperspektive Rein mit Dudelsack" border="0"/></a><br/>
<!--<span class="th_hervorhebung">Vogel-<br/>perspektive</span>-->
</div>
<div class="thumbnail">
<a href="bilder/normal/bild8_quad.jpg" rel="lightbox"><img src="bilder/thumbnails/bild8.jpg" width="80" height="80" alt="Rein h&auml;lt Dudelsack" border="0"/></a><br/>
</div>
<br class="clearboth" />

</div><!-- Ende gefloateter wrapper der Images-->

</div> <!--Ende content-->

Hier das style-sheet

#content {
min-height:500px;
padding: 15px 30px 5px 30px;
margin: 0;
background-color: #f3f1e9;
color: black;
border-left: 2px solid #ebeded;
border-right: 2px solid #ebeded;
border-bottom: 1px solid #cccccc;
}


.thumbnail
{
float: left;
border: 1px solid white;
margin: 0 10px 15px 15px;
padding: 8px 5px 5px 8px;
width: 82px;
height: 110px;
background-image: url(bg4.jpg);
background-repeat:repeat-x;

}

.clearboth { clear: both; }

 

[Maik]

Hi,

die älteren IE-Versionen bis einschliesslich IE6 unterstützen die min-height-Eigenschaft nicht.

Lösung:

#content {
min-height:500px; /* Mindesthöhe in modernen Browsern */
height:auto !important; /* !important-Regel für moderne Browser */
height:500px; /* Mindesthöhe in IE <7 */
padding: 15px 30px 5px 30px;
margin: 0;
background-color: #f3f1e9;
color: black;
border-left: 2px solid #ebeded;
border-right: 2px solid #ebeded;
border-bottom: 1px solid #cccccc;
}

 

[renard]

Danke für Deine Hilfe! Das hat das Problem gelöst. Jetzt muss ich die floats im IE noch irgendwie unter Kontrolle bringen.

 

[Maik]

Vermutlich sprichst du vom "Double-Margin-Bug", der im IE beim linken Außenabstand der ersten Thumbnail-Box auftritt.

Lösung:

.thumbnail
{
float: left;
display:inline;
border: 1px solid white;
margin: 0 10px 15px 15px;
padding: 8px 5px 5px 8px;
width: 82px;
height: 110px;
background-image: url(bg4.jpg);
background-repeat:repeat-x;
}

 

[renard]

Waw, ich staune! - Das sind beides Dinge, bei denen ich nie vermutet hätte, das es DARAN liegt... Danke; so werde ich beim nächsten Mal, wenn was nicht klappt, alle Angaben durchleuchten.