Grow your CSS skills. Land your dream job.

[Solved] Internet Explorer and CSS

  • # January 7, 2010 at 5:47 pm

    I created a site with wordpress as a backend. It looks exactly the way I want in my Firefox (linux).

    However it’s not right in IE.

    Displayed correctly, my content is centered by means of a div "wrap" that wraps the entire site, using left and right margin to auto.

    In IE, it doesn’t center, it butts the content to the left. Does IE not recognize margin: auto?
    For brevity, only layout parts of CSS are listed

    Link to live http://ronguilmet.com/sandbox/

    Code:
    /* GLOBAL RESET */

    * {margin: 0; padding: 0;}

    body
    {
    /* */
    background-color: #F6C21E;
    }

    /* WRAPS WHOLE SITE */

    #wrap
    {
    width: 700px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    }
    /* CONTENT DISPLAY */

    .entry
    {
    padding: 20px;
    }
    #content
    {
    margin: 10px;
    clear: both;
    }

    # January 7, 2010 at 5:56 pm

    Odd. Try changing the margin on the wrap to:

    margin: 0 auto;

    # January 7, 2010 at 6:25 pm

    yes it is odd to say the least, lol. it’s got me scratching my head.

    I made those changes to the wrap, and still no change. checked the rendering at http://ipinfo.info/netrenderer/index.php.

    works fine on my firefox, and google chrome

    # January 7, 2010 at 6:47 pm

    If ie doesn’t understand margin auto then it is most likely in quirks mode. Check that there is nothing putting you in quirks, like something above your doctype.

    # January 7, 2010 at 6:56 pm

    Thank you so very much.

    that’s exactly what it was. I had the html tag above the doctype
    I had

    Code:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Moved it above it, and it works. thank you again.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".