Reini: Problem mit position:fixed bei IE7

SELF-Forum

Problem mit position:fixed bei IE7

Reini
– Informationen zu den Bewertungsregeln

Hallo,

ich möchte eine einfach aufgebaute Seite per CSS-Layout realisieren. Links das Menü, rechts der Inhalt, beides zusammen im Fenster zentriert. Das Menü sollte allerdings fixiert bleiben, also bei längerem Inhalt rechts nicht nach oben wegscrollen.

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
<head>  
<style type="text/css">  
  
#Gesamt {  
    margin: 0 auto;  
    width: 800px;  
}  
  
#Menue {  
 float: left;  
 position: fixed;  
 width: 300px;  
 background:#99FF66;  
}  
  
#Inhalt {  
 width: 500px;  
 margin-left: 300px;  
 background: #FFFF66;  
}  
</style>  
</head>  
  
<body>  
 <div id="Gesamt">  
  <div id="Menue">  
   Eintrag 1<br>Eintrag 2  
  </div>  
  
  <div id="Inhalt">  
   Zeile 1<br>Zeile 2<br>Zeile 3<br>Zeile 4<br>Zeile 5  
        </div>  
 </div>  
</body>  
</html>

Das funktioniert im Firefox 3 ideal. Ich möchte aber, dass dies zumindes auch im IE 7 funzt, der ja angebl. nun mit position:fixed umgehen kann. Das Problem ist aber, das der IE das Fixed-Menue-DIV nun über den Inhalt-DIV
legt. Daher ist der nun verbleibende Gesamtinhalt auch nicht mehr zentriert, sondern nach rechts verschoben.

Kann ich das Fixed-feature dennoch irgendwie mit dem IE7 sinnvoll einsetzen?

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Problem mit position:fixed bei IE7

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Kann ich das Fixed-feature dennoch irgendwie mit dem IE7 sinnvoll einsetzen?

    der ie7 geht bei fixed afaik davon aus, dass er ursprung immer der viewport des browsers ist - andere elemente mit einer position-eigenschaft abweichend von static sind ihm egal - erst ab der ie8 beta 1 funktioniert das auch im ie

    übrigens ist position fixed eine schlechte idee, da es die bedienbarkeit bei kleinen viewports unnötig einschränkt - im schlimmsten fall ersetze die eigenschaft nur für den ie durch ein position: absolute

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit position:fixed bei IE7

      Reini
      – Informationen zu den Bewertungsregeln

      Hab' mich jetzt in meiner Not noch mittels Trial-und-Error gespielt und irgendwann habe ich dann tatächlich die Lösung gefunden, wie auch der IE7 das Fixed-DIV richtig platziert:
      das Eltern-DIV (=#Gesamt"), des fixed-DIV muss position:relativ oder position:absolut sein, weiters dürfen bei fixed keine left,top Werte angegeben werden, sonst wird beim IE7 relativ zum Viewport platziert.

      Auf float:left habe ich nun verzichtet, stattdessen den Inhalt-Div absolut zum Eltern-DIV platziert.

        
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">  
<html>  
<head>  
<style type="text/css">  
  
#Gesamt {  
 position:relative;  
 margin: 0 auto;  
    width: 800px;  
}  
  
#Menue {  
 position: fixed;  
 width: 300px;  
 background:#99FF66;  
}  
  
#Inhalt {  
 position: absolute;  
 top: 0px; left: 300px;  
 width: 500px;  
 /* margin-left: 0px; */  
 background: #FFFF66;  
}  
</style>  
</head>  
  
<body>  
 <div id="Gesamt">  
  <div id="Menue">  
   Eintrag 1<br>Eintrag 2  
  </div>  
  
  <div id="Inhalt">  
   Zeile 1<br>Zeile 2<br>Zeile 3<br>Zeile 4<br>Zeile 5  
        </div>  
 </div>  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Problem mit position:fixed bei IE7

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Reini:

    Kann ich das Fixed-feature dennoch irgendwie mit dem IE7 sinnvoll einsetzen?

    Wie vorhin schon gesagt: Hole ihn aus dem Quirksmodus!

    Live long and prosper,
    Gunnar

    --
    Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln