Melanu Rinots: position:fixed im Internet Explorer in einer XHTML-Seite

SELF-Forum

position:fixed im Internet Explorer in einer XHTML-Seite

Melanu Rinots
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte eine Seite mit einem fixierten Kopfbereich anlegen. Dies gelingt auch über position:fixed in den modernen Browsern sehr gut, der Interexplorer zickt jedoch wieder einmal herum.

Nun gibt es ja einige Möglichkeiten mit CSS-Browser-Weichen auch im Internet Explorer zum gewünschten Ergebnis zu kommen. Bei meiner konkreten Seite gelingt dies aber nur, wenn ich die Seite in HTML deklariere und schreibe. Sobald ich dieselbe Seite in XHTML umschreibe (bevorzuge ich aus verschiedensten Gründen) entstehen in den verschieden IE-Versionen unschöne Nebeneffekte, wie versteckte Scrollbar etc.

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.

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

Nach viel hin und her habe ich testweise vor die XHTML Doctype-Angabe noch die zwei folgenden Zeilen geschrieben, um sowohl den IE6 als auch den IE7 in den Quirksmodus zu versetzen.

<?xml version="1.0" encoding="utf-8"?>  
<!-- ... and keep IE7 in quirks mode -->  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

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?

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

Ich wünsche allen eine geruhsame Nacht
Melanu Rionots

Beitrag melden
–
Informationen zu den Bewertungsregeln

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

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    ich möchte eine Seite mit einem fixierten Kopfbereich anlegen. Dies gelingt auch über position:fixed in den modernen Browsern sehr gut, der Interexplorer zickt jedoch wieder einmal herum.

    Der IE ab 7 kann position:fixed - willst du für *noch* ältere Versionen wirklich noch irgendeinen Zusatzaufwand betreiben?

    IE < 7 kann man m.E. im Normalfall genauso gut absolute Positionierung, oder im normalen Fluss belassene Elemente servieren.

    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.

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

    Das fängt schon mit der Rumspinnerei bei der Berechnung von Elementmaßen an ...

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      Melanu Rinots
      – Informationen zu den Bewertungsregeln

      Vielen Dank für Deine Antwort ChrisB,

      Leider besuchen meine Seite die meisten Benutzer mit dem IE 6, so wäre es nicht schlecht, wenn ein einigermaßen sauberes Layout auch dort ankommt.

      Ich möchte nocheinmal betonen, dass ich ja ein zufriedenstellendes Ergebnis erziele, wenn ich entweder den doctype HTML 4.01 Transitional verwende, oder wenn ich das selbe in XHTML 1.0 Strict schreibe UND den IE6 und IE7 über:

      <?xml version="1.0" encoding="utf-8"?>  
<!-- ... and keep IE7 in quirks mode -->  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      in den Quircks-Modus versetze.

      Für den IE 7 kann ich wie gesagt position:fixed verwenden.

      Doch wie kann ich ein XHTML Dokument nehmen ohne das ich den IE6 in den Quicksmodus versetzen muss.

      Mit freundlihen Grüßen zurück

      Melanu Rinots

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Ich möchte nocheinmal betonen, dass ich ja ein zufriedenstellendes Ergebnis erziele, wenn ich entweder den doctype HTML 4.01 Transitional verwende, oder wenn ich das selbe in XHTML 1.0 Strict schreibe UND den IE6 und IE7 [...] in den Quircks-Modus versetze.

        Doch wie kann ich ein XHTML Dokument nehmen ohne das ich den IE6 in den Quicksmodus versetzen muss.

        Keine Ahnung, was du im Standards-Mode falsch machst, so dass es dort "nicht funktioniert".
        (Du hast ja nicht mal eine brauchbare Problembeschreibung geliefert, die das Problem nachvollziehbar macht, sondern dich auf "funzt nich" beschränkt.)

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

          Melanu Rinots
          – Informationen zu den Bewertungsregeln

          Vielen Dank ChrisB,

          Du hast recht. Deshalb formuliere ich meine Anfrage jetzt nocheinmal um:

          Meine Seite ist fast genauso aufgebaut wie eine Beispielseite aus SELFHTML: Beispiel6. Den kompletten Quellcode habe ich hinten nochmal angehängt. Die Seite ist aber eine HTML 1.0 Transitional Seite.
          Ich möchte aber eine XHTML 1.0 Strict Variante.

          Ich habe es nicht geschafft, die Seite einfach umzuschreiben das es im IE gleich aussieht (außer, wie gesagt indem ich den IE in den quircksmodus versetze).

          Kannst Du mir da helfen?
          Besonders, dass das Dokument im IE6 gut aussieht wäre mir wichtig.

          MfG

          Melanu Rinots

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  
<html>  
<head>  
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
	<title>Feststehende Kopf- und Fußzeile</title>  
	<style type="text/css">  
		body  
		{  
			position:absolute;  
			background:#ffffff;  
		}  
		html, body  
		{  
			top:0; left:0; right:0;  
			min-height:100%;  
			margin:0;  
			padding:0;  
			width:100%;  
		}  
		#header_container  
		{  
			position:fixed;  
			top:0; left:0; right:0;  
			text-align:center;  
			margin:0;  
			height:3em;  
			z-index:3;  
		}  
  
		#header  
		{  
			position:absolute;  
			top:0; left:0; right:0; bottom:0;  
			height:100%;  
			background:#efefef;  
			z-index:3;  
			margin:0;  
			padding:0.2em;  
		}  
		#menu  
		{  
			position:fixed;  
			top:4em;  
			left:.5em;  
			width:9em;  
			border: 3px dotted #dedede;  
			padding:.5em;  
		}  
		#content  
		{  
			margin:0;  
			padding-top:4.85em;  
			padding-left:12em;  
			padding-bottom:3em;  
			z-index:2;  
		}  
		#footer_container  
		{  
			position:fixed;  
			bottom:0; left:0; right:0;  
			text-align:center;  
			margin:0;  
			height:2em;  
			z-index:3;  
		}  
		#footer  
		{  
			position:absolute;  
			top:0; left:0; right:0; bottom:0;  
			background:#efefef;  
			z-index:3;  
		}  
		  
		/* Nun für den MSIE */  
		* html, * html body  
		{  
			overflow:hidden;  
			bottom:0;  
			height:100%;  
		}  
		* html #header_container, * html #footer_container  
		{  
			position:absolute;  
			width:100%;  
			padding-right:16px;  
		}  
		* html #menu  
		{  
			position:absolute;  
		}  
		* html #header,* html #footer  
		{  
			height:100%;  
			position:static;  
		}  
		* html #content  
		{  
			position:absolute;  
			top:0; bottom:0; left:0; right:0;  
			height:100%;  
			width:100%;  
			overflow:auto;  
			margin:0;  
		}  
		  
		#menu li  
		{  
			list-style: none;  
			margin:0;  
			padding:0.3em;  
		}  
		#menu li#active  
		{  
			padding:0.5em;  
			text-decoration:underline;  
		}  
		#menu a:link, #menu a:visited  
		{  
			display:block;  
			background:#eeeeee;  
			color:black;  
			text-decoration:none;  
			margin:0;  
			padding:0.2em;;  
		}  
		#menu a:hover  
		{  
			background:#4f4f4f;  
			color:#ffffff;  
			text-decoration:underline;  
		}  
		* html #menu  
		{  
			margin:0;  
			width:10.5em;    /* Der IE soll das Element breiter darstellen, da margin und padding hier von  
							    der Breite abgezogen wird! */  
		}  
	</style>  
