WordPress.org

Ready to get started?Download WordPress

Forums

Page centered in Firefox, left aligned in IE? (23 posts)

  1. satoshi
    Member
    Posted 9 years ago #

    My site is center aligned in firefox due to the following CSS:
    #page {
    background:url(images/body.png)
    repeat-y center;
    text-align:left;
    width:760px;
    margin:20px auto;
    }

    In IE, however, the entire page is left aligned. I have tried messing around with some IE CSS hacks, and this is the closest I've come to a desirable effect:
    /* Start Hide from non-IE/Win */
    * html #page {
    margin-left:20%;
    }
    /* End Hide from non-IE/Win */

    However, this only looks good at 1280x1024 desktop resolution. I bring it over to my second monitor, which runs at 1024x768, and the page seems to favor the right side of the window. Now, I know why this is. But what I don't understand is why IE has such a hard time centering it. margin:20px auto; should do the trick, just as it does in IE.

    If there is some way of getting IE to center the page, that would be beautiful. If not, however, a left-aligned page isn't all that bad.

  2. Lorelle
    Member
    Posted 9 years ago #

    One, you're using a fixed width which will not "squish" the window when "shrunk". But that's a design choice. I can't stand them, IMHO. I believe in using your screen real estate.

    As for the hack, if I remember right, the hack has to go like this:

    /* Start Hide from non-IE/Win */
    * html #page {
    margin-left:20%;
    }
    /* End Hide from non-IE/Win */

    Not the back slash in the first line. That's part of the trick.

    Using margin:20px auto; may also be your culprit. I'm not an expert in this, but MSIE doesn't respond well without specifics. I'd try some experiments with margin: 0px 25% or margin: 0px 50px instead of auto (remove the hack first to make sure) and see if that helps any.

    Let us know!

  3. Root
    Member
    Posted 9 years ago #

    I use text-align: center;

  4. Lorelle
    Member
    Posted 9 years ago #

    And then set the width?

  5. satoshi
    Member
    Posted 9 years ago #

    Well, if I put specific margins in, it will be funky. As I explained, 20% looks fine at 1280x1024, but looks almost right justified at 1024x768. In IE, that is. In Firefox, the page centers on every resolution I've viewed it at, down to 800x600. I guess this is just one of those things that will take some tweaking to figure out.

  6. Root
    Member
    Posted 9 years ago #

    No it wont. Its the text-align: left; causing it.

  7. Jinsan
    Member
    Posted 9 years ago #

    It may be an intended effect, but I noticed your page shifts to the side when clicking the menu links.

  8. satoshi
    Member
    Posted 9 years ago #

    The page shouldn't shift anywhere when clicking any links... Maybe it changes slightly due to the addition of a scrollbar on some pages?

  9. satoshi
    Member
    Posted 9 years ago #

    Getting rid of the text-align: left does nothing, nor does adding a text-align:center.

  10. tzedekh
    Member
    Posted 9 years ago #

    Try playing with

    body {
    margin: 0px;
    padding: 0px;
    text-align: center;
    }

    #container {
    text-align: left;
    margin: auto;
    width: 760px;
    }

    Where "container" is the ID of the div containing your content. As you'll notice, you'll have to reset the text alignment for "container" (or the divs it contains) or all text will center.

  11. satoshi
    Member
    Posted 9 years ago #

    Wow, thanks a lot! That worked perfectly. Thanks for everyone's help, I will keep this thread in my bookmarks incase a similar issue pops up, hopefully I'll be able to work it out on my own then.

  12. HugoA
    Member
    Posted 9 years ago #

    The reason that your having the problems aligning your layout in IE
    is due to the fact that you have a comment in the html before the DTD , there must be nothing before the DTD otherwise it switches IE into 'Quirks Mode' and IE will not follow CSS rules fully, in this case it does not understand the use of margin:0 auto; it's important to render in 'Standards Mode' for full compatibility with the CSS specs.

    Once in standards mode margin auto will work on the wrapper/container for the page and you can then use the text-align:center; on the body and text-align:left; on the first child element to fix things for IE5 which doesn't render in standards mode and understand margin:auto;.

    The use of the hacks that you have are not needed and actualy are not hiding from everything but IE, the escape hack \*/ hides from IEMac to feed a rule to IE only it's best to use the star selector hack * html #somediv{}

    Hugo.

  13. Root
    Member
    Posted 9 years ago #

    Beautifully explained Hugo - thanks.

  14. smarties
    Member
    Posted 9 years ago #

    I don't have comments before the DTD and I still have the same problem as satoshi... can something else cause this? and how do I actually go into standard mode instead of the Quirks mode?

    http://sites.neeweb.com/smarties

  15. Root
    Member
    Posted 9 years ago #

    in body in the css add text-align: center;

    .in #rap add text-align: left;

  16. HugoA
    Member
    Posted 9 years ago #

    For browsers to switch into 'Standards Mode' you need a complete DTD, that is one which has a full url to the doc spec location.

    The one you have at present is a 4.01 transitional without url so you are in 'Quirks Mode' which is strange as WP out of the box validates to a xhtml 1.0 DTD what I also do not understand is why your using frames ? a rather outdated and disparaged method which I guess would also require the use of the html 4.01 frameset DTD to be valid.

    Hugo.

  17. satoshi
    Member
    Posted 9 years ago #

    Ah, yes, thank you Hugo. I moved the comment down below the DTD and removed the hack and IE still displayed it properly. Awesomeness.

  18. joeytrimmer
    Member
    Posted 9 years ago #

    why not just do"

    margin-left: auto;
    margin-right: auto;

  19. Root
    Member
    Posted 9 years ago #

    You need that as well

  20. smarties
    Member
    Posted 9 years ago #

    Thankz Root, your trick fixed it. You are right Hugo, the problem seems to be that my page doesn't validates as a XHTML 1.0 transitional; duh!!! I have many tags that are not closed properly. Thanks again!!!

  21. Root
    Member
    Posted 9 years ago #

    Well thats one satisfied customer at least. :) Welcome onboard smarties.:)

  22. Glo
    Member
    Posted 9 years ago #

    Forgive my ignorance but what is a DTD?

  23. Root
    Member
    Posted 9 years ago #

    Doc Type Declaration.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.