Problem mit IE beim Überlappen zweier DIV Bereiche

Hallo!

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

html-Datei:

css-Datei:

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!

 

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...