CSS Zentrierung, falsche Darstellung in NN 7

[horst]

Hallo!

Baue gerade mein erste Site in CSS, soweit klappt auch alles ganz gut, nur einen Bug habe ich:

Die Seiten sollen für 1.024 Pixel optimiert sein, meine Seite (über Container => DIVS) ist also 950 Pixel breit und mittig zentriert. Funktioniert auch in allen geprürften Browsern (Firefox, Moz, IE 6, Opera) einwandfrei - nur nicht in NN 7.1 bei einer Auflösung von 800 Pixeln!! Folgendes geschieht: Bei allen gängigen Größen ist der Inhalt durch eine horizontale Scrolleiste sichtbar zu machen - der NN 7.1 schneidet allerdings die linke Seite (= Navigation) komplett ab und man kann nur nach rechts scrollen. Weiss jemand Hilfe?

Der Code:

CSS (extern):

body {
 font-face: verdana;
 text-align: center;
 width: 100%;
 height: 100%;

}

#container {
 background-color: #fff;
 margin: auto;
 width: 950px;
 text-align: left;
}

Jemand eine Idee?

Horst

[Viennamade]

Hallo!

... nur nicht in NN 7.1 bei einer Auflösung von 800 Pixeln!! Folgendes geschieht: Bei allen gängigen Größen ist der Inhalt durch eine horizontale Scrolleiste sichtbar zu machen - der NN 7.1 schneidet allerdings die linke Seite (= Navigation) komplett ab und man kann nur nach rechts scrollen. Weiss jemand Hilfe?

Also bei meinem NN 7.0 und meinem Mozilla 1.5 zeigt sich das Problem nicht. Natürlich gibt es einen Scrollbar zum horizontalen Verschieben des Inhalts wenn dieser breiter als der Viewport ist.

Beste Grüße
Viennamade

[Axel Richter]

Hallo,

Folgendes geschieht: Bei allen gängigen Größen ist der Inhalt durch eine horizontale Scrolleiste sichtbar zu machen - der NN 7.1 schneidet allerdings die linke Seite (= Navigation) komplett ab und man kann nur nach rechts scrollen. Weiss jemand Hilfe?

Der Code:

CSS (extern):

body {
 font-face: verdana;
 text-align: center;
 width: 100%;

^Wenn Du hier 100% Breite vorgibst, solltest Du Margin für Body auf 0 setzen, sonst müsste eigentlich immer eine horizontale Scrolleiste zu sehen sein, weil Margin zu width noch hinzukommt.

height: 100%;
}

#container {
 background-color: #fff;
 margin: auto;
 width: 950px;
 text-align: left;
}

Hm, rechnen wir mal:
Breite von BODY = Margin + 100% + Margin
                = ca 10px + 800px + ca 10px
                ~ 820px
Breite von Container = 950px

Margin auto = (Breite des containing block (BODY) - eigene Breite) / 2
            = (820px - 950px) / 2
            = -65px

Probier es mal so:

body {
 font-face: verdana;
 text-align: center;
 width: 100%
 margin: 0;
 min-width: 950px;
 height: 100%;
}

#container {
 background-color: #00AEAD;
 margin: auto;
 width: 950px;
 text-align: left;
}

viele Grüße

Axel