✔ margin-top falsch interpretiert vom FF und IE

Status
Nicht offen für weitere Antworten.
R

Rayne

Erfahrenes Mitglied
Hallo :)

Ich habe ein Problem mit dem Befehl margin-top. Die Darstellung wird vom IE und FF unterschiedlich ausgegeben.

Das Stylesheet:

HTML: 
Body {
      background: #FFFFFF;
      color:      #000000;     
     
     margin:      0px;
     height:      100%;
     }

#Name-Hauptseite {
position: relative;
width: 357px;
height: 24px;
margin-left:auto;
margin-right:auto; 
margin-top:50px;
background: url(Bilder/Name.gif) no-repeat;
      }

#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto; 
margin-top:40px;
}

#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto; 
border-top: solid 1px #137b82;
}

a.Person {
float: left;
display:block;
width: 136px;
height: 11px;
background: url(Bilder/Person.gif) no-repeat;
      }

a.Person:hover {
background: url(Bilder/Person-over.gif) no-repeat;
text-decoration: none;
}

a.Lebenslauf {
float: left;
display:block;
width: 83px;
height: 11px;
margin-left:30px;
background: url(Bilder/Lebenslauf.gif) no-repeat;
      }

a.Lebenslauf:hover {
background: url(Bilder/Lebenslauf-over.gif) no-repeat;
text-decoration: none;
}

a.Zeugnisse {
float: left;
display:block;
width: 74px;
height: 11px;
margin-left:30px;
background: url(Bilder/Zeugnisse.gif) no-repeat;
      }

a.Zeugnisse:hover {
background: url(Bilder/Zeugnisse-over.gif) no-repeat;
text-decoration: none;
}

a.Arbeitsproben {
float: left;
display:block;
width: 111px;
height: 11px;
margin-left:30px;
background: url(Bilder/Arbeitsproben.gif) no-repeat;
      }

a.Arbeitsproben:hover {
background: url(Bilder/Arbeitsproben-over.gif) no-repeat;
text-decoration: none;
}

a.Kontakt {
float: left;
display:block;
width: 66px;
height: 11px;
margin-left:30px;
background: url(Bilder/Kontakt.gif) no-repeat;
      }

a.Kontakt:hover {
background: url(Bilder/Kontakt-over.gif) no-repeat;
text-decoration: none;
}

Der HTML-Code:

HTML: 
<body>
<div id="Name-Hauptseite"></div>
<div id="Navigation">
<a href="#" class="Person">&nbsp;</a>
<a href="#" class="Lebenslauf">&nbsp;</a>
<a href="#" class="Zeugnisse">&nbsp;</a>
<a href="#" class="Arbeitsproben">&nbsp;</a>
<a href="#" class="Kontakt">&nbsp;</a>
</div>
<div id="Linie"></div>
</body>

So, im Firefox (3) befindet sich die Linie nun direkt über der Navigation, im IE (7) genau darunter. Stelle ich nun einen margin-top-Wert ein, befindet sich die Linie natürlich dementsprechend unterschiedlich weit unter der Navi :(

So siehts aus:

IE:

http://www.sky-divezone.de/Other/Linie-IE.jpg

FF:

http://www.sky-divezone.de/Other/Linie-FF.jpg

Wo liegt der Fehler? Wie bekomme ich den Abstand identisch hin?

Ich danke für eure Hilfe :)
 
Zuletzt bearbeitet:
Hi,

du hast schlichtweg vergessen, die Floatumgebung nach der Navigation mittels der clear-Eigenschaft aufzuheben, und so im Dokument wieder den normalen Textfluß herzustellen:

Code: 
#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
clear:left;
}
mfg Maik

P.S. Du bist heute im CSS-Board schon der dritte User, dem dieser Fehler unterläuft :suspekt:
 
Wow, danke für die schnelle Antwort, hat funktioniert :D

ABER an das clear hatte ich auch gedacht, ich schrieb jedoch clear: both; *schäm*

Nochmal danke :)
 
Zuletzt bearbeitet:
Merke: clear:both kommt dann zum Einsatz bzw. entfaltet seine "volle Wirksamkeit", wenn sich float:left und float:right in einer Floatumgebung gegenüberstehen.

mfg Maik
 
Mist, doch noch ein Problem: Sobald ich die Linie mittels margin-top: 50px; nach unten verschieben möchte, ist der Abstand im IE wesentlich größer, als im FF.

HTML: 
#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto; 
border-top: solid 1px #137b82;
margin-top: 80px;
clear: left;
}
 
Mit deinen Quellcode-Angaben und meinen beiden Regelerweiterungen für #Navigation zur visuellen Unterstützung :

Code: 
#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
border-bottom: solid 1px #137b82;
height:11px;
}
kann ich bei mir keine Maßdifferenz im IE 6 + 7 gegenüber den anderen Browsern feststellen.

