✔ Div positionieren

Status
Nicht offen für weitere Antworten.
Problem ie und firefox

Hallo,

das Layout von beta.bebi.de funktioniert unter dem ie einwandfrei, unter dem firefox ist es total verhauen. Weiß jemand warum und wie man das lösen kann?

Gruß
Kerstel
 
Hi,

vermutlich dürfte es daran liegen, dass du das Dokument im "Quirksmodus" übergibst, und der IE daher das Boxmodell falsch interpretiert.

Dazu zählt insbesondere die Kombination von Breiten-/Höhenangaben mit der padding- und border-Eigenschaft - siehe hierzu auch http://www.css4you.de/wsboxmodell/index.html#buh

Den Effekt erkennt man im Firefox schön an den Hintergrundbildern, die in einigen Boxen wiederholt werden, da sich ihre "tatsächliche" Boxenbreite aus den oben genannten Eigenschaften ergibt.

So gesehen interpretiert Firefox das Stylesheet korrekt, und der IE eben nicht.

Von daher wirst du zunächst dafür sorgen müssen, dass das Dokument mit dem entsprechenden Dokumenttyp im "Standardsmode" übergeben wird (siehe http://www.css4you.de/wsdoctypeswitch/dtsw01.html), und anschliessend all die Boxformatierungen korrigieren müssen, in denen du width mit padding- und border-Angaben kombiniert hast.
 
seltsam, laut Deinem link interpretiert Mozilla ja auch im Quirksmodus.

Zudem sind ja die Pixelangaben aus Photoshopvorlagen kopiert, demnach interpretiert Firefox ja falsch, da 150px in der Vorlage auch 150px im IE sind.
 
Also nochmal, Firefox unterstützt im "Quirksmodus" das von mir angesprochene Boxmodell, der IE hingegen nicht.

Und von welchen 150px sprichst du?

Nehmen wir mal diese Regel als Beispiel:

Code: 
.boxleft {
    width: 150px;
    font-size: 11px;
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 6px;
}
Nach dem Boxmodell ist diese Box 156px breit; Firefox stellt sie so dar, und der IE nicht.

Und bei dieser Box, die sich im DIV .boxleft befindet, verhält es sich genauso:

Code: 
.boxleft-content {
    width: 150px;
    padding: 3px 10px;
}
Sie ist "tatsächlich" 170px breit, und wird auch in dieser Breite vom FF angezeigt.
 
ah, ok verstehe. Wie sag ich dem IE jetzt er soll den Standard-Modus nehmen (ich gehe davon aus, hier macht er es), HTML 4.01 Strict?
 
Beispielsweise mit
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
oder
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
           "http://www.w3.org/TR/html4/strict.dtd">
 
also so langsam verzweifle ich, ich hab 3 Browser (ie6, ie7 und firefox) und in jedem sieht es anders aus. wobei es im ie6 noch am besten klappt. es kann doch nicht so schwer sein das für alle browser gleich gut hinzubekommen :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück