[GELÖST] Seite verrückt einige Pixel nach links wenn sie länger als der Bildsc..

[eidex]

Hallo,

ich spiele mich jetzt schon länger mit cmsms herum und habe bis jetzt auch alles hinbekommen, aber ich stehe vor folgendem Problem:

ich hab als design ein 800px breites Fenster in dem sich oben ein Logo, dann drunter ein div in dem sich Menü und Content befinden, sowie der footer drunter:

Code: Select all

</__body>
<div id="pagewrapper">
     <div id="logo-oben">
     </div>
      <div id="main">
          <div id="menue">
                 <div id="menu_vert">
                    {menu template='menu-minimal' collapse='0'}
                 </div>
             </div>  
          <div id="content">
             {content}
          </div>
        </div>
     <div id="footer">
        {global_content name='footer'}
     </div>
</div>

das klappt auch alles sehr gut, nur stehe ich vor folgendem Problem:

wird das Fenster länger als der Bildschirm hoch ist so verspringt der ganze Inhalt um ca. 5px nach links, und zwar bei Firefox (bis vor kurzem auch auf anderen Browsern, aber dort geht es jetzt, keine Ahnung warum)

hier sind die styles für die divs:

Code: Select all

div#pagewrapper {
   	margin: 0 auto;       /* this centers wrapper */
   	width: 800px;
   	background-color: #aaaaae;
   	color: black;
}


/*** Das obere Logo ***/

div#logo-oben {
   	background: #aaaaae url(images/cms/logo-oben-test.png) no-repeat 0 0px;  
   	display: block;
   	height: 71px;
}
   


/** Der Hauptbereich, in dem sich links das Menü und rechts der Inhaltsblock befindet **/



/** Wichtiger Hack für Höhe des DIV, damit IE das Richtig darstellt **/
div#main {
    	background: #aaaaae url(images/cms/mainrand.png) repeat-y 0 0px;
        min-height:400px;
        height: auto !important;
        height: 400px;
}

div#menue {
	float: left;
	width: 250px;
	margin: 0px;
   	padding: 1px;
   	display: inline;  /* FIX IE double margin bug */
        }


div#content {
	margin-left: 251px; 
	margin-right: 21px;
        padding: 20px; /* Wichtig zum Vermeiden von Abständen der DIVs */
}

 
/** Der Footer **/

div#footer {
   	clear: both;       /* keep footer below content and menu */
   	height: 30px;
   	color: #fff;
   	background: #fff url(images/cms/footer-knapp.png) no-repeat 0 0px;  
}

Hat wer eine Ahnung warum das so ist? Hab leider nichts gefunden dazu!

lg

[eidex]

passiert auch unter ie, ist mir nur auf dem kleinen bilschirm vom laptop nicht aufgefallen!

lg

[lollipop27]

Das ist ganz einfach.

Firefox interpretiert das mittig anders als IE etc das heisst sobald du eine Scrollleiste benötigst, springt das mittig an eine andere stelle. Vermeiden kannst du das, indem du die Seite immer mit scroll leiste darstellst.

das machst du indem du dem body oder html eine width 100% und eine border bottom gibst, das bewirkt, dass er immer eine scrollleiste anzeigt, aber kein unnützer platz unter der seite erscheint....

[eidex]

mein gott, und ich such schon seit so vielen stunden nach der Lösung und auf das offensichtliche bin ich nicht gekommen!  vielen dank für den Tipp, klappt hervorragend!

lg paul

[mike-r]

Hilfreich ist auch Seiten per se nicht auf die Mittelachse zu pappen.

Selben Effekt kann man mit prozentualen Abständen zum Rand realisieren.
Entweder über margin:auto und dem Body eine Breite verpassen, oder über margin: 0 xx%; für den Body