mfg Maik
 
Tatsache, da muss ich wohl irgendwo einen Fehler gemacht haben, nun ist es wirklich identisch, DANKE :D :D
 
Wie kann es auch anders sein, gibt es mittlerweile wieder ein kleines Problem :(

Es geht wieder um unterschiedliche Abstände im FF und IE, finde den Fehler aber einfach nicht.

So siehts aus:

FF:

http://www.sky-divezone.de/Other/Rubrik-FF.jpg

IE:

http://www.sky-divezone.de/Other/Rubrik-IE.jpg

Im Firefox ist der Abstand der Überschrift zur Linie oben und unten nahezu identisch, so wies sein soll. im IE ist der Abstand nach oben aber weitaus größer, das sieht natürlich blöd aus.

Stylesheet:

HTML: 
Body {
/* -------------------------------------------------------------------------------------> Farben */
      background: #FFFFFF;
      color:      #828482;     
      
/* -------------------------------------------------------------------------------------> Schrift */
     font-family:  Arial;
     font-size:    0.9em;
    
/* -------------------------------------------------------------------------------------> Abstände */
     margin:      0px;
     height:      100%; 
     }

/* -------------------------------------------------------------------------------------------------------------------> Navigation */

#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:11px;
}

a.Person {
float: left;
display:block;
width: 136px;
height: 11px;
background: url(Bilder/Person.gif) no-repeat;
      }

a.Person:hover {
background: url(Bilder/Person-over.gif) no-repeat;
text-decoration: none;
}

a.Lebenslauf {
float: left;
display:block;
width: 83px;
height: 11px;
margin-left:30px;
background: url(Bilder/Lebenslauf.gif) no-repeat;
      }

a.Lebenslauf:hover {
background: url(Bilder/Lebenslauf-over.gif) no-repeat;
text-decoration: none;
}

a.Zeugnisse {
float: left;
display:block;
width: 74px;
height: 11px;
margin-left:30px;
background: url(Bilder/Zeugnisse.gif) no-repeat;
      }

a.Zeugnisse:hover {
background: url(Bilder/Zeugnisse-over.gif) no-repeat;
text-decoration: none;
}

a.Arbeitsproben {
float: left;
display:block;
width: 111px;
height: 11px;
margin-left:30px;
background: url(Bilder/Arbeitsproben.gif) no-repeat;
      }

a.Arbeitsproben:hover {
background: url(Bilder/Arbeitsproben-over.gif) no-repeat;
text-decoration: none;
}

a.Kontakt {
float: left;
display:block;
width: 66px;
height: 11px;
margin-left:30px;
background: url(Bilder/Kontakt.gif) no-repeat;
      }

a.Kontakt:hover {
background: url(Bilder/Kontakt-over.gif) no-repeat;
text-decoration: none;
}

/* -------------------------------------------------------------------------------------------------------------------> Trennlinie */

#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto; 
border-top: solid 1px #137b82;
margin-top: 30px;
clear: left;
}

/* -------------------------------------------------------------------------------------------------------------------> Rubrik */

#Rubrik {
position: relative;
width: 590px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
font-family: Georgia;
font-size: 2.8em;
color: #137b82;
}

/* -------------------------------------------------------------------------------------------------------------------> Trennlinie 2 */

#Linie2 {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto; 
border-top: solid 1px #137b82;
margin-top: 40px;
}

/* -------------------------------------------------------------------------------------------------------------------> Inhalt */

#Inhalt {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:auto;
line-height:  1.4em;
word-spacing: 0.3em;
}

HTML:

HTML: 
<body>
<div id="Name-Hauptseite"></div>
<div id="Navigation">
<a href="#" class="Person">&nbsp;</a>
<a href="#" class="Lebenslauf">&nbsp;</a>
<a href="#" class="Zeugnisse">&nbsp;</a>
<a href="#" class="Arbeitsproben">&nbsp;</a>
<a href="#" class="Kontakt">&nbsp;</a>
</div>
<div id="Linie"></div>
<div id="Rubrik">Lernen Sie mich kennen!</div>
<div id="Linie2"></div>

Ist mir ein Fehler unterlaufen?
 
Mag sein, dass hier der Abstand um ein paar Pixel voneinander abweicht, aber sag mir bitte, welcher Seitenbesucher mit beiden Browsern gleichzeitig deine Seite aufruft?

mfg Maik
 
Da magst du recht haben, aber für mein "ästhetisches Verständnis" sieht es unschön aus, dass der Abstand ungleich ist im IE. Dazu muss man auch nicht den Firefox laufen haben, um die ungleichen Abstände zu erkennen.

Ist das nun ein Bug, mit dem ich leben muss, oder gibt es dafür eine Lösung?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück