center layout

Hello,
I'm trying to center my layout here:
http://dropyourdrawers.brinkster.net/shop/
It looks centered and great in IE but Firefox moves it to the left. Please help!

i figured it out on my own:)

if your having the same problem i was with the layout only being centered in IE and not firefox go to your CUSTOM stylesheet and find:

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: auto;
padding: 0em;

set the margin as auto.

doing so centered my layout in firefox. but it also centered my header logo which i did not want so..

#logoWrapper{
width:192px;
height:64px;
margin: 0; background-image:url(yourwebsite.com/images/yourlogo.gif);
background-repeat:no-repeat;

i set the margin there as 0.

Thanks for posting solution to your problem.
Am sure will help other forum members.
Well done!!
:smile:

Thank you. It works great!
:D

When you have a long list of selectors and you want to change a property for one of them, don't change the whole list - that will change all the other selectors too, and may require fixes for them as you have observed.

Separate out the one selector you want to change and do what you want with it in its own rule.

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
margin: 0;
padding: 0em;
}

#mainWrapper {
margin: auto;
padding: 0em;
}
Better yet, since #mainWrapper already has a separate rule, remove it from the group rule and put the new property in the existing #mainWrapper rule. Keeping things in one place minimizes confusion.