✔ Rechter Bereich wird nach unten gedrückt

[Maik]

Hi,

ich hab dem IE6 sein "Rechenproblem" nun in vollen Zügen durchschaut ;-)

Das DIV #right gehört erstmal relativ positioniert, damit die absolute Positionierung von #right_margin für seine Grenzen, und nicht für die des body-Elements gilt (vergleiche hierzu auch meinen zuletzt gezeigten Quellcode), denn derzeit zentriert der IE6 die Box bei dir in der vertikalen Mitte des Browserfensters, und die befindet sich nunmal bezogen auf deinen Seitenentwurf weiter oben.

Die dann noch übrig bleibende Verschiebung nach oben zum Header resultiert aus der margin-bottom:15px-Deklaration für #content und #right, die vom IE6 verdoppelt wird. Vergleiche hierzu einfach mal den (gleichgesetzten) oberen und unteren Abstand vom DIV #content anhand seiner Scrollleiste zwischen dem Header- und Footerbereich.

 

[WIK-Lars]

Ok, ich hab's jetzt erst mal so gemacht, en #right-Bereich also relativ positioniert.
Das Ergebnis wäre bis auf die Tatsache, dass der Footer im IE 6 nach unten rausgedrückt wird, soweit akzeptabel. (Macht der das, weil das margin-bottom und -top: 15px; vom #content an #right 'vererbt' wird? *dummfrag ).

By the way: wieso bekomm' ich eigentlich das Bild innerhalb des Kastens nicht mit vertical-align:middle; vertikal mittig ausgerichtet? Hab da schon so mehrere Versuche gestartet.

 

[Maik]

Ich hab dir doch heute Morgen mitgeteilt, dass der IE6 die margin-bottom:15px-Angabe für die beiden DIVs #content und #right verdoppelt, und somit bei beiden Elementen der Abstand zum Footer 30 Pixel beträgt. Es liegt hier also kein "Vererbungsproblem" vor. Wie auch, wenn das DIV #right kein Nachfahre-, sondern ein Nachbarelement des DIVs #content ist.

Ergo: Für den IE6 müssen die margin-bottom-Werte der beiden Elemente halbiert werden, damit er den gewünschten Außenabstand nach unten einhält.

Die vertical-align:middle-Eigenschaft lässt sich nur auf Tabellenzellen, oder auf Elemente mit der display:table-cell-Deklaration anwenden, dieser display-Eigenschaftswert wird vom IE6 aber nicht unterstützt.

Und dass der IE6 ein Grafikelement mittels der line-height-Eigenschaft nicht vertikal zentriert, hab ich dich in diesem Thread auch schon darauf hingewiesen.

 

[WIK-Lars]

Die vertical-align:middle-Eigenschaft lässt sich nur auf Tabellenzellen, oder auf Elemente mit der display:table-cell-Deklaration anwenden, dieser display-Eigenschaftswert wird vom IE6 aber nicht unterstützt.

Und dass der IE6 ein Grafikelement mittels der line-height-Eigenschaft nicht vertikal zentriert, hab ich dich in diesem Thread auch schon darauf hingewiesen.

Quiet korrekt, hast Du! Aber irgendwie muss ich meine Images doch auch im IE 6 zentriert bekommen. Ich könnte da in das rechte Fenster natürlich auch noch eine Tabelle zum Ausrichten reinbauen, aber dann würde ich ja quasi auf das längst veraltete Tabellendesign zurückgreifen. Und ich wollte doch mal ganz fortschrittlich ausschließlich CSS benutzen! ;-)

 

[Maik]

Hi,

wie sich ein Element in seinem Anzeigebereich vertikal zentrieren lässt, habe ich dir in diesem Thread doch schon vorgestellt.

Also, wieso wendest du dann nicht einfach diese Technik auf das Grafikelement an?

Etwas mehr mitdenken darfst du ruhig auch mal.

 

[WIK-Lars]

Mit Verlaub, selbstverständlich versuche ich, mitzudenken!

Hm, irgendwie habe ich Deinen Code für #right_margin ja auch noch nicht durchschaut, oder bin mir zumindest nicht ganz sicher, ob ich ihn durchschaue - außer, dass ich natürlich weiß, dass er funktioniert.

#right_margin {
margin-top:-207.5px;
height:415px;
position:relative !important; /* Für moderne Browser (FF, IE7, Opera & Co.) */
position:absolute; /* Für IE6 */
top:50%;
right:0;}

Also height ist klar, die absolute Höhe, die ich haben möchte. top:50% drückt die 415px große Box um 50% (von right?) nach unten. margin-top:-207.5px; zieht sie quasi um die Hälfte wieder hoch? Wofür ist right:0? position:relative bedeutet, dass sowohl margin-top als auch top relativ zum drüberliegenden right ausgerichtet werden? IE 6 kann mit relativer Positionierung nicht und bekommt deswegen eine absolute Positionierung (das würde aber doch bedeuteten, dass hier margin-top und top absolut auf die gesamte Seite bezogen werden?). Habe ich den Code richtig interpretiert?

Sorry, dass ich nochmal so genau nachfrage. Aber wenn ich's erst einmal richtig verstanden habe, bin ich wieder einen Schritt weiter.

Im übrigen stimmt es zwar, dass im IE 6 bei Änderung der margin-bottom-Werte, die Footerleiste wieder korrekt angezeigt wird. Dafür wird aber die blaue Box zerschossen. Guckst Du hier

 

[Maik]

Bevor du hier irgendwelche Behauptungen aufstellst, solltest du vorher deinen Code genauer anschauen und auf mögliche syntaktische Fehler überprüfen:

#right_margin { /*margin: 0px 10px;*/
margin-top:-207.5px;
height:415px;
position:relative; !important /* Für moderne Browser (FF, IE7, Opera & Co.) */
position:absolute; /* Für IE6 */
top:50%;
right:0; }

Das verschobene Semikolon hat nämlich zur Folge, dass der IE6 das Element nun relativ positioniert, und wegen dem "leerstehenden" !important die darauffolgende CSS-Eigenschaft, in diesem Fall position:absolute, nicht liest.

Eine relative Positionierung des Elements führt aber im IE6 dazu, dass die übrigen sieben Hintergrundgrafiken der Box nicht angezeigt werden, mit der absoluten Position hingegen tritt der Fehler nicht auf, weshalb ich diese Unterscheidung der Positionsart vorgenommen hatte.

Damit der IE6 die absolute Positionierung nicht auf das Browserfenster, sondern auf das DIV #right bezieht, habe ich dich doch erst vorgestern Morgen im ersten Absatz meines Beitrags darauf hingewiesen, selbiges relativ zu positionieren.

Soviel zum Thema "Mitdenken".

Zur Technik der Positionierung:

Mit top:50% wird der obere Rand des Elements in der vertikalen Mitte des Anzeigebereichs positioniert, das Element sitzt somit außermittig nach unten verschoben, und wird mit Hilfe von margin-top:-207.5px um die Hälfte seiner Höhe nach oben verrückt, damit es in der vertikalen Mitte des Anzeigebereichs erscheint.

right:0 orientiert sich hier nur an der float:right-Deklaration für #right.


//edit:

#right_margin {
margin-top:-207.5px;
height:415px;
width:100%;
position:absolute; /* Für alle Browser incl. IE6 */
top:50%;
right:0;
}

ersetzt diese beiden Zeilen:

position:relative !important; /* Für moderne Browser (FF, IE7, Opera & Co.) */
position:absolute; /* Für IE6 */