broken css on internet explorer

Question

I have a web project that just breaks when I run it on Internet Explorer. Here it is, working as I want it to, on jsfiddle.

On IE, the display_area goes up and mixes with the toolbar up top. Also, the posts mixes into the side_display_area instead of them being confined to main_display_area, as is on the jsfiddle.

@HenrikAmmer I am running the jsfiddle on IE, and it is working fine in there. — lightburst, Aug 30 '12 at 10:33
Also, I just noticed, the `max-width:90%; margin-left:auto; margin-right:auto;` isn't working as well. The `display_area` seem to be stuck to the sides of the screen even though `min-width:1000px; max-width:90%;` on 1300 width resolution. It runs fine on Firefox, back at home. Apparently, all the `width` properties aren't working... — lightburst, Aug 30 '12 at 10:36
If it works in the test on jsfiddle, then rebuild your nonworking version from there instead. If it still breaks you need to walk backwards in the process to find where. It's pretty hard to hypothecate where the error is on working code. — Henrik Ammer, Aug 30 '12 at 10:37
@HenrikAmmer I tried to copy and paste the generated html of the output frame but it still outputs a broken page... I cleaned it up a little bit like removing the JS and repeating tags and whatnot, but yea... — lightburst, Aug 30 '12 at 10:46
Are you using a doctype? Having problems with IE is normal and expected. — Rob, Aug 30 '12 at 11:30
Your problem is probably related to this : http://stackoverflow.com/questions/10305631/ie9-float-with-overflowhidden-and-table-width-100-not-displaying-properly/10305733#10305733 — Denys Séguret, Aug 30 '12 at 12:11
@dystroy OMG that thing is magic! It didn't work out for me the first time, but [this](http://stackoverflow.com/a/9624500/846368) helped. I just found out IE actually has different modes, with compatibility mode on by default. Apparently, you can override it! — lightburst, Aug 30 '12 at 14:06
@lightburst it's cleaner for your answer to have an accepted answer. This might help other users later. Either you write an answer to your own question (that's totally correct) or I write one based on my previous comment. — Denys Séguret, Aug 30 '12 at 14:17

score 3 · Answer 1 · edited May 23 '17 at 11:51

3

The problem I had was because IE, by default, uses 'Quirky' mode for its CSS rendering for the sake of compatibility with older code that was written ad hoc for IE. Although IE currently has different standard compliant modes(I can't attest to how compliant, however), it still defaults to this compatibility mode.

The solution is to override, or explicitly set, the rendering mode of IE via the X-UA-Compatible header. You can do this through html tags with:

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

more info

edited May 23 '17 at 11:51

Community

1
1

answered Aug 30 '12 at 16:15

lightburst

231
3
19

Holy crap you have no idea how much time this just saved me. Works fine in Firefox and Chrome and then the Goliath IE rears its ugly head. – Kellen Stuart Sep 12 '16 at 22:33

CMartins · Answer 2 · 2012-08-30T12:09:41.017

0

I think this may help http://css-tricks.com/the-css-overflow-property/

Consider adding some div to you horizontal menu and put some height on that

div.hmenu {
    margin-left:auto;
    margin-right:auto;
    height: 20px;
    min-width:1000px;
    max-width:90%;
    overflow:auto;
}

edited Aug 30 '12 at 12:09

answered Aug 30 '12 at 11:08

CMartins

3,247
5
38
53

broken css on internet explorer

2 Answers2