CSS - unterschiedliche Interpretation von Divs/Ebenen - IE und FF

[otschkok77]

So sollte es aussehen:

Überschrift
Bild

Die Überschrift überlappt das Bild ein bischen. Nur sollte die Schrift das Bild überlagern und nicht drunter verschwinden.

In Firefox überlagert die Schrift das Bild so wie es sein soll. Im IE dagegen wird die Schrift einfach an der Bildkante abgeschnitten.

Durch position relative konnte ich erreichen das Firefox die Schrift ebenfalls abschneidet aber ich habe es nicht hinbekommen das bei beiden Browsern die Überschrift das Bild überlagert.

Ps. Die Überschrift befindet sich im Container Div

.container {
    padding: 0 60px;
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
    }
    #header-image {
        padding: 0;
        overflow: hidden;
        }
       
        #header-image img {
            padding: 0;
        }

Das ist der HTML Code

<div class="container">
            <div id="title">
                                    <h1 id="logo"><a href="[URL="http://www.html.de/view-source:http://ghostsinger.de/testblog/"]http://testblog/[/URL]" title="Another wordpress theme">Wordpress Blog</a></h1>
                    <h2 id="tagline">Another wordpress theme</h2>
                            </div><!--#title-->
            <div id="header-image" class="container">               <img src="[URL="http://www.html.de/view-source:http://ghostsinger.de/testblog/wp-content/themes/money-blog/images/default-header.png"]http://default-header.png[/URL]" alt="" height="300" width="1068">
            </div><!--#header-image-->

Ich hoffe jemand versteht mein Problem.

 

[mustang]

schau dir mal z-index an. das könnte dein problem vielleicht lösen.
eine andere variante wäre einfach dem div "title" das bild als hintergrundbild zu geben und dann die überschrift h1 mit css entsprechend im div zu positionieren.

 

[otschkok77]

Danke für den Hinweis. Mit z-index konnte ich leider keine Veränderung bewirken. Hab verschiedene Werte ausprobiert und es hat sich nichts geändert.
Deine andere Idee ist gut aber es hat sich leider was an der Sachlage verändert.

Das komische ist, es scheint nicht am Bild zu liegen. Ich habe das Bild per CSS weiter nach unten verschoben und die Schrift war trotzdem unten abgeschnitten.

Woran kann das denn liegen ? *amkopfkratz*

 

[threadi]

z-index wirkt nur auf Elemente deren position-Wert ungleich "static" ist.

Im übrigen würde ich sowas eher mit einem Hintergrundbild lösen.

 

[otschkok77]

Wie gesagt die Idee mit dem Hintergrund ist gut aber wie in Post #3 beschrieben scheints an was anderem zu liegen.

 

[struppi]

Wozu soll das DIV um das Bild gut sein? Das ist überflüssig.

Dann ist die Frage, von welchem IE du überhaupt sprichst? In meinem (IE7) sieht das ganze genau so aus, wie im Firefox. Insofern ist es eigentlich schwer sich überhaupt mit deiner Frage zu beschäftigen, da dein Problem gar nicht ersichtlich ist.

 

[otschkok77]

Wozu soll das DIV um das Bild gut sein? Das ist überflüssig.

Dann ist die Frage, von welchem IE du überhaupt sprichst? In meinem (IE7) sieht das ganze genau so aus, wie im Firefox. Insofern ist es eigentlich schwer sich überhaupt mit deiner Frage zu beschäftigen, da dein Problem gar nicht ersichtlich ist.

Vielen Dank für eure Mithilfe. Das Problem scheint leider woanders zu liegen. Ich habe einen Mod gebeten das Thema zu schließen und werde ein neues mit passendem Eingangsposting erstellen damit es hier nicht zu unübersichtlich wird.