1

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 ?

prista
  • 361
  • 1
  • 5
  • 8

2 Answers2

4

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • 1
    +1, I was writing an almost identical answer. The only thing you didn't mention (that I was going to) was hitting F12 to see what "Document Mode" he's in both locally and live to quickly verify the problem. – thirtydot Apr 06 '11 at 08:37
  • You need to identify what bugs in IE7 are causing the problem and work around them. – Quentin Apr 06 '11 at 08:41
  • @thirtydot It looks like Document Mode is same on both. If there is a problem in my css file why at least #main declaration dosen`t work as expected ? – prista Apr 06 '11 at 08:55
  • It sounds like the document is in Quirks mode. Do you have a standards mode triggering Doctype? – Quentin Apr 06 '11 at 08:57
  • 1
    @prista: If it doesn't work in IE8 Compatibility Mode, then that means it doesn't work in IE7. I haven't seen your site, so I have no idea why it's not working in IE7 - I couldn't know. As @David Dorward said, you need to fix your site to work in IE7. If you need help doing this, then you should start a new question with more information about the site (preferably a link to the site). Edit: Looking at your edit, (missed that before my comment) I agree with @David again - if `margin: 0 auto` isn't working, you're in Quirks Mode. – thirtydot Apr 06 '11 at 08:58
  • @thirtydot my mistake. On local machine Document Mode is: IE8 Standarts On web server shows: Quirks Mode – prista Apr 06 '11 at 08:59
  • I use that doctype: – prista Apr 06 '11 at 09:01
  • See this thread http://stackoverflow.com/questions/5565349/somehow-php-broke-doctype – prista Apr 06 '11 at 11:09
  • You don't know what you've just done... :) Saved me from a nervous breakdown. Your answer is great! – wegelagerer Feb 17 '14 at 08:05
0

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.

james6848
  • 1,657
  • 3
  • 25
  • 39