Toni: Layoutfehler in IE

Beitrag lesen

Genau das meinte ich. Anscheinend kann man nicht klicken weil die Inhaltsbox darüber liegt.

Hola Christoph!

So, das hat mich jetzt wunderbar vom lernen abgehalten und gelernt hab ich auch noch was dabei.

Der Fall: 2 divs, Navigation und Inhalt, beide relativ positioniert; die Navigation floatet außerdem :left und soll im Vordergrund auf dem Inhalt liegen; das ist mittels z-index angegeben. Problem: Opera zeigt die Navi im Hintergrund, Links sind nicht klickbar.

Genau das meinte ich. Anscheinend kann man nicht klicken weil die Inhaltsbox darüber liegt.

Zum Opera 7.23: Ich hab dem div.inhalt einen giftgrünen Hintergrund verpasst. Deine Vermutung, das es über div#navleft liegt war richtig.

Als Nächstes:  Schrittweise alle anderen Selektoren aus den CSS entfernen und nach jedem Löschen im Browser angucken. Die Seite sieht immer furchtbarer aus, aber div#navleft bleibt im Hintergrund.

Dann lösche ich nach und nach die CSS-Eigenschaften aus div.inhalt und div#navleft. Dabei lasse ich position:relative und z-index unangetastet, denn die will ich ja schließlich haben. Als float:left dran ist verschwindet der Fehler logischerweise, deshalb bekommt div#navleft ein top: 100px;. Blick in den Browser und Bingo: Opera zeigt die Navigation im Vordergrund. Hasta la victoria siempre! (Hier ist diese Debugging-Methode beschrieben: http://www.positioniseverything.net/articles/mys-bug.html).

Das float wieder einfügen und der Fehler kehrt zurück. Außerdem ignoriert Opera die top-Angabe. Float und Position scheinen sich nicht zu vertragen. Ich lösche munter weiter, bis das nicht mehr geht, ohne daß der "Fehler" verschwindet. Außerdem sind sich Opera, Mozilla und IE jetzt einig, was ich als Fortschritt werte: Alle zeigen div.inhalt im Vordergrund und der Text floatet um die nicht sichtbare Navigation. Folgendes bleibt übrig:

div#navleft {
         float: left;
         width: 200px;
         background-color: #00f;
         }

div.inhalt {
         position:relative;
         background-color: #0f0;
         }

Die beiden divs werden wie gewünscht angezeigt, wenn:

Man div#navleft relativ positioniert und mittels z-index nach vorne bringt

oder

man div.inhalt nicht positioniert.

Nicht überraschend. Die Browser verhalten sich unterschiedlich, wenn man dem Navigationsdiv position+z-index u n d float zuweist.

Frage an die kenntnisreichen Menschen hier: Richtig gedacht?

Ein Besuch beim W3C enthüllt: Positioning ist ein komplexes Thema, von dem ich vorerst die Finger lasse. Vermutung: Verschiedene Arten der Positionierung kann man alternativ, aber nicht zusammen verwenden. Ich bleibe bei meinen Floats, und dasselbe rate ich Dir, mit Verlaub, auch. Du kannst Dein Layout leicht damit verwirklichen und Dir ein lockeres Leben machen. Dein guter Freund margin hilft Dir dabei (http://www.positioniseverything.net/articles/float-theory.html). Ich habe ehrlich gesagt gar nicht kapiert, wozu Du position-Angaben verwendest; laß sie einfach mal weg (hab´s ausprobiert, funktioniert). Ein schöner Nebeneffekt: Der IE stellt die Links mit dem richtigen Hintergrund dar. Frag mich bitte nicht warum, ich wüsste es selber gern.

Was mir noch aufgefallen ist: Ich glaube in deinen Stylesheets gibt es einige überflüssige Angaben; allerdings habe ich das jetzt nicht im Einzelnen nachvollzogen. Vielleicht ist es nützlich, wenn Du aus den drei Dateien eine machst. Ansonsten bitte das Forum doch mal um
allgemeine Kritik an Deiner Seite. Ich bastele selber an meiner ersten und kann Dir da nicht viel sagen (semantisches Markup, Metaangaben...).

Danke für das Lehrstück; ich hoffe ich konnte Dir helfen.

Saludos
Toni

P.S.: Ich hab mich nicht gerade kurz gefaßt. Sry dafür.