Firefox shifts my site to the right

My website looks fine in IE7, but when I look at it with Firefox, the whole section under the header shifts to the right. This happens in the english version, but is even worse in the dutch version. You can see it at www.thejeansoutlet.nl

Does anyone know how to fix this?

Thank you!

Also, does anyone know how to outline the buttons in the right column, so that they are behind the light-grey line? Thanks!

I applied the classic style sheet from a 1.3.7 distribution to your site with FF and the web dev tools interactively and this centers it up correctly so this is something that you have in your stylesheet??

Hint: always design with FF and then correct the IE issues

Thank you Kobra for pointing out that the error is in the stylesheet!

I looked at it more and found out that the problem is in my logo wrapper. The Red Passion template, on which mine is based, uses a different height (282px) for the logo wrapper than my template (145px).

Red Passion template

#logoWrapper {
    background-color: transparent;
    height:282px;

My template

#logoWrapper {
    background-color: transparent;
    height:145px;

When I use the Red Passion Template's height for mine, it looks perfect in both Firefox as IE7. But, I would like to use the height of my template (145 px) AND that it looks centered in Firefox. Do you know how to do that?

When I use the Red Passion Template's height for mine, it looks perfect in both Firefox as IE7.

I mean with perfect that it is nicely aligned in the center. I do not like it that it has the extra space in the header.

Checked your head image and it is 167px high and not 145px try changing this to 167?

#logoWrapper {
    background-color: transparent;
    height:167px;
	}

Thanks Kobra.

I tried it and although it didn't work, you did get me on the right track. I ended up changing/adding in the stylesheet.css:

#logo, .specialsListBoxContents, .centerBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}

in to

#logo, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
	float: left;
	}	
	
#logo, .centerBoxContents {
	float: left;
	height:167px;
	}

I also changed the transparent logo.gif file to the right sizes (842x167), and now it looks exactly like I wanted it!

Thank you very much!