FF body verschiebt sich abhängig vom Inhalt
Holger Lauck
- css
0 Auge
Hallo,
ich hoffe, nachdem meine Suche nicht halt hier hilfe zu finden.
Ich habe eine Seite mit Div-Elementen gebaut,
Kopf, darunter Navigation horizontal, dann einen Content Bereich, der zwei Divs enthält, alles im css definiert.
Es lautet wie folgt:
#div_body {
position: relative;
width: 940px;
margin: 10px auto;
border: thin #800000 solid;
font-family: Arial, Helvetica, Verdana, sans-serif;
color: #000000;
}
#masthead {
width: 940px;
height: 140px;
max-height: 140px;
max-width: 940px;
min-height: 140px;
min-width: 940px;
background-color: #FFFFFF;
}
#top_nav {
width: 940px;
height: 22px;
background-color: #CCCCCC;
max-height: 22px;
max-width: 940px;
min-height: 22px;
min-width: 940px;
}
#container {
position: relative;
width: 100%;
}
#left_col {
width: 280px;
position: absolute;
left: 0px;
top: 0px;
max-width: 280px;
min-height: 325px;
min-width: 280px;
}
#page_content {
margin-left: 280px;
width: 630px;
max-width: 630px;
min-width: 630px;
min-height: 325px;
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 10px;
padding-top: 20px;
padding-bottom: 20px; }
Mir geht es um die mittige Zentrierung des Inhalts, die sich um ca 10px nach links verschiebt, wenn der (bei mir statische)Inhalt den unteren Rand des Browserfensters erreicht, also der footer unterhalb des sichtbaren Bereiches liegt.
Wenn ich den Body absolut positiniere (links am Rand) geht das auch ohne Versatz, aber sobald ich das ganze irgendwie nach rechts bzw, Bildmitte schiebe (position: Asolute und über negativ left: 15em oder so zuckt meine Seite mal nach links, wenn der Inhalt etwas grüßer ist.
Bei dem Inhalt handelt es sich um einfachen text und Zeilenumbrüche, ich habe mal alles was komplexer ist weggelassen, leider ohne Erfolg.
Zu allem Übel geht das im IE wie ich es will, ich will aber das es im FF klappt.
Wenn mir jemand helfen kann bin ich sehr dankbar. Sollten noch Info´s erforderlich sein, bitte frage...
Tausend dank für die Mühe.
Holger
Hallo
#masthead {
width: 940px;
height: 140px;
max-height: 140px;
max-width: 940px;
min-height: 140px;
min-width: 940px;
background-color: #FFFFFF;
}
Wenn die min-width
und die max-width
identisch sind, kannst du genausogut nur width
verwenden.
Mir geht es um die mittige Zentrierung des Inhalts, die sich um ca 10px nach links verschiebt, wenn der (bei mir statische)Inhalt den unteren Rand des Browserfensters erreicht, also der footer unterhalb des sichtbaren Bereiches liegt.
Wenn der Inhalt eine Scrollbar erfordert (und nur dann), wird sie im FF auch gerendert. Dein zentrierter Inhalt (#div_body { ... margin: 10px auto; }
) verschiebt sich demnach um die Hälfte der Breite, die nun die Schrollbar ein- bzw. die sie dem Viewport wegnimmt.
...
Zu allem Übel geht das im IE wie ich es will, ich will aber das es im FF klappt.
Der MSIE rendert ja standardmäßig eine (vertikale) deaktivierte Scrollbar, auch wenn diese nicht benötigt wird.
Tschö, Auge