Pingu
12-12-2004, 11:48
Hi,
da ich gerade auch mal wieder darüber gestolpert bin, daß der Microsoft Internet Explorer CSS2 nicht richtig kann, habe ich hier einen kleinen Tip.
Wer Elemente absolute und fixert (immer die selbe Position, auch wenn gescrollt) positionieren möchte, scheitert beim IE daran, daß er das Attribut fixed nicht beherrscht. Ich habe mir einen kleinen Workaround gebastelt auf Basis von JScript, also JavaScript nur für den IE. In der Annahme: Wer den IE benutzt, hat auch JScript eingeschaltet.
Folgendes Szenario: Links soll fixiert ein Menü erscheinen während der Inhalt rechts angezeigt wird. Dabei habe ich auf die Box-Definitionen von hier (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html) zurück gegriffen:
HTML
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Thilo Schumann (Pingu)" />
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="CONTENT">
{CONTENT}
</div>
<div id="MENU">
{MENU}
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
font-size: 10pt;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#MENU {
position: fixed !important;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 100%;
}
#CONTENT {
display: block;
float: none;
margin: 0px 5px 5px 170px;
}
Da der IE nicht nur das Attribut fixed sondern auch das Attribut !important nicht kennt übergeht er die erste Positionierungsanweisung und nimmt nur die zweite. Alle anderen CCS2-fähigen Browser interpretieren das Attribut !important und wissen, daß diese Anweisung vorrang vor der anderen hat.
Jetzt muß dem IE nur noch mitgeteilt werden, daß er beim Scrollen das fixierte Element mit scrollen soll. Dies wird über folgendes Script erreicht, welches direkt in die HTML-Datei integriert werden kann.
<!--
// The following scripts are required only for MSIE.
// Because the MSIE is not able to interpret correctly
// the CSS attribute fixed.
//-->
<script language="JScript" type="text/jscript">
<!--
// initialize the global Variable that remembers the
// original position of the element
var MENUtop = Number();
//-->
</script>
<script for="window" event="onload()" language="JScript" type="text/jscript">
<!--
{
// initialize the global Variable with the correct value
MENUtop = document.all.MENU.offsetTop;
// adjust the heigt of the element, because if the element
// is not positioned on the top and the height is set to 100%
// the height is not correctly set by the IE and during
// scrolling it results in ugly side effects (never ending page)
document.all.MENU.style.height = document.all.MENU.offsetHeight - document.all.MENU.offsetTop;
return true;
}
//-->
</script>
<script for="window" event="onscroll()" language="JScript" type="text/jscript">
<!--
{
// do the scrolling
document.all.MENU.style.top = MENUtop + document.body.scrollTop;
return true;
}
//-->
</script>
Beim Scrollen selbst kann es zwar zu unerwünschten Effekten kommen. Aber mit dem Beenden des Scrollen paßt alles wieder.
I hope this helps.
Pingu
da ich gerade auch mal wieder darüber gestolpert bin, daß der Microsoft Internet Explorer CSS2 nicht richtig kann, habe ich hier einen kleinen Tip.
Wer Elemente absolute und fixert (immer die selbe Position, auch wenn gescrollt) positionieren möchte, scheitert beim IE daran, daß er das Attribut fixed nicht beherrscht. Ich habe mir einen kleinen Workaround gebastelt auf Basis von JScript, also JavaScript nur für den IE. In der Annahme: Wer den IE benutzt, hat auch JScript eingeschaltet.
Folgendes Szenario: Links soll fixiert ein Menü erscheinen während der Inhalt rechts angezeigt wird. Dabei habe ich auf die Box-Definitionen von hier (http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html) zurück gegriffen:
HTML
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Thilo Schumann (Pingu)" />
<link rel="stylesheet" type="text/css" href="layout.css" />
</head>
<body>
<div id="CONTENT">
{CONTENT}
</div>
<div id="MENU">
{MENU}
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
font-size: 10pt;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#MENU {
position: fixed !important;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 100%;
}
#CONTENT {
display: block;
float: none;
margin: 0px 5px 5px 170px;
}
Da der IE nicht nur das Attribut fixed sondern auch das Attribut !important nicht kennt übergeht er die erste Positionierungsanweisung und nimmt nur die zweite. Alle anderen CCS2-fähigen Browser interpretieren das Attribut !important und wissen, daß diese Anweisung vorrang vor der anderen hat.
Jetzt muß dem IE nur noch mitgeteilt werden, daß er beim Scrollen das fixierte Element mit scrollen soll. Dies wird über folgendes Script erreicht, welches direkt in die HTML-Datei integriert werden kann.
<!--
// The following scripts are required only for MSIE.
// Because the MSIE is not able to interpret correctly
// the CSS attribute fixed.
//-->
<script language="JScript" type="text/jscript">
<!--
// initialize the global Variable that remembers the
// original position of the element
var MENUtop = Number();
//-->
</script>
<script for="window" event="onload()" language="JScript" type="text/jscript">
<!--
{
// initialize the global Variable with the correct value
MENUtop = document.all.MENU.offsetTop;
// adjust the heigt of the element, because if the element
// is not positioned on the top and the height is set to 100%
// the height is not correctly set by the IE and during
// scrolling it results in ugly side effects (never ending page)
document.all.MENU.style.height = document.all.MENU.offsetHeight - document.all.MENU.offsetTop;
return true;
}
//-->
</script>
<script for="window" event="onscroll()" language="JScript" type="text/jscript">
<!--
{
// do the scrolling
document.all.MENU.style.top = MENUtop + document.body.scrollTop;
return true;
}
//-->
</script>
Beim Scrollen selbst kann es zwar zu unerwünschten Effekten kommen. Aber mit dem Beenden des Scrollen paßt alles wieder.
I hope this helps.
Pingu