Problem mit Layout seitFF3

[bennihaag]

Hallo,

seit dem letzten Update von Firefox2 auf Firefox3 ist auf dieser Seite das div, welches den Text enthält, unter das Bild (die blassen Notenzeilen) gerutscht, welches in einer Tabellenzelle steht.

Eigentlich soll das Text-div sich über dieses Bild legen; so war es auch noch unter Firefox2.xx und ist es im z.B. Internet Explorer7 aber auch IE8.


Leider kann ich den Fehler nicht finden; erst dachte ich an irgendeinen simplen Code-Fehler, die FF-Fehlerkonsole spuckt aber nichts aus.
Hat jemand eine Idee, woran es liegen könnte?
Danke schonmal für eure Hilfe...

 

[ToM80]

Ohne mir den Code angeschaut zu haben, arbeitest du mit z-index Angaben?

 

[bennihaag]

ja, in dem Fall habe ich dem "Text-div" einen z-index von 1 zugewiesen.

 

[ToM80]

versuch mal mit z-index eine andere überlagerung zu erreichen, vllt. löst das ganze schon dein problem.
geh dabei ruhig erstmal grob mit z-index 10 | 100 | 1000 | 10000 vor um die ebenen von einander zu trennen.

EDIT: Ich hab mir jetzt gerade mal deine Seite angesehen, ich dachte bislang die Grafik würde den Text überlagern, tut sie aber nicht. Meinst du dass der Text ein paar Zeilen nach unten gerutscht ist?

 

[bennihaag]

zu ToM80´s Edit:
ja genau das ist mein Problem. Das Text-div sollte die Grafik überlagern. Leider aber rutscht das div unter (im Sinne von paar zeilen unter) die Grafik.
Danke für deine / eure Hilfe...

 

[ToM80]

Sehr verworrener Quelltext. Nur mit DIVs zu arbeiten würde dir das Leben erleichtern ;-)
Ich würde mal versuchen sowohl die Grafik als auch den Text in ein DIV zu packen. Den DIV-Text gibst du dann einen höheren Z-Index als dem Bild-DIV.

 

[bennihaag]

danke...
hab ich hier versucht, hat aber nur zur Folge, dass der Text-div die Grafik "umspielt". Da jedoch das bild-div größer ist als das bild selbst, überlappt inzw. das text-div das bild-div schon. aber leider nicht da, wo die grafik ist.

 

[ToM80]

Versuch es mal mit Absoluter Positionierung, dann kannst du die divs übernanderlagern

 

[anna55]

Mich irritiert, dass die Seite keinen Doctype hat.

Ich hab jetzt nur mal im FF3 probiert live im CSS zu spielen. Zusätzlich ein

margin-top:-1px;

posititioniert den #layer3.
Nimm doch mal z-index und position raus, ob's dann auch reicht.

 

[bennihaag]

danke für eure Tipps.

Habe einiges rumprobiert, erreiche aber leider nicht das, was ich will.
Aktuell habe ich folgenden Code ((hier online zu sehen); bei dieser Version aber überblendet leider die Grafik den Text; immerhin aber liegt das Text-div über der Grafik:

<div style="border:0px solid #000000; width: 529px; position: absolute; padding: 0px; margin: 0px; z-index: 10;" align="right"><img border="0" src="images/header-links.jpg" width="329" height="286" align="right" hspace="0" style="z-index: 10;"></div><div style="border:0px solid #000000; width: 521px; z-index: 1000; margin-top:-1px; padding-left: 0px; left: 1px; right: 0px; top: 0px">Textdiv</div>

 

[ToM80]

ich hab eben hin und herprobiert, ich gebs auf, finde keine lösung. hab jetzt aber auch keine lust alles auf divs zu trimmen.

allerdings ist mir aufgefallen, dass dein quelltext zum ende hin nicht mehr stimmt. da beginnen auf einmal 1, 2 andere html seiten und dann endet das ganze ohne </body></html> da ist auch noch der wurm drin.

 

[anna55]

Das nennt man Div-Suppe, was Du da veranstaltet hast. Du hast z-index mit 1000 angegeben, aber kein position:relative. Ohne positon hat z-index keine Auswirkung.

 

[ToM80]

Wieso position relative? Bei z-index muss doch absolute gesetzt sein, was er auch hat, oder?

Edit: Ich nehm alles zurück. Dass er in dem DIV kein position hat hab ich übersehen. und mit relative funktionierts auch, wieder was gelernt

 

[bennihaag]

danke euch beiden für die hilfen...

<div style="border:0px solid #000000; width: 529px; position: absolute; padding: 0px; margin: 0px; z-index: 1;" align="right"><img border="0" src="images/header-links.jpg" width="329" height="286" align="right" hspace="0"></div><div style="border:0px solid #000000; width: 521px; z-index: 1000; position:relative; margin-top:-1px; padding-left: 0px; left: 1px; right: 0px; top: 0px">Textdiv</div>

(hier online)

Damit funktioniert das jetzt im FF3 und IE8. Leider in den älteren IEs (7,6,...) nicht - da überdeckt das div mit der Grafik den Rahmen der Zelle.
Da ich vermute, dass das das berühmte Internet Explorer-"Problem" ist, ist meine einzige Möglichkeit wohl nur, hier mit einer Browserweiche zu arbeiten.

btw: Der Fehler am Ende der Seite (wo innerhalb von <html> nochmal eine neue seite aufgemacht wurde) kam dadurch, dass ich eine für sich eigenständige seite per include() geladen hatte; macht aber natürlich keinen sinn, is auch geändert...

Was mich aber bei der ganzen Sache schon sehr stutzig macht: was veranlasste jetzt auf einmal den neuen Firefox3, das Design "umzuwerfen"?!

 

[anna55]

Damit funktioniert das jetzt im FF3 und IE8. Leider in den älteren IEs (7,6,...) nicht - da überdeckt das div mit der Grafik den Rahmen der Zelle.

Deine beiden Divs sollten eine identische width-Angabe haben, also für beide 529px schreiben.

Was mich aber bei der ganzen Sache schon sehr stutzig macht: was veranlasste jetzt auf einmal den neuen Firefox3, das Design "umzuwerfen"?!

Ich vermute mal, der neue FF setzt einige W3C-Standards genauer um. Und Dein Konstrukt aus Tabelle und Divs ist schon sehr gewagt.

Außerdem - Tabellen werden zu Layoutzwecken nicht mehr verwendet, was ToM80 ja auch schon hat anklingen lassen.
Vielleicht machst Du Dich ja mal an eine Umstellung, Gründe dafür findest Du einige, wenn Du mal die Suche bemühst, hier ein Link:
CSS- contra Tabellen-Layout, Vorteile und Nachteile von div und table

 

[bennihaag]

upps, genau an den unterschiedlichen Breiten der beiden Divs hats jetzt noch gelegen.

Ihr habt recht, das ganze is mehr oder wenig hingestopselt; bei Gelegenheit werde ich das Layout nur mit divs aufziehen. Denn der nächste Firefox kommt bestimmt

Tausend Dank für eure Hilfen!!!