Page centered in Firefox, left aligned in IE?

  • 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 1280×1024 desktop resolution. I bring it over to my second monitor, which runs at 1024×768, 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.

Viewing 15 replies - 1 through 15 (of 22 total)

  • 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!

    I use text-align: center;

    And then set the width?

    Thread Starter satoshi

    (@satoshi)

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

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

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

    Thread Starter satoshi

    (@satoshi)

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

    Thread Starter satoshi

    (@satoshi)

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

    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.

    Thread Starter satoshi

    (@satoshi)

    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.

    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.

    Beautifully explained Hugo – thanks.

    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?

    https://sites.neeweb.com/smarties

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

    .in #rap add text-align: left;

    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.

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘Page centered in Firefox, left aligned in IE?’ is closed to new replies.