width von Firefox anders als IE dargestellt

Status
Nicht offen für weitere Antworten.

chaosgoettin

Mitglied
Hallo,

warum interpretiert der Firefox width anders als IE?
Siehe Anhang.


Vielen Dank für eure Hilfe.
Es wäre swichtig das auch firefox das rechte Feld richtig darstellt.


Auszug CSS Datei:
------------------------------
#reise_links
{
margin-bottom:20px;
padding-left:20px;
position:relative;
width:570px;
float:left;
text-align:left;
}

#reise_rechts
{
margin-left:30px;
width:200px;
float:left;
position:relative;
}
 

Anhänge

  • 25288attachment.jpg
    25288attachment.jpg
    80,7 KB · Aufrufe: 11
  • 25289attachment.jpg
    25289attachment.jpg
    84,8 KB · Aufrufe: 13
Wenn die Grafiken den Browsern entgegengesetzt zugeordnet wären, würde ich auf die margin-left-Eigenschaft tippen, deren Wert der IE bei floatenden Boxen / Elementen gerne verdoppelt.

Denn grundsätzlich interpretiert der Firefox-Browser die width-Eigenschaft nicht anders bzw. falsch.
 
Entweder hast du für das Dokument keinen Doctype deklariert, oder einen gewählt, der den IE in den Quirksmodus versetzt und er deshalb das Boxmodell falsch interpretiert.

In deinem Fall addiert der IE nämlich den linken Innenabstand nicht zur Breitenangabe hinzu -> 570px + 20px = 590px, was die tatsächliche Boxbreite ergibt.

Firefox tut dies aber, und somit verschiebt sich die rechte Box um 20 Pixel.
 
Ja also mit den Blöcken klappt es jetzt. Aber wenn ich das Doctype hinzufüge habe ich im IE einen horizontalen Scroll. Obwohl es nichts zu scrollen gibt?

Warum? Ich weiß das es am Doctype liegt. denn wenn ich ihn entferne ist der Scroll weg aber die Blöcke gehen wieder nicht?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Vielen Dank
 
Vielleicht hilft es, wenn du folgende Regel im Stylesheet notierst:

Code:
html, body {
    margin: 0;
    padding: 0;
    overflow: auto;
}
Ansonsten könntest du den horizontalen Scrollbalken im IE mit overflow-x:hidden deaktivieren.
 
Status
Nicht offen für weitere Antworten.
Zurück