Hi! I recently decided to update the layout of my homepage a bit and make the whole thing centred. I was quite surprised when it worked fine in Explorer, but not in Firefox, as it usually seems to be the other way around for me.

It validates just fine, the problem seems to be that while the Explorer-scrollbar doesn’t affect the site at all, the scrollbar in Firefox demands it's own space and pushes everything else sideways. This means that pages with a lot of text are not placed the same way as those with less text, as the scroll bar pushes it out of position. I’ve solved it temporarily by making the homepage centered only in Explorer, but I would like for it to work in Firefox as well.

Since I’ve changed it on my site to make it look ok, I’ve found another homepage with (what seems to be) the same problem. Try going between ‘Om Kartago’ and ‘Butiken’:

Any ideas on how to solve this?

It's the old difference between IE and FF.

IE puts all of the paraphernalia (margin, border, etc) around the box object inside the defined size of the box. FF puts them outside the defined size of a box.

The only way to fix this is to nest box objects. Define the size of one of them, and put the paraphernalia on the other one. Then you can control which one is inside.

I'm not sure if this answer is 100% right since I had to deal with this awhile ago and its off the top of my head. What I did was make it so even on short pages firefox had a null scrollbar. I'm trying to remember how I did it but you will likely need to do some homework on your own now that you know what direction to go in. If I had to take a shot at the code id say it was a style in the body tag something like...


or in your css

body {overflow:-moz-scrollbars-vertical;}

Hope this gets you on the right track.