treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Site Won't Center in IE

  • Hello,

    The site that I am working on will not center in IE. Not really sure how to handle this and I'm stumped.

    In my original layout.css


    #page-wrapper {width: 940px; margin: 0 auto -165px; min-height:100%; height: auto !important; height:100%;}
    #inside-wrapper {width: 940px; margin: 0 auto;}


    Not sure why this won't center in IE 7.

    The negative margin is for a push to create a sticky footer. I have stripped everything from layout because I feared an unclosed div, but they were all closed.

    Here is a link: http://www.performancedesignllc.com. Looks good in Safari, Firefox and safari and utter crap in IE.

    I NEED HELP!
  • I think it should be as simple as adding "text-align:center" to your body declaration in your CSS, and then "text-align:left" to your #page-wrapper
  • "falkencreative" said:
    I think it should be as simple as adding "text-align:center" to your body declaration in your CSS, and then "text-align:left" to your #page-wrapper


    I think that only works for IE6. You can try it though.

    I'm stumped. I was going to say check your doctype, because I think margin: 0 auto only works with XHTML strict/transitional...but that's what you already have. I use the same method on my site and it works in IE7.

    My only suggestion is try removing the width and height from #inside-wrapper. It's the same as #page-wrapper so I don't think you need it, and maybe that's confusing it for some reason.
  • Biggest thing that is bothering me is if you go to any of the pages (and drop downs aren't working on the home page in IE... weird), the header and the footer get centered and they are wrapped in the #inside-wrapper, the actually body (index.php) remains pushed all the way to the left and off the screen.
  • Your HTML is all over the place. I have just run your home page through the W3.org validator http://validator.w3.org/#validate_by_input and got 47 errors, after that I tested the about page and got 50 errors!
    If you address those issues we might have a chance of getting the CSS to work. For example, you are using the id "inside-wrapper" in both the header and the footer. Each id is supposed to be unique and can only be used once per page.
    If you want to use multi-line links then check out Chris's tutorial http://css-tricks.com/remote-linking/#more-2315
  • Yea I will look into those errors. Possibly yanking the inside-wrapper all together and just have the page wrapper start at the beginning of the doc and run all through.

    Just really weird that other browsers have no problem with it.
  • Fixed the ID problem and noticed in the validator that a of those are xml parsing errors, not anything to do with structurally. Still really confused on this.
  • Many of the errors seem to be odd ones like:

    title="Permanent link &quot;Home<br /><span>Welcome</span>&quot;"

    Why would you have a <br /> and <span>'s in your title tag of a link?
  • I was trying to do like a speaking navigation. I am using wordpress as a CMS and that was the only way It could be done because I am using wp_listpages.

    I am really stumped on this one. I am willing to pay some one for their time if they can fix this for me. Like I said it looks fine in all the "good" browsers but not in IE. I have taken out each part of the includes, testing to see what causes it with not luck.

    Like I said I will pay someone to either help me out or just do it for me.
  • I had exactly the same problem today. Never had it before. Drove me nuts. IE 7 & 8.

    Ran the W3C validator, couldn't see anything obvious, all minor errors. But, I took the time to go through the list and solve each error. Turned out to be a totally innocuous thing: a incorrectly formed html comment.

    I would NEVER have spotted it without the validator.