0

Possible Duplicate:
IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly

The web page that I am designing is squished down in IE9 compared to Chrome. It's not just the font, it's the width of the page and everything. The layouts are the same. I looked at several other sites and they look the same in both browsers. I therefore don't think it's a browser setting issue. Both browsers are set to 100% zoom. I specify the width and font-size in the CSS of the page. And, when I check the Inspect element in the browsers they do, in fact, both tell me that it's Times New Roman 15px and that the width is 900px. But no way is this true for both. I am running on localhost.

How do I fix this so I know what I'm designing for?

EDIT:

In header (now):

<!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />

CSS:

 body{font-family:"Times New Roman";font-size:15px} 
.container{width: 900px; height:100%; margin-left:auto; margin-right:auto;  overflow: hidden; min-height: 700px;}
.header{padding:30px;}
.naviagte{}
.left_column{float:left; width:100px; padding-bottom: 100000px; margin-bottom: -100000px; }
.main_body{float:left; width:700px; min-height: 700px; padding-bottom: 100000px; margin-bottom: -100000px;}
.right_column{float:left; background:green;width:100px; padding-bottom: 100000px; margin-bottom: -100000px;}
.footer{}
.clear{clear:both}

HTML:

<div class = "container">
    <div class = "header">My website and stuff</div>
    <div class = "navigate">
      stuff here
    </div>
    <div class = "left_column">&nbsp;</div>
    <div class = "main_body">
       stuff here
    </div>
    <div class = "right_column">&nbsp;</div>
    <div class = "clear"></div>
    <div class = "footer">&nbsp;</div>
</div>
Community
  • 1
  • 1
user984003
  • 28,050
  • 64
  • 189
  • 285

1 Answers1

0

This is usually due to a bad header. Try with this :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Note the two settings : the second one isn't always needed but for some edge cases (float behavior for example) it will make IE work like the other browsers.

EDIT :

Don't use values like 100000px for padding or margin ! This might provoke integer overflow errors. Your problem is likely here.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • but op doesnot told that he isnt using DOCTYPE – NullPoiиteя Oct 14 '12 at 15:52
  • There aren't so many possibilities if there is nothing specific (i.e. browser tests) in his site : IE9 is really almost like other browsers with those **two** settings. – Denys Séguret Oct 14 '12 at 15:53
  • and if its same than should be closed since you are a high rep man ... you have previllage to either delete or close this qquestion since its not constructive – NullPoiиteя Oct 14 '12 at 15:54
  • 1
    If OP confirm this is the problem, we might probably close the question as duplicate. But for now we're not 100% sure... – Denys Séguret Oct 14 '12 at 15:56
  • That didn't solve it. I'm posting the code now. – user984003 Oct 14 '12 at 16:00
  • @user984003 you should have done this before .... you are not a very new user ... – NullPoiиteя Oct 14 '12 at 16:02
  • @user984003 check [Writing the perfect question](http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx) – NullPoiиteя Oct 14 '12 at 16:03
  • @dystroy So sorry, your first answer was right! It was the header. I assumed the problem was in IE so I was checking to see whether the fix made it look bigger in IE. But the fix made it smaller in Chrome and now they are the same. Too bad I was designing in Chrome! Lesson learned. Huge help. – user984003 Oct 14 '12 at 16:43
  • Cool ! Thanks for the confirmation. But be careful with big numbers. I recall there was a problem like this (maybe 6 months ago), I don't know what was the browser having the integer overflow error. – Denys Séguret Oct 14 '12 at 16:43