z-index wird nicht korrekt ausgeführt

Status
Nicht offen für weitere Antworten.
B

ByeBye 230875

Hallo zusammen

Ich bin gerade dabei eine neue Internetseite zu erstellen und habe das Grundgerüst fertig.

Nun wird im FF 3.01 und Konqueror 3.5.9 die Menüleiste korrekt angezeigt (Horizontales Aufklappmenü bei Maus über "Saison"), während Opera 9.52, IE7 und IE 6 das Menü unter den Textbereich blenden, obwohl z-index: 500 das Menü ganz in den Vordergrund rücken sollte.

Ich verstehe es nicht. Kann jemand bitte helfen? Es ist ein kostenfreies Projekt - ich verdiene kein Geld damit.

Danke

http://ehdb.familieschott.de/

http://ehdb.familieschott.de/css/ehdb.css

Andy

Edit: Mit z-index in id="top" zeigt jetzt der IE6 alles richtig an.

Nur IE7 und Opera wollen noch nicht.
 
Zuletzt bearbeitet von einem Moderator:
Wenn dir die Reihenfolge des Textes in einem Css-freien Design (wie z.B. bei Textbrowsern) egal ist, dann schreibe in dein HTML zuerst den div der ganz unten seien soll und danach die darüberliegenden.
Der Browser zeigt zuerst den ersten, der zweite ist dann vom z-index automatisch höher, der dritte noch höher usw.
 
Hi,

hast du das Problem mitterweile behoben? Denn bei mir wird in den genannten Browsern die Schichtposition wie gewünscht ausgeführt.

mfg Maik
 
Ja ich habe es mittlerweile behoben

Durch Entfernen von position: absolute in content wird das Menü angezeigt, aber: dadurch wird die Position von Content im IE falsch berechnet. Die Box ist keine 300 pc unter dem Menü, wie in allen anderen Browsern - der IE6/7 scheint das zu ignorieren..

Any hints?

Danke

Andy
 
Wende hier mal eine Positionierung an:

Code:
#content {
position:absolute;
top:300px;
margin-left: 100px;
width: 85%;
background: #ffff77;
color: #000;
}
mfg Maik
 
Danke, aber das hatte ich vorher. Dann wird content richtig angezeigt, aber die Menüpunkte verschwinden unter der Contentbox.

Andy
 
Definier mal für #header die gewünschte Schichtposition, da in ihm das Menü eingebunden ist:

Code:
/* container */
#header {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100px;
background: #ffff88 url(../images/topbg.jpg) center center repeat-x;
z-index:501;
}

mfg Maik
 
Vielen Dank - das wars.

Nun sieht die Seite in allen Browsern, die ich habe identisch aus.

Andy
 
Status
Nicht offen für weitere Antworten.
Zurück