Layout Is Broken After Uploading To Web Server

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

Solution 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

<metahttp-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.

Solution 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.