✔ Browserunterschiede beim floaten

[queicherius]

In Internet Explorer siehts so aus wie es soll, im Firefox ist unten dieser blöde Rand.
(s. Screen)

HTML:

<div <div class="adminHeader">
        
        <img height="60" class="floatleft" alt="" src="inc/img/logo.gif"/>
        
       
        
        <div class="floatleft">
        <span class="extrabig bold">pinCMS</span><br/><br/>
        <span class="normal bold">(eingeloggt als admin) - <a href="?perform_action=logout">Logout</a></span>
        </div>
        <p class="headerNavigation">
        <a href="admin.php?pack=users"><img width="20px" alt="" src="packages/users/admin_image.gif"/>Benutzer</a>
        <a href="admin.php?pack=counter"><img width="20px" alt="" src="packages/counter/admin_image.gif"/>Counter</a>
        <a href="admin.php?pack=content"><img width="20px" alt="" src="packages/content/admin_image.gif"/>Inhalt</a>
        <a href="admin.php?pack=options"><img width="20px" alt="" src="packages/options/admin_image.gif"/>Optionen</a>
        <a href="admin.php?pack=todo"><img width="20px" alt="" src="packages/todo/admin_image.gif"/>TO-DO</a>
        <a href="admin.php?pack=files"><img width="20px" alt="" src="packages/files/admin_image.gif"/>Dateien</a>
        <a class="active" href="admin.php?pack=layouts"><img width="20px" alt="" src="packages/layouts/admin_image.gif"/>Layouts</a>
        <a href="admin.php?pack=account"><img width="20px" alt="" src="packages/account/admin_image.gif"/>Account</a>
        </p>
        
        <br class="floatclear"/>
     
         </div>

CSS:

.adminHeader {
border:1px solid #000;
background-color:#039;
color:#FFF;
padding:20px;
margin: 7px;
margin-bottom:10px;
padding-right: 5px;
}

.adminHeader a {
color:#FFF;
text-decoration:none;
}

.adminHeader a:hover {
text-decoration:underline;
}

.headerNavigation{
  position:relative;
  top: -16px;
}

.headerNavigation a{
font-size:16px;
display:block;
float: left;
border:1px solid #000;
text-align:center;
text-decoration:none;
color:#FFF;
padding: 7px;
margin:5px;
width: 110px;
}

.headerNavigation img{
  margin-right: 7px;
}

.headerNavigation a:hover{
  background-color:#020485;
  border: 1px solid white;
  text-decoration:none;
}

.headerNavigation .active{
  background-color:#0363E0
}




.floatclear{
  clear: both;
}

.floatleft{
  float: left;
  padding-right: 15px;
}

Ich hoffe irgendjemand kann mir helfen, bin schon am verzweifeln

 

[Maik]

Hi,

drei Möglichkeiten zur Ursache:

• Whitespaces der Grafiklinks.
  
  Lösung:

.headerNavigation img{
  margin-right: 7px;
  float:left;
}

• Äußere Polsterungseigenschaft des <p>-Elements.
  
  Lösung:

p {
margin-bottom:0;
}

• Zeilenhöhe von .floatclear.
  
  Lösung:

.floatclear{
  clear: both;
  display:block;
  font-size:0;
  height:0;
  line-height:0;
}

mfg Maik

 

[queicherius]

Hilft leider alles nichts, sieht unverändert aus...

E: (Hab ein Resetstylesheet drin, das alle Eigenschaften auf 0 beziehungsweise den Initial-wert stellt, also ist es 2 auch nicht...)

 

[Maik]

Ich hab noch eine dritte Ursache ausgemacht, und in meinem Post reineditiert.

Die dürfte es dann sein.

mfg Maik

 

[queicherius]

E: (Hab ein Resetstylesheet drin, das alle Eigenschaften auf 0 beziehungsweise den Initial-wert stellt, also ist es 2 auch nicht...)

Leider funktioniert das auch nicht

 

[Maik]

Dann poste bitte mal einen Link, denn mit deinem Codeschnipsel kann ich hier noch nicht mal deine Screenshots reproduzieren.

mfg Maik

 

[queicherius]

Siehe Anlage.
Gibt nämlich grad noch kein funktionierendes Gesamtsystem...

 

[Maik]

Anstelle von <br class="clearfloat"> erziele ich hiermit ein übereinstimmendes Resultat:

<div class="adminHeader clearfix">

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik

 

[queicherius]

EDIT: Alles falsch was ich schrieb...

Nur dooferweise ist jetzt bei beiden Browsern der Abstand...

 

[Maik]

Das liegt schlichtweg an dieser Regel:

.headerNavigation{
  position:relative;
  top: -16px;
}

Die Angabe relative bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente r3 und r6). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente s4 und s7 demonstrieren – erhalten.

• Quelle: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

mfg Maik