CODEWITHSUNDEEP
htmlcss
prista
prista

Reputation: 381

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 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 ?

Upvotes: 1

Views: 789

Answers (2)

james6848
james6848

Reputation: 1667

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943630

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.

Upvotes: 4

Related Questions