✔ CSS-Problem IE zeigt gut an, Firefox nicht!

[Sk3l3tor]

Hi,

bitte schaut mal unter: http://www.bbc-dueren.de/Normal/index1.php dann auf Teams, dann Herren 1!

Bitte vergleicht mal IE und Firefox.

Hier mein CSS-Code:

#teams { text-align: center;
 }
.spielklasse { width: 350px;
       font: 10pt arial;
               color: #000000;
               text-align: center;
               font-weight: bold;
               }
.teamfoto { width: 350px;
    text-align: center;
            }
.portrait { width: 352px;
    height: 200px;
    text-align: center;
  }
.bild { width: 144px;
        text-align: center;
        float: left;
      }
.info { width: 170px;
        text-align: left;
        font: 10pt arial;
        color: #000000;
      }
.topbutton { width: 25px;
     text-align: center;
             float: right;
             padding-top: 85px;
           }

und mein html-code der seite:

<div id="teams">
 <div class="spielklasse">
         Bezirksliga
         </div>
         <br>
         <div class="teamfoto">
         <img border="0" src="Bilder/herr1.jpg" width="350" height="263" usemap="#herr1">
         </div>
         <table align="center" width="350">
 <tr valign="top">
  <td width="100"><font face="arial" size="2">von hinten links</font></td>
  <td><font face="arial" size="2">Alexander Förster, Andreas Schwarz, Jochen Frauenkron, Stefan Horst, Daniel Urbanek, Sebastian Küster, Torsten Huthmacher</font></td>
 </tr>
 <tr valign="top">
  <td width="100"><font face="arial" size="2">von vorne links</font></td>
  <td><font face="arial" size="2">Bernd Claßen, Marco Kempen, Davood Sooudie, Thomas Frauenkron</font></td>
 </tr>
 </table>
         <br>
         <div class="portrait">
          <div class="bild">
                 <img src="../Teams/Bilder/portrait/herren1/04_danielurbanek.jpg" alt="" border="0">
                 </div>
                 <div class="info">
                 Name: Urbanek<br>
                 Vorname: Daniel<br><br>
                 Position: SF/PF<br>
                 Größe: 1,90 m<br>
                 Gewicht: 95 kg
                 </div>
                 <div class="topbutton">
                 <a href="#top"><img src="Bilder/toppfeil.gif" alt="" border="0"></a>
                 </div>
         </div>
</div>

Habe abisichtlich nur ein Portrait-Div als code angehangen, sollte aber soweit ja alles erklären oder?

Bitte um Hilfe!

 

[Maik]

Die Verschiebungen im Firefox dürften wohl an der CSS-Eigenschaft float:left für das DIV.bild liegen.

Lösungsvorschlag: erweitere mal das DIV.portrait mit der CSS-Eigenschaft clear:left bzw. display:block.

 

[Sk3l3tor]

Hi,

erstmal danke für die Antwort, aber leider hat beides nichts geändert.

 

[Maik]

Ich bin z.Zt. in der Mittagspause und habe daher nicht die erforderliche Zeit, um den CSS-Code ausgiebig anzupassen bzw. zu testen, aber auf die Schnelle habe ich es mal so gelöst:

.portrait
{
width: 352px;
/*height: 200px;*/
/*text-align: center;*/
}

img.bild
{
width: 144px;
text-align: center;
float: left;
}

.info
{
width: 170px;
text-align: left;
font: 10pt arial;
color: #000000;
float: right;
}

.topbutton
{
width: 25px;
/*text-align: center;*/
float: right;
}

.clear
{
clear:left;
height: 0;
font-size: 0;
margin: 0;
padding: 0;
}

<div class="portrait">
          <img src="../Teams/Bilder/portrait/herren1/04_danielurbanek.jpg" alt="" border="0" class="bild">
                 <div class="info">
                 Name: Urbanek<br>
                 Vorname: Daniel<br><br>
                 Position: SF/PF<br>
                 Größe: 1,90 m<br>
                 Gewicht: 95 kg
                 </div>
                 <div class="clear">&nbsp;</div>
                 <div class="topbutton"><a href="#top"><img src="Bilder/toppfeil.gif" alt="" border="0"></a></div>
         </div>

Nachtrag: ich kann das CSS-Modell heute Nachmittag nochmal intensiver in Augenschein nehmen

 

[Sk3l3tor]

Ja sieht schon besser aus, aber eine Sache ist noch: Jetzt hängt der Pfeil immer eine Zeile zu weit unten!

 

[Maik]

Wie schon in meinem letzten Beitrag erwähnt, werde ich mir das heute Nachmittag nochmal in Ruhe anschauen

 

[Sk3l3tor]

OK

Danke auf jeden Fall schon mal, ich lasse den Thread dann noch offen!!

 

[Maik]

Der Thread bleibt eigentlich immer offen, denn er kann von dir 'nur' als erledigt markiert werden.

Geschlossen wird ein Thread von uns (Mods) oder den Admins.

Aber ich weiss schon, wie du es meinst.

 

[Quaese]

Hi,

das Versetzen des Top-Buttons nach unten erfolgt, da vorher das Clear erfolgte. Du könntest
den Button durch einen negativen margin-Wert nach oben korrigieren.

Ausserdem treten im IE zwischen den Bildern 2-Pixel-breite Abstände auf. Diese könntest du ebenfalls
durch negative margin-Werte schliessen.

.portrait{
  width: 352px;
  /* 2-Pixel-breite Lücke schliessen */
  margin-bottom: 0 !important;
  margin-bottom: -2px;
/*height: 200px;*/
/*text-align: center;*/
}

img.bild{
  width: 144px;
  text-align: center;
  float: left;
}

.info{
  width: 170px;
  text-align: left;
  font: 10pt arial;
  color: #000000;
  float: right;
}

.topbutton{
  width: 25px;
  /*text-align: center;*/
  float: right;
  /* Button nach oben korrigieren */
  margin-top: -20px;
}

.clear{
  clear:left;
  height: 0;
  font-size: 0;
  margin: 0;
  padding: 0;
}

Ciao
Quaese

 

[Sk3l3tor]

Danke, so funktioniert es!