Firefox Display Problem: Page Won’t Center!

Anyone???

It does not display properly in Safari either. Must be a css problem. What is the location of your css file?

In your css file body is text-align: center;, while #page is text-align: left; That property aligns the elements of #page (your posts column, sidebar, andn footer) to the left.

This didn’t solve the problem either. Even when I adjusted the #page to text-align: center;, it still displayed all the content under the header to the LEFT.

Could the problem be in page.php? Or, could using HTML in my header be causing some type of problem?

THANKS!

Maybe this is the problem: Failed validation, 41 errors
https://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.asapcreditcard.com%2Fblog%2F

and this too…
https://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.asapcreditcard.com%2Fblog%2F

I don’t think these errors are the problem…

I just completely removed the HTML from my header (only including <div id=”page”>) and made adjustments to the style sheet so #page was text-align: center. The page content is still aligned LEFT in Mozilla!

This is driving me crazy! I can’t believe it’s so hard to correct this minor problem!

Anymore suggestions????

You’re editing the wrong thing; you *need* to edit the CSS file.

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: "Times New Roman", Times, serif;
background: #F5F5F5;
text-align: center;
}

#page {
background-color: white;
border: 1px solid #959596;
        margin: 0 auto;
text-align: left;
}

The problem is #page; you’re telling it to have margins of 0 (at top and bottom) but “auto” to the left and right. The problem is that you haven’t told it how *wide* #page is, so it can’t align it to the left/right the way you want. If you add a width to #page [like, width:780px], then it should center properly.

At least, that’s my guess on first cup of coffee.

The width of #page is defined later in the CSS file (under /* Begin Structure */)…

But I tried to add it into the code you included above anyways… still didn’t work…

Thanks; unfortunately, “didn’t work” isn’t very descriptive.

You need to set a width before the margin:auto thing will work; otherwise, the width will automatically be the entire width of the window.

The width is set to 820px. It was already set in another part of the CSS file. But I added it to the code you referenced anyways. This is what I tried to mention before…

‘Didn’t work” means the HEADER is still centered, and the #page is still aligned left in Mozilla / Firefox.

I HAVE NO IDEA WHAT TO DO AT THIS POINT…

#page is defined twice in your CSS and you’ve got conflicting Margin CSS for #page. Take the margin: 0 auto; out of the first call and go from there.

Removed “margin: 0 auto;” from the CSS file. Now what?

Change the #page margin to margin: 20px auto; in style.css and calm down.

THANKS SO MUCH! THAT WORKED!

I was a little doubtful. But it turned out to be a simple solution. THANKS SO MUCH!

Now I just have a couple small details I need to fix in Mozilla / Firefox. Maybe someone can make a suggestion?

For some reason, I have a SPACE between my ‘header’ and the page content (#page). Also, my TOP NAVIAGTION bar / image is not lining up properly. It’s shifting to the RIGHT, causing the UK button to shift down to the next line (creating an open space). Any suggestions for either problem? Works fine in IE…

Anyways… thanks for the help on my MAIN ISSUE! MUCH BETTER!

Got rid of the SPACE by changing ‘margin: 20px auto;’ to ‘margin: 0px auto;’. Now I just need to get my navigation lined up properly…