verbuggter IE

Ursprünglich stand an dieser Stelle eine Lösung zu position:fixed, die auf einem Bug basierte. OK, diese Lösung funktionierte zwar im IE6/win, jedoch nicht im IE5.

Desweiteren bringen Lösungen die auf Bugs basieren, im Nachhinein mehr Nachteile als Vorteile, spätestens wenn eine neue Version des “verbuggten” Programmes erscheint.

Daher hab ich diese Lösung komplett ersatzlos aus dem Artikel gestrichen.

Jetzt aber …

Da auf sehr vielen Windows Systemen noch immer der Internet Explorer 5 oder 6 installiert ist, sollte die Lösung unbedingt auch im beiden Browsern funktionieren.

Caio Chassot hat mal eine ganz andere Konstruktion ausprobiert, um einen position: fixed Effekt vorzutäuschen. Das schöne an seiner Lösung ist, dass sie NICHT auf einen Bug aufbaut. Das Unschöne daran : Leider verwendet sie Microsofteigene Tags und ist somit vor allen Dingen auf Mac Browsern (IE5.x, Safari und Co), sowie Mozilla und Opera nicht einsetzbar. Dennoch war die Lösung zum Zeitpunkt ihres erscheinens, eine gute Alternative, wenn man unbedingt einen solchen Effekt erreichen wollte.

Caio’s Vorgehen:
Zuerst wird eine Ebene erstellt, die absolut positioniert wird. Sie wird später vortäuschen, fix zu sein. Um die Seiten auf allen Browsern gleich aussehen zu lassen, soll auch sie links oben verankert werden und auch die selbe Hintergrundfarbe verwenden.

/* Dieser Teil soll später fix dargestellt werden */
.menu {
   z-index: 1; /* verhindert, daß die Ebene in älteren Browsern verdeckt wird*/
   border: 1px solid black;
   background-color: #FFA07A;
   color: white;
   position: absolute;
   top: 0px;
   left: 0px;
   width: 200px;
   height: 300px;
}

Im nächsten Schritt wird eine bildschirmausfüllende Ebene benötigt. Sie stellt den Schlüssel zu Caios Lösung dar. Sie wird nur statisch positioniert, weswegen ein Browser Ihr keine top und left Koordinaten zuordnen kann (Siehe CSS Specs).

Der Grund, warum Caios Lösung nur im IE5-6/Win funktioniert, sind proprietäre MS Tags. In diesem Fall wird die Eigenschaft overflow-y:hidden verwendet.

Damit sind auch sofort die Nachteile dieser Lösung erkennbar.Ein Stylesheet mit einer solchen Eigenschaft kann nicht mehr validiert werden. Die overflow Eigenschaft ist zwar bekannt und wird auch vom W3C beschrieben, jedoch gilt das nicht für die Eigenschaft overflow-y, welche zwar beim W3C als Vorschlag eingereicht wurde, aber bis jetzt noch nicht übernommen wurde. (Vielleicht CSS 3 ?) Da Ziel weiterhin ein cross-browser-konformer fixed Effekt ist, stört uns das erstmal nicht weiter.

Der besagte Container, der anschließend den scrollbaren Inhalt enthält, bekommt folgende CSS Formate zugeteilt:

.container {
height: 100%;
width: 100%;
overflow-y: auto;
}

Da position: static als Voreinstellung bei Elementen angegeben wird, muß es hier nicht nochmal explizit beschrieben werden. Wurde die Eigenschaft dieser Klasse im ersten Stylesheet beschrieben, kann es zu unerwünschten Nebeneffekten kommen, wenn die vorher definierte Eigenschaft nicht überschrieben wird. Daher wird der Wert nur Sicherheitshalber erneut definiert. Zur Positionierung des Elementes muß auf die Eigenschaft margin zurückgegriffen werden.

Der Einsatz von position: relative ist zwar auch möglich, aber unter gewissen Umständen, können bei dieser Positionierungsart Bugs provoziert werden, die Alles zunichte machen. Daher kommt nun ein BlockLevelelement zum Einsatz, das unter einer bereits sichbaren Ebene liegt. Der Benutzer scrollt eigentlich nur in dieser einen Ebene hoch und runter. Man hat jedoch den Eindruck, als wäre die Ebene links oben fix und der Rest wäre beweglich. Klingt verwirrend, wird aber im Beispiel deutlicher. Die Styledefintionen sehen nun so aus:

.inhalt {
  position: static; /* WICHTIG !!! */
  margin: 0px 40px 40px 240px;
  border: 1px solid black;
  background-color: #B0C4DE;
  padding: 20px;
}

Diese Klasse soll also von oben nach links (im Uhrzeigersinn) 0px 40px 40px 240px weit vom Rand des übergeordneten Elementes entfernt sein. Da dieses aber Bildschirmausfüllend ist, wirkt es so, als sei der Inhalt zur gesamten Seite ausgerichtet. Die anderen Angaben haben nur grafische Gründe.

Ganz wichtig, um Probleme mit der Scrollbar zu vermeiden ist folgender Code, der unbedingt noch für den IE definiert werden muss:

