trecessbo: Problem mit IE. Firefox Anzeige richtig

Habe eine Produktseite erstellt und dort 5 Bilder per divs und relativer positionsangabe angeordnet.

Im div, wo sie drinliegen, habe ich die height angegeben.

im firefox funktionierts einwandfrei und im IE werden unter den Bildern leider dutzende leerzeilen angezeigt.

css datei (ausschnitt):

  
.main_produkte {  
 text-align: left;  
 margin: 0 auto;  
 width: 700px;  
 height: 465px;  
 padding: 0em;  
 border: 1px solid black;  
 background-image:url(img/grawe.jpg); background-repeat:no-repeat; background-position:center center;  
 background-attachment:scroll;  
 }  
.pictures {  
 text-align: center;  
 width: 205px;  
 height: 165px;  
 padding: 0em;  
 border: 1px solid black;  
 }  
.pictures_frame {  
 position:relative; left:10px;  
 text-align: center;  
 margin: 10px;  
 width: 205px;  
 height: 195px;  
 padding: 0em;  
 border: 0px;  
 }  
.pictures_frame_haus {  
 position:relative; top:-205px; left:235px;  
 text-align: center;  
 margin: 10px;  
 width: 205px;  
 height: 195px;  
 padding: 0em;  
 border: 0px;  
 }  
.pictures_frame_recht {  
 position:relative; top:-410px; left:460px;  
 text-align: center;  
 margin: 10px;  
 width: 205px;  
 height: 195px;  
 padding: 0em;  
 border: 0px;  
 }  
.pictures_frame_unfall {  
 position:relative; top:-410px; left:117.5px;  
 text-align: center;  
 margin: 10px;  
 width: 205px;  
 height: 195px;  
 padding: 0em;  
 border: 0px;  
 }  
.pictures_frame_leben {  
 position:relative; top:-615px; left:342.5px;  
 text-align: center;  
 margin: 10px;  
 width: 205px;  
 height: 195px;  
 padding: 0em;  
 border: 0px;  
 }  
.text {  
 font-family: Arial;  
 font-size: 10pt;  
 color: #4b4b4b;  
 margin-left: 10px;  
 margin-right: 10px;  
 margin-top: 0px;  
 margin-bottom: 0px;  
 }  
.aprodukte {  
 text-align: center;  
 font-size: 10pt;  
 color: #4b4b4b;  
 text-decoration:none;  
 }  
.aprodukte:hover {  
 color: #202020;  
 text-decoration:underline;  
 }  
.aprodukte:focus {  
 color: #202020;  
 text-decoration:underline;  
}  
.aprodukte:visited {  
 color: #373737;  
}  

und hier die Datei selbst:

<div class="main_produkte"><br>  
<div class="text"><center>Klicken Sie für den jeweiligen Infofolder einen der nachstehenden Teilbereiche an.</center></div>  
<div class="pictures_frame"><a href="http://****************/pdf/auto.pdf" target="_blank"><img class="pictures" src="img/produkte_auto.jpg" alt="Auto"></a><br><a class="aprodukte" href="http://****************/pdf/auto.pdf" target="_blank">Auto</a></div>  
<div class="pictures_frame_haus"><a href="http://****************/pdf/eigenheim.pdf" target="_blank"><img class="pictures" src="img/produkte_haus.jpg" alt="Haus"></a><br><a class="aprodukte" href="http://****************/pdf/eigenheim.pdf" target="_blank">Eigenheim und Haushalt</a></div>  
<div class="pictures_frame_recht"><a href="http://****************/pdf/rechtsschutz.pdf" target="_blank"><img class="pictures" src="img/produkte_recht.jpg" alt="Rechtsschutz"></a><br><a class="aprodukte" href="http://****************/pdf/rechtsschutz.pdf" target="_blank">Rechtsschutz</a></div>  
<div class="pictures_frame_unfall"><a href="http://****************/pdf/unfall.pdf" target="_blank"><img class="pictures" src="img/produkte_unfall.jpg" alt="Unfall"></a><br><a class="aprodukte" href="http://****************/pdf/unfall.pdf" target="_blank">Unfall</a></div>  
<div class="pictures_frame_leben"><a href="http://****************/pdf/lebensversicherung.pdf" target="_blank"><img class="pictures" src="img/produkte_pension.jpg" alt="Lebensversicherung"></a><br><a class="aprodukte" href="http://****************/pdf/lebensversicherung.pdf" target="_blank">Lebensversicherung und Pensionsvorsorge</a></div>  
</div>

bin für jede Hilfe dankbar :)

  1. Hallo,

    überprüfe einmal deine height-Angaben in deinen classen. In main-prdukte hast du 465px und in deinen Bilderrahmen 165px angegeben. Dazu hast du in deinen div's noch eine Reihe von <br> eingefügt, was ich auch nicht nachvollziehen kann. Dein Stil ist recht kaotisch. Da kann es schon sein, dass der FF dies anderst interpretiert, als der IE. Hatte da auch schon Probleme. Erstelle deinen Code sauber und ordentlich, dann kommst du zum Erfolg.

    Gruß 3DFix

    1. Hallo.

      Danke für die Antwort aber die "br" sind dazu, dass die links jeweils unterhalb des Bildes sind und nicht daneben.

      Ohne den "br" wird es im Firefox korrekt angezeigt aber im IE nicht, der stellt die Links unterhalb der Bilder nur mit den "br" dar.

      Die Höhe der "main" ergibt sich aus 2 Reihen Bildern (2*165) + Text = 465. Sollte also passen. Mach ich die angabe mit der height im Main nicht, dann hab ich das selbe Problem im firefox, wie im IE.

      1. Danke für die Antwort aber die "br" sind dazu, dass die links jeweils unterhalb des Bildes sind und nicht daneben.

        dafür wäre float/clear oder display: block die bessere wahl - in 90% der falle, wo br eingesetzt wird, ist es fehl am platz