Margin:auto in IE7

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • insomn3ak
    New Member
    • Feb 2007
    • 2
    #1

    Margin:auto in IE7

    I'm having some issues with the layout of my container div. In firefox 2.0 its working normally, but in IE7 everything is pushed to the left. Here is the website. Ideally the header would stay aligned with the background when the browser windows are resized, but I can't even get them consistent in both browsers.

    Any ideas? I'll be happy to post code if needed.
    Tags: None
    • insomn3ak
      New Member
      • Feb 2007
      • 2
      #2
      So FYI - I resolved this issue myself. The answer at this website which talks about best practices for webpage development. Here's the part that was helpful...


      center

      The ancient <CENTER> tag can safely retire, too. CSS is quite capable of centering text and blocks of content, though there's one catch.

      To center the text in div.text you do:

      div.text {
      text-align: center;
      }

      Centering entire blocks is somewhat trickier. If you want to center the entire div.text, the official CSS way is:

      div.text {
      margin-left: auto;
      margin-right: auto;
      }

      auto means: “as much as you need.” The <div> takes as much margin as it needs and equally divides it between left and right. As a result it is centered.
      Unfortunately the auto value does not work in Explorer for Windows. Instead, you must use text-align on a block containing div.text:

      div.container {
      text-align: center;
      }

      div.text {
      margin-left: auto;
      margin-right: auto;
      text-align: left; /* overrule inheritance */
      }

      <div class="containe r">
      <div class="text">
      This entire block is centered
      </div>
      </div>

      This use of text-align is not quite standards-compatible, but it's the only way to make Explorer for Windows behave. And yes, it's one of the very few cases where divitis and classitis are good for your page.

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          I don't know how old that link is but "auto" works just fine for centering in IE.
          [HTML]
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <title></title>
          <body>
          <div style="height:1 00px;width:100p x;background-color:red;margi n:auto;">
          </div>
          </body>
          </html>[/HTML]

            Comment

            • HTDuck
              #4
              Yes, it does work in IE 6+, but ONLY if you do have a DOCTYPE declaration. Almost no one seems to mention this.

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  The doctype declaration has no effect on whether that works or not but doctypes are required for all new web pages so having one goes without saying.

                    Comment

                    • quetzalcoalt
                      New Member
                      • Feb 2012
                      • 1
                      #6
                      Originally posted by HTDuck
                      Yes, it does work in IE 6+, but ONLY if you do have a DOCTYPE declaration. Almost no one seems to mention this.
                      THANK YOU VERY MUCH.. Everybody telling something how to do what to do but i didnt realize that i forgot to mention DOCTYPE thing in my site and thats why im not able to center the page.. after seeing this i made it THANK YOU VERY MUCH again. i signed up to this site just to reply you thanks.!

                        Comment

                        Previous template Next
                        Working...