html,body{
overflow-y: hidden;
}

Als Ergebnis erhält man eine Seite, die in allen Internet Explorern funktioniert und den korrekten Effekt zeigt. Die Eigenschaft overflow-y verhindert leider die Anzeige auf anderen Browsern.

Alles zusammen

Wir haben nun

• Browser, die von Haus aus position:fixed unterstützen
• dank Caio eine Lösung, die position:fixed im Internet Explorer simuliert
• Conditional Comments

Warum also nicht alles miteinander kombinieren und eine Lösung basteln, die position:fixed in allen Browsern ermöglicht ?

Der Ablauf müsste also wiefolgt aussehen :
Ein Browser, der von Hause aus mit position:fixed umgehen kann, soll dieses auch sehen können (Mozilla, Safari, teilweise Opera, usw.). Kann er nicht mit dem fixed-Wert umgehen (Internet Explorer/Windows), dann muß dem Betrachter der Effekt vorgetäuscht werden.

Mit dieser Lösung sollte also die grösste Gruppe an Browsern erreicht werden. Der oben genannte Ablauf sollte in HTML also in etwa wiefolgt aussehen :

<!--[if lt IE 7]>
	<link href="ie5.css" mce_href="ie5.css" rel="stylesheet" type="text/css">
<![endif]->

Es wird also zuerst für alle Browser das Stylesheet mit position:fixed geladen, welches einige Browser – ausser dem IE/Win – verstehen. Den nachfolgenden Kommentar ignorieren alle Browser, ausser dem IE/Win, und fahren mit Parse-Vorgang fort. Alle Versionen des Internet Explorers erkennen an dieser Stelle jedoch einen Conditional Comment. Sie können die Bedingung des Comments erfüllen und sehen in der nächsten Zeile einen Link auf ein weiteres Stylesheet. In dem Augenblick, in dem dieses geladen wird, werden einige Werte, die im ersten Stylesheet definiert wurden, kurzerhand überschrieben. Anschliessend fährt auch er mit dem Parse-Vorgang fort, stellt späteren HTML Code aufgrund des zusätzlichen Stylesheets jedoch etwas anders dar.

Die Bedingung <!––[if lt IE 7]> führt dazu, dass nur die Internet Explorer kleiner Version 7 den nachfolgenden Code ausführen. Der Internet Explorer 7 wird an dieser Stelle ausgenommen, da er in der Lage ist position: fixed zu verstehen und richtig anzuzeigen. Daher braucht man ihm nicht besonderen Code zu definieren.

Die im obigen Quelltext eingebundenen CSS Dateien andere.css und ie5.css sehen also nun wiefolgt aus:

Zuerst die Datei andere.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body {
	margin: 0px;
	height: 100%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: black;
}
.menu{
	position: fixed;
	border: 1px solid black;
	background-color: #FFA07A;
	left: 0px;
	top: 0px;
	width: 200px;
	height : 300px;
	color: white;
}
.inhalt{
	position: static;
	margin: 0px 40px 40px 240px;
	border: 1px solid black;
	background-color: #B0C4DE;
	padding: 20px;
}

Dann die Datei ie5.css, in welcher einige der oben gennante Eigenschaften nur für den Internet Explorer 5 + 6 überschrieben werden, weswegen sie kürzer ist als die oben aufgeführte Datei andere.css :

1
2
3
4
5
6
7
8
9
10
11
12
13

html, body {
	padding: 0;
	overflow-y: hidden;
}
.container {
	height: 100%;
	width: 100%;
	overflow: auto;
}
.menu {
	z-index: 1;
	position: absolute;
}

Der HTML Code der Seite könnte wiefolgt aussehen :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href="andere.css" mce_href="andere.css" rel="stylesheet" type="text/css">
<! [if lt IE 7]>
	<link href="ie5.css" mce_href="ie5.css" rel="stylesheet" type="text/css">
<![endif]-->
<div class="menu">
 
<a href="#">Link 1</a>
 
<a href="#">Link 2</a>
 
<a href="#">Link 3</a>
 
Im Gegensatz zum ersten Beispiel ist dieses Menü in allen Browsern ab
    Version 5 fix.
 
<a href="index.php">Hier gehts zurück zum Artikel</a></div>
<div class="container">
<div class="inhalt">
 
An dieser Stelle muss nun ein langer Text stehen, damit man überhaupt scrollen kann</div>
</div>

Wichtig ist, dass an die Stelle von <p>An dieser Stelle muss nun ein langer Text stehen, damit man überhaupt scrollen kann</p> auch wirklich ein langer Text eingefügt wird, damit ein Scrollen durch den Text überhaupt möglich ist.

Hier eine Beispielseite, die das Ergebnis darstellt und den oben gezeigten Code verwendet: Beispielseite mit Fixer Positionierung

Wir haben an dieser Stelle also exakt das erreicht, was wir wollten. Für die einen Browser ein position:fixed, für den Internet Explorer 5+/win eine Art fixed-Simulation

Pages: 1 2 3