Layout is broken after uploading to web server - html

Question

I developed a small site (100% css layout). I have tested it on IE, Firefox and it looks fine.
After I upload it on my hosting company web server layout is broken only on internet explorer. I mean css is loaded properly but some elements are not at their places. I checked several times the css files on my local pc and the webserver and they have same content.
For example
#main{
position: relative;
width: 960px;
margin: 0 auto;
}
The code above puts #main div at the center of the screen. On my pc it work fine on IE, Firefox etc. But on web server that div floats to left on IE
What could be wrong ?

Answer 1

Internet Explorer has a number of things it uses to determine document rendering mode. The document being local or on the Internet is one of them.
Add
<meta http-equiv="X-UA-Compatible" content="IE=edge">
And then check the documents are consistent (either broken in both or working in both). If so, that confirms what the problem is and you just need to fix the CSS to work with IE in its best standards mode.
Microsoft provide more details.
Also make sure you aren't using the Compatibility button on the toolbar to force compatibility with older, buggier versions of IE.

Answer 2

For earlier versions of IE, you needed to add an extra bit of CSS to get things centered, i.e.:
body {text-align: center};
Then you'd also need to add text-align:left; to the first child div so the text isn't centered:
#main{
position: relative;
width: 960px;
margin: 0 auto;
text-align: left;
}
If the browser is behaving as an earlier version I reckon this could be the issue, so try adding this to your code.