Detlef G.: position:fixed im Internet Explorer in einer XHTML-Seite

Beitrag lesen

Hallo Melanu

Meine Seite ist grundsätzlich so aufgebaut, wie eine Beispielseite aus selfhtml: http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm

Und auch bei ihr das selbe Phänomen: Die Seite ist ein HTML-Transitional Seite und die fixierten Bereiche sind auch im IE schön anzusehen. Ändere ich die Datei jedoch in eine XHTML Seite so wird der IE wieder gestalterisch selbstständig. (Schon das Ändern des doctypes auf xhtml reicht aus um diesen Effekt zu erzeugen.

Die Seite verwendet den Quirksmodus des IE, sobald du einen Doctype wählst, der ihn nicht in den Quirksmodus schaltet passt es dann natürlich nicht.

Meine erste Frage ist also: Warum stellt der Internet Explorer dieselbe Seite ganz anders dar, wenn man statt HTML in XHTML schreibt?

Weil er im Standardmodus einen Teil der Fehler nicht macht, die in dem Beispiel extra ausgeglichen werden.

Und siehe da: alle von mir getesten IE Versionen (ab Version 5.5) stellen die fixen Bereich wie gewollt dar.

Wenn du auch 5.5er IEs berücksichtigen willst, dann wäre es vielleicht gar nicht so abwegig, im Quirksmodus zu bleiben, weil dann für IE5.5 und IE6 die gleichen Anpassungen benötigt werden.

Meine zweite Frage ist somit: Wenn ich eine XHTML-Seite mit position:fixed-Bereichen (fixierter Kopfbereich, keine Seitennavigation) auch im IE zum Laufen bringen möchte, muss ich dann zwangsweise den IE in den Quirckmodus versetzen?

Nein, nicht zwangsläufig.
Aufgrund des Boxmodel-Bugs (im Quirksmodus) ist es nur wesentlich einfacher, weil innere Abstände in die Elementmaße eingerechnet werden. Dadurch ist ein einfaches width:100%; padding-right:16px; möglich, um den Platz für den Scrollbalken frei zu halten.

Kleines Besispiel in XHTML Strict (nur für IE!):

html, body {  
  margin:0;  
  padding:0;  
  height:100%;  
}  
html {  
  overflow:hidden;  
}  
body {  
  overflow:auto;  
}  
#header {  
  width:100%;  
  background: red;  
  position:absolute;  
  top:0;  
  right:16px;  
}  
#header div {  
  height: 100px;  
  margin-left:16px;  
  border:3px solid green;  
}  
#container {  
  margin-top:106px;  
  border:3px solid blue;  
}  

  <body>  
    <div id="header"><div>Der Kopf</div></div>  
    <div id="container">  
      der Inhalt <br />  
      der Inhalt <br />  
      der Inhalt <br /></div>  
  </body>  

Und die dritte und schließende Frage: Haben die Quirckmodi von IE6 und IE7 irgendwelche Nachteile für eine standartkonforme XHTML-Seite?

Ja, denn du musst beim Rest der Seite wesentlich mehr Anpassungen für IE6 und IE7 machen, als im Standardmodus nötig wären.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!