</head>  
<body>  
	  
	<div id="header_container">  
		<h1 id="header">Seite mit Header und Footer (2)</h1>  
	</div>  
	  
	  
	<ul id="menu">  
		<li><a href="beispiel1.htm">Einfacher Footer</a></li>  
		<li><a href="beispiel2.htm">Feststehender Footer</a></li>  
		<li><a href="beispiel3.htm">Feststehender Footer für den Internet Explorer</a></li>  
		<li><a href="beispiel4.htm">Kombination: Ein Footer für alle</a></li>  
		<li><a href="beispiel5.htm">Feststehende Kopf- und Fußzeile</a></li>  
		<li id="active">Alternative Positionierung, feste Navigation</li>  
		<li><a href="index.htm#fixierte_navigation_bsp">Zum Artikel</a></li>  
	</ul>  
	  
	  
	<div id="content">  
		  
		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>  
  
		<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
  
		<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>  
  
		<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
  
		<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>  
  
		<p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>  
  
		<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus</p>  
  
		<p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium.</p>  
  
		<p>Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</p>  
  
		<p>Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Gratuitous octopus niacin, sodium glutimate.</p>  
  
		<p>Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p>  
  
		<p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit&aacute; de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.</p>  
  
		<p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>  
	  
	</div>  
	  
	<div id="footer_container">  
		<div id="footer">  
			<b>Und hier ist der endgültige Footer!</b>  
		</div>  
	</div>  
  
</body>  
</html>
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

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

    Detlef G.
    – Informationen zu den Bewertungsregeln

    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!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

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

      Melanu Rinots
      – Informationen zu den Bewertungsregeln

      Vielen Dank Detlef,

      danach habe ich schon seit längerem gesucht. Wenn ich Dich richtig verstanden habe werden in Deiner Variante die IEs nicht in den Quiksmodus geschalten, oder?

      Wie kann ich Deine Variante nun auch für den IE5.5 tauglich machen?

      Muss ich das über eine extra Browserweiche machen, in welcher ich dann wie in der SELFHTML Beispieldatei den Trick mit den 16px padding verwende?

      Auf Wiederschreiben

      Melanu Rinots

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

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

        Detlef G.
        – Informationen zu den Bewertungsregeln

        Hallo Melanu

        danach habe ich schon seit längerem gesucht. Wenn ich Dich richtig verstanden habe werden in Deiner Variante die IEs nicht in den Quiksmodus geschalten, oder?

        Sie werden nicht in den Quirksmodus geschaltet, dafür ist es aufwändiger und benötigt auch ein zusätzliches Element im #header.

        Wie kann ich Deine Variante nun auch für den IE5.5 tauglich machen?

        Wohl kaum mit vertretbarem Aufwand.
        Du müsstest alle Angaben für aktuelle standardkonforme Browser machen, dann nur für IE6 (eventuell auch IE7) per Hack meine Variante reinbasteln und dann noch mal extra Anpassungen für IE5.5, die dann dem genannten Beispiel entsprechen.

        Meine Meinung ist, entweder den Standardmodus verwenden, wenn IEs <6 nicht extra berücksichtigt werden sollen, oder den Quirksmodus verwenden.
        Im Quirksmodus verhalten sich IE6/7 wie ein IE 5.5. Es sind (in der Regel) nur einmal Anpassungen für alle IEs < 8 notwendig.
        In Standardmodus sind eventuell ein paar Anpassungen für IE 7 notwendig, einige extra nur für IE 6 und viele dann nochmal extra nur für IE 5.5.

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

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

          Melanu Rinots
          – Informationen zu den Bewertungsregeln

          Vielen Dank!

          Melanu Rinots

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln