Bug im FF

[HollyHollmann]

Hallöle!

Ich folgendes Problem:

Folgender Code soll dargestellt werden:

<div class="friend">
   <h2>Higgens</h2>
   <div class="friend_left">
    <ul>
     <li><a href="#" target="_self" title="Higgens eine Nachricht schreiben">Nachricht schreiben</a></li>
     <li><a href="#" target="_self" title="Higgens's Galerien">Galerien</a></li>
     <li><a href="#" target="_self" title="Higgens's Blog">Blog</a></li>
    </ul>
   </div>
   <div class="friend_middle">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <colgroup>
     <col width="60">
     <col width="130">
    </colgroup>
     <tr>
      <td>Hotel:</td>
      <td>Mama</td>
     </tr>
     <tr>
      <td>Position:</td>
      <td>leitender Agestellter</td>
     </tr>
     <tr>
      <td>Status:</td>
      <td>offline</td>
     </tr>
    </table>
   </div>
   <div class="friend_right">
   <a href="profil.php?i=cd8ebd803c48736dd597dffebe00738d" target="_self" title="Higgens's Profil">
    <img src="./src/user_profil_pics/cd8ebd803c48736dd597dffebe00738d.jpg" alt="Higgens's Profil" width="100" title="Higgens" border="0" />
   </a>
   </div>
   </div>
  
   <div class="friend">
   <h2>Holly</h2>
   <div class="friend_left">
    <ul>
     <li><a href="#" target="_self" title="Holly eine Nachricht schreiben">Nachricht schreiben</a></li>
     <li><a href="#" target="_self" title="Holly's Galerien">Galerien</a></li>
     <li><a href="#" target="_self" title="Holly's Blog">Blog</a></li>
    </ul>
   </div>
   <div class="friend_middle">
    <table border="0" cellspacing="0" cellpadding="0" width="100%">
    <colgroup>
     <col width="60">
     <col width="130">
    </colgroup>
     <tr>
      <td>Hotel:</td>
      <td>Empire Riverside Hotel</td>
     </tr>
     <tr>
      <td>Position:</td>
      <td>Night Auditor</td>
     </tr>
     <tr>
      <td>Status:</td>
      <td>offline</td>
     </tr>
    </table>
   </div>
   <div class="friend_right">
   <a href="profil.php?i=3990e0a83351e9be86f4b906431ff5ecad1f9d50" target="_self" title="Holly's Profil">
    <img src="./src/user_profil_pics/3990e0a83351e9be86f4b906431ff5ecad1f9d50.jpg" alt="Holly's Profil" width="100" title="Holly" border="0" />
   </a>
   </div>
   </div>

Die css dazu sieht wie folgt aus:

.friend {
width:500px;
margin:auto;
margin-top:10px;
border:#000000 solid 1px;
}
.friend_left {
width:150px;
float:left;
padding-left:10px;
}
.friend_middle {
float:left;
width:190px;
padding:5px 20px 5px 20px;
}
.friend_right {
width:100px;
float:left;
padding-right:10px;
padding-top:5px;
}
.friend_left ul {
list-style:none;
width:150px;
margin-top:5px;
}
.friend_left a {
display:block;
width:100%;
height:20px;
line-height:20px;
background-color:#ffaa00;
color:#FFFFFF;
border-bottom:#fefda5 solid 1px;
text-indent:5px;
}

Im Ie siehts dann so aus:


Und im FF so:


Seht ihr das Problem?! Ich kanns mir eifnach nicht erklären?!

Danke schonmal!

 

[Cheffchen]

vielleicht padding

Hallo,

css ist zwar nicht meine stärke aber meine erfahrung ist, das PADDING nicht zu nutzen da nur der IE das so macht wie gewünscht.
Versuche nur MARGIN zu nutzen da umgehst das Problem am einfachsten.

Cheffchen

 

[neuroleptika]

  .friend {
width:500px;
margin:auto;
margin-top:10px;
border:#000000 solid 1px;
}

Durch width: 500px; erhält das Element für den IE5-7 Layout.
Layout führt im IE zum einschließen der Floats (clear).

Nur Internetexplorer bis Vers.7 kennen die Eigenschaft "Layout". (suche nach has layout IE). Im IE8 wurde das Layout-Modell, aus Rücksicht auf Webstandards, aufgegeben.

Ohne das einschließen / clearen, spannt sich das Elternelement nicht durch die gefloateten Elemente auf (.friend wächst nicht mit dem Inhalt).

cleare .friend:

.friend:after {
display: block;
content: ".";
clear: left;
height: 0;
visibility : hidden;
}

Ansonsten poste mal einen Link auf die Seite.

 

[HollyHollmann]

Danke erstmal für die Antworten.

Aber so wie ich das jetzt verstanden hat ging es nur um den IE..der stellt es ja aber so dar wie ich das haben möchte (siehe Bilder)

Der FF stellts falsch da!
Oder hab ich einien grundlegenden css-fehler drin?!

 

[neuroleptika]

Nein oder ja. Je nach Sichtweise. Der ff macht das schon richtig.

Der IE cleart fäschlicherweise. Du willst es aber auch in anderen Browsern so angezeigt bekommen.
Dazu diente der Code (.friend:after {..})
IEs 5-7 können damit nichts anfangen (die brauchen das in deinem Fall aber auch nicht).
Andere Browser clearen damit die Floats. Wenn das nicht funktioniert setze einen Link hier ins Forum. Dann können wir uns das live ansehen.

Google mal nach "floats einschließen css" oder nach "float clear css".

 

[HollyHollmann]

Ah ja alles klar...

Jetzt hab ichs verstanden! und gelöst

Vielen DAnk für die Hilfe!