Hoshi: IE ... gänzlich anderes verhalten

Moin zusammen,

Ich habe hier ein kleines Problem, bei dem ich selbst nach dem Studium von unzähligen Seiten nicht wirklich rausbekommen habe, ob das grundsätzlich überhaupt machbar ist. Deswegen frage ich einfach mal die Expertenrunde, vielleicht hat ja jemand bereits eine Lösung gefunden.

Folgende Ausgangssituation:
Eine Webseite soll aus drei festen Bereichen bestehen, einem Menue, einer Infobox und dem Seiteninhalt. Die Position all dieser Bereiche wird von der Mitte des Browserfenster aus ermittelt, da die Positionen an ein  Hintergrundbild angepasst werden, welches eine feste Grösse hat.

Im Stylesheet stehen dazu folgende Angaben:

body
{
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-position:top center;

/* Textformatierung etc. dazu denken ;) */

text-align: center;  /\* Zentrierung im Internet Explorer \*/  

}

#Seite
{ text-align: left; /* Und wieder zurück nach links */
margin: 0 auto;
width: 908px;
min-height: 600px;
margin-top: 196px;
border: 1px dashed silver; /* Nur zum testen, auch bei den Folgenden */

}

#Navigator
{
border: 1px dashed green;
display: block;
position: absolute;
left: 50%;
width: 150px;
margin-top: 24px;
margin-left: -452px;
/* float: left; */
}

#Inhalt
{
position: absolute;
left: 50%;
margin-left: -290px;
width: 736px;
margin-top: 60px;
text-align: justify;
min-height: 500px;
border: 1px dashed blue;
}
* html div#Inhalt { height: 1em; }

#Info
{
position: absolute;
left: 50%;
margin-left: -170px;
margin-top: 0px;
height: 40px;
border: 1px dashed red;
}

Im HTML-Teil steht das Ganze dann in der folgenden Reihenfolge:

<div id="Seite">
<div id="Navigator">Navi</div>
<div id="Info">Info</div>
<div id="Inhalt">Inhalt</div>
</div>

Schaue ich mir das Ganze in 100% nun in den verschiedenen Browsern an, dann passt das im FF (3.6), im Opera (10.53), im Chrome (4.1) und auch im IE (8.0).

Fange ich nun aber an zu zoomen, dann bleiben die einzelnen Container im FF, bei Opera und bei Chrome an ihren fixen (absoluten) Positionen, sprich zB der Container #Navigator "rutscht" links aus dem Bild raus, beim IE allerdings fangen alle Container an sich ab einem gewissen Zoomgrad nach links zu verschieben.

Habe ich irgendeine Möglichkeit dem IE diese Verhalten "abzugewöhnen"?

  1. Hallo, Hoshi!

    Dieses Verhalten liegt schlicht daran, wie der IE relative und absolute Größen während des Zoomens interpretiert. Es wäre übrigens hilfreich gewesen, wenn Du uns einen Testlink geschickt hättest.

    Mit absoluter Positionierung wirst Du an diesem Problem nichts ändern können. Versuche Dich in relativer Positionierung mit margin: auto;

    Gruß, LX

    --
    RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.
    1. Mit absoluter Positionierung wirst Du an diesem Problem nichts ändern können. Versuche Dich in relativer Positionierung mit margin: auto;

      Danke LX,

      Hatte ich auch schon versucht, dann fingen die anderen Browser aber an wirre Sachen zu machen. Zum Beispiel war dann zwar der #Container Navi fest, aber die anderen Container fingen an sich im FF zu verschieben. :(

      Beispiellink: http://pdv.cwsurf.de/test/index2.htm