IE Problem mit position:absolute

[neuroleptika]

Ja habe ich bereits.

Und das war mehr als ich bisher dachte. :shock:

Ging mir auch so.

 

[gaby]

Der IE sollte keine Probleme haben, wenn das relative positionierte Elternelemnt Layout hat.
Im IE7 ist es durch max-width schon gegeben. Für IE6 muß nachgeholfen werden:

div#Page {
	max-width:950px;
	margin:0 auto;
            position: relative;
}
* html div#Page {
/*z.B:*/width: 900px; 
}

IE-6:
Sollte nicht, hat aber (wenn die #sidebar weiterhin 'position: absolute' behält).

'float' statt 'position: absolute' behebt zwar das Problem der horizontalen Verschiebung im IE-6, nichtsdestotrotz sind beide Varianten ungünstig fürs Design, weil dabei vom Eltern-Element (#page) aus positioniert wird.

Die #sidebar hat aber ein Stück vom blauen Farbverlauf des #header integriert, deshalb muß der obere Teil der #sidebar genau im header positioniert werden können.

Von daher ist es IMO günstiger, #sidebar absolute mit Bezug zum BODY, bzw #header zu positionieren.

 

[neuroleptika]

Ich fasse mein Vorschlag mal zusammen.

hier ist eine feste Höhe in px

div#Wrapper {
	position:relative;
	background-image:url(http://..);
	[COLOR="DarkRed"]height:159px;[/COLOR]
}

#Page habe ich als Ausgangspunkt für die absolute Positionierung gewählt:

div#Page {
max-width:950px;
margin:0 auto;
 position: relative;
}
* html div#Page {
width: 900px; 
}

und #Sidebar nach oben geschoben:

div#Sidebar {
	width:199px;
	background:url(http://...) no-repeat;
	padding-top:119px;
	position:absolute;
	[COLOR="DarkRed"]top:-159px;[/COLOR]
left: 0px;
	margin-left:0;
}

Ich habe es ausprobiert.
Ab IE5 passt das Nahtlos.

Die horrizontale Zentrierung von #page könnte für IE5 - 5.5 mit text-align für body erreicht werden.