div's in externem css definieren
Sami
- css
0 André Laugks0 Elmar C.
Hallo zusammen,
ich habe auf einer Seite zwei <div>-Ebenen, die voneinander unabhängig beweglich sein sollen:
Beide Ebenen sollen jeweils präzise positioniert werden: die Tabelle "abolute", die Navigation "fixed", damit letztere beim Scrollen an Ort und Stelle bleibt.
Jetzt soll die ganze Positionierung etc. in ein externes Stylesheet, was ich nur mit allen Seiten, die noch kommen, verknüpfen muss. Mozilla und Co. spielen mit, aber der MSIE steigt (teilweise) aus:
Wenn ich das CSS direkt ins HTML-Dokument schreibe, interpretiert der MSIE/Mac alles richtig, der MSIE/Win aber immer noch wie oben beschrieben. Der Navigations-div sieht so aus:
#navi
{ position:fixed;
top:50px;
left:100px;
z-index:2;
}
Ist da irgendwas dran, was der MSIE nicht mag?
Hallo!
- MSIE 5.2 Mac positioniert einfach eine Ebene links oben und die andere schlicht daneben. Beim Scrollen bewegen sich beide.
- MSIE 5.0 Win positioniert die Tabelle korrekt, die Navigation aber nicht. Beim Scrollen bewegen sich beide.
Der IE kann nicht mit position:fixed umgehen. Keine Ahnung ob es Version 6 schon kann. Mehr dazu im Archiv.
Wenn ich das CSS direkt ins HTML-Dokument schreibe, interpretiert der MSIE/Mac alles richtig, der MSIE/Win aber immer noch wie oben beschrieben. Der Navigations-div sieht so aus:
#navi
{ position:fixed;
top:50px;
left:100px;
z-index:2;
}
Warum es unter IE/MAC nur funktioniert, wenn es im Header steht, kann ich Dir nicht sagen. Vielleicht ein aggresives Cacheproblem? Definiere mal eine Schriftfarbe für ein Text und schaue mal ob die Farbe verwendet wird. So überprüfe ich immer, ob es ein Cacheproblem ist. Manchmal bekommt man trotz Reload nicht die aktuelle CSS- oder JS-Datei
MfG, André Laugks
Hi André,
Der IE kann nicht mit position:fixed umgehen. Keine Ahnung ob es Version 6 schon kann.
Nein. Und ich denke, wir können uns bereits glücklich schätzen, wenn Version *9* das kann.
Grüße aus Koblenz,
Elmar
Ich weiß schon, warum ich diesen $%$&%/&-Browser privat nicht benutze...
Der HTML-Code zu meiner Seite lautet (leicht gekürzt):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="language" content="de">
... etc ...
<link href="../basis/na_fl_bg.css" rel="stylesheet" media="screen">
<style type="text/css" media="screen"><!--
#navi
#floater -->
</style>
</head>
<body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<div id="floater">
<table width="170" border="0" cellspacing="0" cellpadding="0" align="left">
...etc...
</table>
</div>
<div id="navi">
<table width="157" border="0" cellspacing="0" cellpadding="5">
</table>
</div>
</body>
</html>
Und in besagtem CSS steht momentan (Schriftformate weggelassen):
body
{ background-attachment: fixed;
background-color: #ffffff;
background-image: url(../../basis/in_bg.gif);
background-position: 100px 200px;
background-repeat: no-repeat;
}
#floater
{ position:absolute;
top:120px;
left:200px;
width:600px;
z-index:1;
}
#navi
{ position:absolute;
top:50px;
left:100px;
z-index:2;
}
body > div#navi { position:fixed; }
Das "fixe" Hintergrundbild kriegen alle Browser hin (gut, fast alle: OmniWeb spielt nicht mit, aber der kriegt so einiges nicht auf die Reihe). Mit Mozilla und Abkömmlinge, Konqueror und Safari macht es sogar richtig Spaß, aber die meisten benutzen ja leider M$IE.
Hi Sami,
<snip />
Gut, das hatten wir ja schon, warum *dieser* Eintrag nun plötzlich wieder da, und Dein letzter verschwunden ist, begreife ich nicht so ganz, aber meine Antwort auf Deinen im Äther verpufften letzten Eintrag will ich Dir nicht vorenthalten.
Habe mal ausprobiert:
Brav. :-)
#navi
{ position:absolute;
top:50px;
left:100px;
z-index:2;
}
body > div#navi { position:fixed; }Das ändert aber im Ergebnis eigentlich gar nichts (MSIE/Mac komplett Müll, MSIE/Win teils/teils, Mozilla gut).
Wäre hilfreich, den entprechenden HTML-Code dazu einzusehen. Eigentlich sollte das nämlich auch der IE auf die Reihe bekommen.
Grüße aus Koblenz,
Elmar