WordPress.org

1. jpanizzoli
   Member
   Posted 5 years ago #

   My blog looks great in IE! But I'm having some problems with FireFox. In IE, everything is centered and aligned correctly with the header. But in FireFox-- everything below my header is aligned left. Here it is:

   http://www.asapcreditcard.com/blog/

   I've tried making adjustments to the header.php file, but that didn't seem to work. I also looked through the CSS and made some adjustments-- but couldn't solve it this way either.

   I thought this was going to be an easy fix, but I've been working on it for hours! Couldn't find anything in old posts either. Any suggestions???

   THANKS!

2. jpanizzoli
   Member
   Posted 5 years ago #

   Anyone???

3. ensworth
   Member
   Posted 5 years ago #

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

4. ensworth
   Member
   Posted 5 years ago #

   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.

5. jpanizzoli
   Member
   Posted 5 years ago #

   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!

6. Andrew Ozz
   WordPress Dev
   Posted 5 years ago #

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

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

7. jpanizzoli
   Member
   Posted 5 years ago #

   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????

8. DianeV
   Member
   Posted 5 years ago #

   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.

9. jpanizzoli
   Member
   Posted 5 years ago #

   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...

10. DianeV
    Member
    Posted 5 years ago #

    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.

11. jpanizzoli
    Member
    Posted 5 years ago #

    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...

12. lexhair
    Member
    Posted 5 years ago #

    #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.

13. jpanizzoli
    Member
    Posted 5 years ago #

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

14. lexhair
    Member
    Posted 5 years ago #

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

15. jpanizzoli
    Member
    Posted 5 years ago #

    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!

16. jpanizzoli
    Member
    Posted 5 years ago #

    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...

17. jpanizzoli
    Member
    Posted 5 years ago #

    Everything is working fine. THANKS FOR YOUR HELP!!!

Topic Closed

This topic has been closed to new replies.