margin: 0 20% 0 auto; IE und Safari reagieren seltsam

[Mel]

Hallo liebes Forum,

ich habe hier folgende Konstruktion:

html:
<div id="wrapper">
--eine Menge inhalt--
</div>

css:
div#wrapper {
width: 780px;
margin: 0 20% 0 auto;
border: green 1px solid;
}

Der Container sollte nicht ganz seitenmittig ausgerichtet sein sondern einen flexiblen Abstand seitlich haben.
Opera und FF machen das so wie gewünscht. Der Safari schiebt gleich den gesamten Container links aus dem Viewport heraus, das ist nicht so der Hit.
Der IE erzeugt ziemlich rasch einen horizontalen Scrollbalken, lässt also zum rechten Rand hin einen bestimmten Abstand. Eine Live-demo kann ich auf die Schnelle leider nicht bieten habe aber die Hoffnung dass der eine oder andere dieses Phänomen vielleicht kennt und einen tipp hat?

Vielen Dank schonmal,
Melanie

[Schorsch]

Salut

Wenn ich mich nicht irre behält der IE die breite von 780px, während die brauchbareren Browser das Margin von 20% zur Breite dazuaddieren.
Box-Model heisst das Stichwort dazu.

Gruss
Schorsch

[Danny]

Hi Mel,

versuche mal

html, body {
 overflow: hidden;
}

Damit sollte es auch im IE funktionieren...

Gruß

• Danny

[Mel]

Hallo,

ja das kenne ich aber damit lasse ich die Scrollbalken ja für immer komplett verschwinden, das möchte ich aber nicht.

vg melanie

[Candid Dauth]

Heißa, Mel,

css:
div#wrapper {
width: 780px;
margin: 0 20% 0 auto;
border: green 1px solid;
}

Ich verstehe nicht so ganz, was du damit bezwecken willst, und in wiefern sich dein Vorhaben von einer Angabe wie
margin:0 20% 0 0;
unterscheidet. Kannst du das mal genauer erläutern?

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Candid Dauth]

Heißa, Mel,

Ich verstehe nicht so ganz, was du damit bezwecken willst

Quatsch, natürlich verstehe ich das, hab heute irgendwie zu wenig getrunken (Wasser!) und kann deswegen nicht richtig denken.

Also wenn du das Elternelement mitbenutzt oder ein zusätzliches einbaust, kannst du auch gleich noch ältere IEs als Version 6 miteinbinden.

  
<div id="wrapper1">  
  <div id="wrapper2"></div>  
</div>  

Für den IE bekommt jetzt #wrapper1 ein text-align:right, damit der Inhalt drinnen rechts ausgerichtet wird (margin-left:auto wird dadurch imitiert). Für #wrapper2 wird die falsche Textausrichtung durch text-align:left wieder aufgehoben. #wrapper2 bekommt auch die 20% ins margin-right.

Im Safari/Konqueror musst du schlicht und einfach max-width statt width verwenden, dann verkürzt er das Element auch, wenn es nicht mehr ins Browserfenster passt.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Candid Dauth]

Heißa, Mel,

Und, zum Dritten: ;-)

Also wenn du das Elternelement mitbenutzt oder ein zusätzliches einbaust, kannst du auch gleich noch ältere IEs als Version 6 miteinbinden.

Wie ich gerade so nebenbei bemerke, behebt das das Problem ja gar nicht. Ich ziehe also meine Lösung für den IE zurück und tue so, als hätte ich dir nur die für Safari angeboten. ;-)

Gautera!
Grüße aus Biberach Riss,
Candid Dauth