Who Killed IE? It was Helvetica in the browser with a candlestick!
A recent battle I ran into while developing a client site was driving me quite near to the line of insanity... I spent nearly 25-30 hours solely in debugging time on this particular issue, which is redonkulous for something that should not have even been an issue. The site worked flawlessly in ALL other browsers except when it came to IE9. This particular site was always triggering the lovely and oh so helpful message of "A problem displaying yadayadayada.com caused Internet Explorer to refresh the webpage using Compatibility View."...
First off, that error message is terrible. It gives no indication of "what" is actually causing the error. As well, nothing within the "oh so awesome" IE Developer Tools displayed anything about any issue. One gripe I have about this is, IE obviously knows that there is an error or issue, so how can you not give any clue as to what or where something is going awry. I mean come on now, really?!? That's all the help your going to give me?
Everything was working great in other browsers, their developer tools and consoles offered no help in getting the issue narrowed down to the actual cause. So since not one decent platform out there wanted to help me debug IEs' issue. I had no choice but to go back to the old school method of going line by line, commenting out sections at a time, until the issue did not rear its ugly head, and at least narrow down the possibilities. Being that the documents all validated properly when checking the HTML and CSS W3C conformity, and nothing was throwing any specific JavaScript errors. I was able to immediately rule out any broken HTML markup, and JavaScript based errors. So that cut down my troubleshooting locations enormously.
After going through this tiring process, oddly enough I narrowed the issue down to the sites global CSS file. ...Uhhh really? Yes, apparently a CSS declaration was causing IE to throw its tantrum. So, now that I had gotten to a point that I knew where the problem was occurring, it was onto figuring out how a CSS file was dropping the site to its knees in IE. I checked everything from top to bottom in the file and everything was written properly. Opening and closing brackets; check, colons and semi-colons; check, quotes all opened and closed correctly; check. Ok, so what in the world!? Now it was back onto the whole comment out sections at a time to see where in the CSS file the problem was coming from. After going through everything it came down to be something in the "body" CSS declaration (see code below). IE no likey!
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
color: #FFF;
background: url("../images/main-bg.jpg") no-repeat center top #000000;
}
Ok based on that CSS declaration, I must be really high and drunk because I'm not seeing that anything in there that is a potential IE killer... After scratching my head until a new bald-spot had appeared. I removed each rule one at a time. Removed font-family, and wallah! problem gone. But wait a second here... What the? How the?... IE no longer likes font-family rules? I then removed each font family in the list and found that ONLY when Helvetica was declared first in the list, IE would choke on it. Huh? IE likey!
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FFF;
background: url("../images/main-bg.jpg") no-repeat center top #000000;
}
Issue found! But why is this happening? After some digging around on the net, I started to find posts slowly emerging about IE9 and Type1 fonts. This turned out to be what the issue was, IE just cannot handle Type1 font files. So keep that in mind when using Type1 fonts on your system and developing pages that may invoke these specific font types. What I really would like to see from Microsoft and the IE team in future browser releases is better error tolerance. If it doesn't like something, don't break down and throw a tantrum when you run into something you don't like. Do like the rest of the browser manufacturers do, and shut your @#&$% mouth, silently ignore the issue and move on. This makes the web experience a slightly nicer place for those not-too-savvy users out there who may come across this. Plus you are not completely blocking someones site from being viewed just cause you don't like something everyone else play with. And I'll have one less gray hair at the end of the week.
