IE won't render in IE8 Document Mode

0
votes

I have a website that renders well in IE8+, however my clients have their IE8 browsers set to Document Mode: IE7 Standards and they think the website is broken when it is not.

Everywhere I've read seem to imply that the answer to this problem is to simply add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> immedately after the <head> tag. However, when I try to test this by setting Document Mode: IE7 Standards via the IE F12 developer tools, it won't render into the IE8 Document Mode.

Steps I'm using to test this:

  1. In IE, open up http://johngoosey.com
  2. What you should see: 50%/50% vertical split screen with navigation on the left and content on the right.
  3. Open up Developer Tools via F12
  4. Set Document Mode to IE7 standards
  5. The 50%/50% split stacks with the navigation on the top left and the content on the bottom right.

If you do a view source, you'll see that I have the meta tag there. I've tried all combinations of different meta content values (ie: IE=edge, IE=8, IE=EmulateIE8) with no luck. Any and all advice/suggestions would be greatly appreciated!

1
internet-explorerinternet-explorer-8

1 Answers

1
votes

The issue is that IE7's box model is screwing things up.

As an example, change the left padding on .columns.colLeft to 0, and the right padding in .columns.colRight to 0.

One way you could deal with this is via a conditional class like:

.ie8compat .columns.colLeft {
    padding-right:0;
}

.ie8compat .columns.colRight {
    padding-left:0;
}