Detlef G.: (IE) Positionierungsproblem

Beitrag lesen

Hallo Andreas,

ich werde dmal ein wenig durcheinander zitieren.

Auf dieses position:absolute reagiert der IE aber damit, daß beide Navigationslisten verschwinden ...

Naja, der IE hat oft sehr andere Vorstellungen als andere Browser, wo ein
absolut positioniertes Element angezeigt werden sollte, wenn keine Angaben
zu left oder right und zu top oder bottom gemacht werden. Vielleicht
verschluckt er sich dabei auch völlig, so dass dein zweites Menü dabei auch
im Nirvana landet.
Außerdem lässt er gern Inhalte in der Nähe von gefloateten Elementen weg.

ich bastel gerade an einer Seite - funktioniert auch in meinen Browsern (Firefox und Opera) so, wie ich will.

Wobei ich nicht wirklich verstehe, warum das in diesen Browsern klappt.

In Firefox und Opera sitzt die Haupt-Navigation ("Startseite" ... "Galerie" - die Links funktionieren nicht!) links vom Inhalt wie gewünscht und fängt in etwa auf gleicher Höhe an wie der Inhalt (fine-tuning kommt noch)

Die Hauptnavigation befindet sich hinter dem Content im Quelltext und ist
mit position:absolute versehen, ohne Angaben zur Position selbst. Warum
diese nun genau an der von dir gewünschten Stelle positioniert wird,
verstehe ich nicht wirklich, ich hätte eher top:0 left:0 angenommen.

IE setzt die Navigation zwar auch an den linken Rand, aber läßt sie erst unterhalb des Inhalts beginnen.

Wo sollte sie mit position:static auch sonst erscheinen, der Platz darüber
wird doch durch margin-left: 12em; von #content blockiert.

Wozu dient eigentlich float: right; von #content ohne Angabe zu width?
Es dürfte nichts nützen, ohne width und ohne margin-right nimmt es die
ganze Breite. Mit width ist es nicht flexibel, width: 100%-12em; gibt es
nicht und mit margin-left wird der Platz daneben trotzdem blockiert.

Das einzige, was mir jetzt noch einfällt, wäre, nur für den IE das Ding absolut zu positionieren - aber das macht andere Probleme, siehe unten.

Wieso nur für den IE?
Nur für den IE ist position extra wieder auf static gesetzt.

Gibt es eine andere Lösung, ohne die Reihenfolge im Quellcode zu verändern und ohne zusätzliche Elemente?

Meines Wissens nicht wirklich.
Es wäre bei fester Breite für #content möglich.
Oder, wenn h1 nicht umbrechen kann, also eine feste Höhe hat.

Du kanns z.B. die Floats rausnehmen, position:static für IE ebenfalls, und
die Definition für die Hauptnavigation folgendermaßen:

#Hauptnavigation  
{  
  width:10em;  
  position:absolute;  
  height:20em;  
  left:60px;  
  top:8em;  
}  

Oder, du schließt #content erst hinter der Hauptnavigation, auch die Floats
raus, wie auch position:static, dann bekommt #content position:relative und:

#Hauptnavigation  
{  
  width:10em;  
  position:absolute;  
  height:20em;  
  left:-12em;  
  top:0;  
}  

Ich habe das alles allerdings nicht umfassend getestet.

Auf Wiederlesen
Detlef

--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!