Problem mit IE beim Überlappen zweier DIV Bereiche

[ccisco]

Hallo!

Ich habe ein Problem mit dem Internet Explorer.
Erstmal ein bisschen Code zur Erklärung:

html-Datei:

<div id="header1">...BILD...</div>
<div id="header2">...LINKS...</div>

css-Datei:

#header1 {
margin:0 auto 0 auto;
background-color:#f77311;
width:600px;
height:292px;
}

#header2 {
border:solid 1px black;
margin:-50 auto 0 auto;
background-color:#f73711;
text-align:center;
line-height:120px;
width:100%;
height:77px;
}

Bei Safari, Firefox und Opera sieht das Ganze so aus, wie es aussehen sollte. (siehe bild1.jpg)

Beim Internet Explorer ist der div-Bereich, in dem sich die Links befinden VOR dem Bild, das heisst in dem Fall sind die Füße abgeschnitten.

Dazu zwei Fragen:

1. Wie kann ich das IE-Problem lösen?
2. Gibt es evtl. eine Möglichkeit das ganze etwas eleganter zu lösen?

Das mit der "line-height" stört mich auch. ich will, dass die Links einfach am unteren Rand des header2-div-Bereichs positioniert werden.

Vielen Dank für's durchlesen und helfen schon mal im Vorraus!

 

[dms]

Entweder mit z-index arbeiten oder das Element relative/absolute positionieren. positionierte Elemente haben im IE einen Sonderstatus (=Bug) sodass sie immer vorne liegen.

 

[ccisco]

Wenn ich den div-Bereich des Bildes mit position:relative; beschreibe ist das Bild zwar im Vordergrund, allerdings auch die Hintergrundfarbe. Es handelt sich aber um ein transparentes png-Bild, die Füße sollten also freistehen, was bei firefox/safari/opera auch soweit funktioniert. z-index funktioniert gar nicht.
Der IE treibt mich noch zum Wahnsinn...