Forum Moderators: not2easy

Message Too Old, No Replies

Whole site moving a few pixels to the right in Firefox

Site moves several pixels when page extends for more than one screen

         

mooperlee

8:39 pm on Apr 25, 2007 (gmt 0)

10+ Year Member



I'm having a slightly wierd problem with my CSS website that I'm having difficulty understanding. I have built a basic two column, fixed width site which is centred in the middle of the screen.

For most of my pages the design is working fine in both Firefox and IE7. However, for a couple of very short pages, where the pages don't extend below the bottom of the screen, the whole layout seems to move a few pixels to the right in Firefox. I cannot for the life of me figure out why!

Here is my code for the css stylesheet - this is my first css website so there is probably something cretinous in there, please be kind! Thanks for any help you can give.

div#container{position:relative;text-align:left;background: url('images/fauxshadow.gif') repeat-y 0 0}
div#headerlinks{position:absolute;top:41px;left:718px}
div#splash{background:#617192}
div#links{background:#000000;text-align:center;padding:6px}
div#links p{font-family:Verdana;font-size:11px;color:#FFFFFF}
div#links a{color:#FFFFFF;text-decoration:none}
div#navigation{position:absolute;left:0%;background:#617192;padding:10px;border-left-style:solid;border-left-width:1px}
div#navigation p{color:#FFFFFF}
div#navigation h1{color:#FFFFFF;margin:0}
div#content{position:relative;left:180px;padding:10px;background: #FFFFFF url('images/shadow.gif') repeat-y 738px 0px;
border-left-style:solid;border-left-width:1px}
div#footer {background:#FFFFFF;text-align:center;border-top-style:solid;border-top-width:1px}
div#footer p{font-size:11px}

div#container{width:920px;margin:0 auto}
div#headerlinks{width:200px;height:10px}
div#splash{width:100%;height:140px}
div#links{width:908px;height:16px}
div#navigation{width:160px}
div#content{width:720px}
div#footer{width:920px;height:30px}

Fotiman

8:43 pm on Apr 25, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



That's easy... when the page is longer, a scrollbar will be added. This means that the center of the page shifts to the left slightly to make room for the scrollbar, thus your page will be closer to the left. It's normal.

mooperlee

8:48 pm on Apr 26, 2007 (gmt 0)

10+ Year Member



Wow, that was an easy one! Thanks for that, you've just saved me a lot of hours trying to fix code that wasn't broken in the first place.