IE-Bug (Float): Inhalt verrutscht bei Verkleinern d. Fenster

[Fleiß]

Hallo,

ich habe folgendes Problem:

Wenn ich das Internet Explorer Fenster verkleinere, verrutscht der Container rechts unter den float:left-Container. Im Firefox erscheint ein Scrollbalken (width) bzw. der Text passt sich flexibel an[max-width].

Bilder:
Korrekte Darstellung im Firefox
Fehler im Internet-Explorer

XHTML und CSS:
index.html
CSS-Datei

Wie heißt der Bug und wie kann ich ihn beheben?

Wäre sehr dankbar für Antworten, meine Suche hier im Forum und in Google hat leider nichts ergeben, da es einfach zu viele IE-Fehler gibt und ich den Namen des Bugs nicht kenne.

Grüße
Fleiß

[Gernot Back]

Hallo Fleiß,

Bilder:
Korrekte Darstellung im Firefox
Fehler im Internet-Explorer

XHTML und CSS:
index.html
CSS-Datei

Wie heißt der Bug und wie kann ich ihn beheben?

Hast du schon einmal versucht, sagen wir mal dem #inhalt 3px mehr an Margin-Left zu geben, als die #navigation an Breite hat?

Gruß Gernot

[glücksmensch]

Hallo!

Dieses CSS wird Dein Problem fixen. Es ist der Box-Model-Bug des Internet Explorers (genauere Beschreibung des Bugs kannst Du Dir ergoogeln). Aber um diesen Bug zu umgehen, sollte man "width"-Angaben niemals mit "padding"-Angaben und/oder "border"-Angaben mischen. Auch ist es in Deinem Fall wichtig, keine Breitenangabe für das Fenster #inhalt zu setzen.
hier der CSS-Code:

  
html {  
margin: 0;  
padding: 0;  
}  
  
  
body {  
background-color: #faeed6;  
color: #000;  
font-family: Verdana, Helvetica, sans-serif;  
font-size: 1.0em;  
margin: 0;  
padding: 0;  
}  
  
#inhalt {  
background-color: #faeed6;  
float: left;  
}  
#inhalt p {  
  padding: 10px;  
}  
  
#kopfzeile {  
background: red;  
height: 200px;  
}  
  
#navigation {  
background-color: #969084;  
float: left;  
font-size: 1.1em;  
height: 200px;  
width: 200px;  
}  

[Fleiß]

Vielen Dank! Funktioniert, ich werde es mir jetzt mal genauer anschauen.