CODEWITHSUNDEEP
htmlcssinternet-explorer
tyler
tyler

Reputation: 1293

Style differs from chrome to IE. Centering

I am attempting to center a page. The page appears centered in chrome and FF. IE shoves everything to the left. Where I get confused is I'm using 1 style sheet for multiple pages and several of those pages are correct across all browsers. Best guess is something I have styled on the page is generating the incorrect formatting.

The only solution that works is if I apply a text align: center but this is not feasible for their are several other text styles already though out the body.

I have tried changing the margin from margin: 0 to margin: 10px auto 0; and .container{width:auto;} to a fixed width by changing it to .container{width:900px;}

I attached a jsfiddle here though im not sure it will help identify the problem as it looks centered. http://jsfiddle.net/thetylercox/p6ENV/

The current problem is here. http://www.redwirelogic.com/index.html When i find the problem ill update the fiddle to show the problem and solution.

Upvotes: 0

Views: 50

Answers (2)

Soroush Falahati
Soroush Falahati

Reputation: 2337

You are in quirks mode. Change your doctype to something like

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

or 

  <!DOCTYPE HTML>

and no need to align center. This is going to solve lot of your other problems in IE too.

Upvotes: 1

Brandt Solovij
Brandt Solovij

Reputation: 2134

So here's the issue :

#wrapper { width:100%; overflow:hidden; margin-left:auto; margin-right:auto; }

/* Wrapper Sub Elements */
.w-main { width:1004px; margin:0 auto; overflow:hidden; }

Basically you are creating a "wrapper" that is the same width as the current window. Then you create a child element which has a set width 1004px with auto left / right margins.

The reason this bumps to the left most edge of the window is because your #wrapper element is text-aligning left.

What you should do is something simple like : 

#wrapper { width:100%; overflow:hidden; margin-left:auto; margin-right:auto; 
        text-align:center; } // <-- that 

/* Wrapper Sub Elements */
.w-main { width:1004px; margin:0 auto; overflow:hidden; 
         text-align:left;} // <----and this

Upvotes: 1

Related Questions