Safari 2.0 Positionierungsproblem von DIVS

[nbspBernie]

Hallo ihr Apfeluser

Also folgendes:
Ich erstelle für einen Kunden eine Seite.
diese Seite ist durch eine Tabelle aufgeteilt in header - content - footer.
Innerhalb der Spalte content möchte ich verschiedene Divs frei positionieren (was in anderen brwosern funktioniert)

ich habe also der spalte für den content im stylesheet position:relative gegeben, da normalerweise elemente innerhalb dieses element dann normalerweise mit position: absolute frei positioniert werden können, und das im verhältnis zum elternelement welches relative gestzt ist (in meinem fall die sspalte für den content.)

im safari funzt das bei mir nicht, er positioniert alles im verhältnis zum Bildrand.

kann mir jemand helfen ?

Viele Grüße

 

[stk]

Moin,

lass doch mal sehen die Konstruktion. Klingt mir etwas obskur.

Gruß Stefan

 

[Der Jan]

Moin Bernie!

Absolute Positionierungen beziehen sich immer auf die obere linke Ecke des Browsers. Relative auf das übergeordnete Element.
Genau den Fall hatte ich noch nicht, aber Safari ist bei weitem nicht so nachsichtig wie beispielsweise Firefox was Fehler angeht. Kann sein, dass andere Browser das anders intpretieren.

Aber das hat jetzt auch ein bisschen etwas von einem Ratespiel: Ein kleines Codebeispiel und Dir wird sicherlich besser geholfen werden können.

Grüße
Jan

 

[nbspBernie]

ok, also grob siehts so aus:

<table>
<tr><td>header</td></tr>
<tr><td style="position: relative">

<!-- alle divs hier sollen absolut in dieser zelle positioniert werden -->
<div style="position: absolute; left: 10px; top: 10px;">test</div>

</td></tr>
<tr><td>footer</td></tr>
</table>

 

[stk]

Moin,

aua, das tut ja weh

Als erstes: wenn Du schon CSS einsetzt, was ich löblich finde, dann solltest Du es konsequent tun. Sprich: die Tabelle brauchst für header etc. überhaupt nicht. Besser wäre da eine Konstrukt a la:

<div id=header>Hier kommt der Header rein</div>
<div id=content>Da hängen wir gleich die Boxen rein</div>
<div id=footer>Das macht die Seite fertig ;-)</div>

Zum zweiten hast da noch ein kleines Verständnisproblem von relativ und absolute und was sich zu wem wie verhält. Wenn Du ein Element relativ zum Elternelement positionieren willst, mußt Du das position: relative natürlich zum Kind und nicht zu den Eltern schreiben! Und umgekehrt für ein position: absolute (beim Kind) dazu das sich nicht am Elternelement, sondern am Browserfenster ausrichtet. Alle Browser die das anderes machen, machen es falsch.

Gruß Stefan

 

[nbspBernie]

1. Dein Div-Header und Div-Fotter zeug wird schwer möglich sein, da die gesamte seite immer zentriert sein soll.
2. guckst du hier (selfhtml):

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat.

->darum beim elternelement >relative<

relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.

3. Safari ist der einzige brwoser ders anders macht. Firefox machts auch richtig (ie will ich in nem mac forum mal lieber nicht erwähnen)
..Firefox machts genauso wies laut selfhtml sein soll, safari nicht

mfg

Bernie

 

[Der Jan]

Um Layer mittig zu zentrieren einfach einen Layer auf 100% setzen und in diesem dann alles zentrieren:

<div style="text-align:center">
<div style="margin:auto;text-align:left">
    Layerinhalt
</div>
</div>

Tabellen haben die unangenehme Angewohnheit im Browser erst dann angezeigt zu werden, wenn ihr Inhalt komplett geladen ist. An den Ladezeiten ändert sich zwar nicht viel, aber die Seite wirkt wesentlich behäbiger.

Das Beispiel auf der Selfhtml-Seite über die Positionierung von CSS-Elemente von der Du den Text kopiert hast, sieht in Safari und Firefox identisch aus. Ausser dass Safari die rote Box mit dem z-Index: -3 ganz nach unten packt und man nur noch den unteren Rand sieht. Ich behaupte einfach mal, dass das so gewollt ist, da der Box Acid Test 2 massiven Einsatz vom z-index macht und Safari bzw. khtml der einzige Browser ist, der ihn besteht.
Ausserdem ist das ja nicht das eigentliche Problem.

Vielleicht liegt es ja daran, dass absolute Elemente aus dem Textfluss heraus genommen werden, um andere Elemente nicht zu beeinflussen. Ich habe gerade mit 2 verschachtelten Layern mit absoluten sowie relativen Positionierungen herumgespielt (war interessanter als Mechanikaufgaben rechnen) und Safari und Firefox haben immer identische Ergebnisse geliefert. Ob das Tabellenkonstrukt nun von Safari falsch und von allen anderen richtig interpretiert wird oder es sich andersrum verhält, wage ich nicht zu beurteilen. Der Box Acid Test spricht aber eher für Safari.

Also entweder komplett auf Layer umstellen oder ganz drauf verzichten und die Tabellenzellen entsprechend anpassen.

 

[stk]

Moin,

1. Dein Div-Header und Div-Fotter zeug wird schwer möglich sein, da die gesamte seite immer zentriert sein soll.

Wenn Du von HTML und CSS keine Ahnung hast, dann lass es lieber.

2. guckst du hier (selfhtml): …

Wenn Du nur lesen kannst, aber nix verstehst, dann lass es lieber.

3. Safari ist der einzige brwoser ders anders macht.

Wenn Du nicht weißt wie eine korrekte Renderingengine arbeitet, dann lass es lieber.

Gruß Stefan

 

[turncoat]

Das Beispiel auf der Selfhtml-Seite über die Positionierung von CSS-Elemente von der Du den Text kopiert hast, sieht in Safari und Firefox identisch aus. Ausser dass Safari die rote Box mit dem z-Index: -3 ganz nach unten packt und man nur noch den unteren Rand sieht. Ich behaupte einfach mal, dass das so gewollt ist, da der Box Acid Test 2 massiven Einsatz vom z-index macht und Safari bzw. khtml der einzige Browser ist, der ihn besteht.
Ausserdem ist das ja nicht das eigentliche Problem.

Die letzten Opera-Previews habens auch geschafft.

 

[Der Jan]

Asche über mein Haupt.
Du hast natürlich Recht.