Three reasons sites break in Internet Explorer 7

Readers of the IE Blog were warned multiple times before the release of IE 7 that some of the bug fixes included in the latest version of the browser could break websites. Because of Microsoft’s commitment to backwards compatibility, websites based on Web standards would be at the greatest risk of breaking, especially sites that use CSS files full of hacks to compensate for bugs in IE 6.

A non-scientific study of one hundred websites seems to confirm that generally, sites based on junk code display the same in IE 7 as they did in IE 6, while a number of sites that use CSS based layouts have issues. The details of the study are available in IE7: Were they ready?.

My guess is that most sites that have rendering issues fall into one of three categories:

  1. Sites that have an XML declaration before the DOCTYPE, making IE 6 use quirks mode, but not IE 7. Both browsers still get the same CSS, so IE 7 renders it differently.
  2. Sites that depend heavily on CSS hacks that no longer work in IE 7.
  3. Sites that use conditional comments to feed a bugfix stylesheet to IE without specifying a version number, thereby making IE 7 load the bugfixes and mess up rendering.

I’m guessing (again) that the reason for the majority of tag soup sites passing the IE 7 test is that they almost always trigger IE’s quirks mode, which if I understand correctly has not been changed from IE 6.

I know that it would be complete business madness for them to do so, but wouldn’t it have been interesting to see what would have happened if Microsoft had shipped IE 7 with no quirks mode? Perhaps seeing their Frontpage and Visual Studio-generated IE-only sites break pretty much the same way in Internet Explorer as in fully standards compliant browsers like Firefox or Safari would have helped some hardcore Microsoft fanboys realise that there are people using other browsers and operating systems.

Posted on November 15, 2006 in Browsers, Quicklinks

Comments

  1. “Perhaps seeing their Frontpage and Visual Studio-generated IE-only sites break pretty much the same way in Internet Explorer as in fully standards compliant browsers like Firefox or Safari would have helped some hardcore Microsoft fanboys realise that there are people using other browsers and operating systems.”

    Yup, but I suspect it would also have resulted in literally millions of businesses worldwide having to spend non-trivial money fixing their sites, both internal and external. I wouldn’t have the nerve to inflict that.

  2. Well I see the benefit to them releasing Internet Explorer 7: Wake-Up Call Edition (tm) .. but as you said, it’s obvious why that wasn’t an option. Even if IE7 doesn’t tickle the evangelist within me, at least I’ll get to use some advanced selectors (FINALLY) which will make writing out style rules so much more enjoyable. I simply hope they keep their word and release/develop new IE releases with more than the 2000-2005 run-of-the-mill security fixes without touching some of the more serious (from our viewpoint) core problems.

    While nonstandard markup probably insulated many sites from the IE7 rollout, the time will eventually come where not having a standard site is going to hurt them. Whether it’s new international laws/regulations which tag soup can’t meet, or the attempt to redesign without expending a large amount money, it’ll come.

    Hey Roger - a side note - I wonder if any Microsoft developers have some complaints about working with the (idiotic) hasLayout property that has persisted into IE7 standards mode. There has to be someone on one their front end teams who is annoyed!

  3. November 15, 2006 by Ingo Chao

    The unilever page in question, one of the “Sites that weren’t ready”-bunch. “Sort of”? A closer look reveals, yes, there is a star html hack breaking.

    star html #rightCol { height: 1%; margin-left: 556px; }

    But: This hack (haslayout and reduced margin) is to overcome the 3px text jog in IE6.

    Since this bug is fixed in IE7, this hack is meant to be ignored in IE7.

    Unfortunately, haslayout is still needed for this #rightCol in IE7:

    When this page is loaded in IE7, scroll down. Reload the page. See the right column drop, it’s a float drop that cures itself once the page is completely loaded. The content of the right column jumps back to top.

    But meanwhile, a javascript (nav_include.js) took effect, which computed the final height for this #rightCol. Because there was this float drop of the right column, the height is computed to a wrong, large number.

    As a result, the height is not computed to the maximum, but to the sum of the main and right column. Wrong. Too large.

    I’d say the problem is more than a breaking hack. There never was a hack-free fix for the IE6 3px jog in complex layouts. This page breaks in IE7, and no one could have fixed it until IE7 final was out. “Were they ready?” cannot be answered here.

  4. Unfortunately some websites have broken as a result of the introduction of IE7, and as web developers we are forced yet again with changing out code/hacks/etc to get our web sites/applications to work in all browsers.

    I don’t use the xml declaration before a doctype, even through my website is XHTML 1.1 Strict. I instead have a meta http-equiv tag that serves the content up as xhtml/xml to get around the switching to quirks mode bug.

    I use conditional comments (with the version set to less than 6.9), that loads an extra css file for IE hacks/fixes.

    While Microsoft has the browser market dominance, we’ll be forced with websites breaking with new browser releases, and subsequently the issue of fixing them.

    At least it keeps us on our toes…

  5. November 16, 2006 by Ryan W

    Meta tags don’t cause the browser to render a page with the XML parser, even if they say the MIME-type is application/xhtml+xml. Your page is actually sent as text/html, meaning it is not valid XHTML 1.1

  6. Roger, you’re probably right about the 3 listed reasons making pages/sites break in IE7. The main reason though, is that IE7 is extremely buggy.

    Most IE7 bugs are new variants of old IE6 bugs, and some are the direct result of “fixes” for old bugs. Then they’ve added some entirely new bugs just for the fun of it, or rather because they haven’t tested thoroughly enough.

    Ingo Chao has already mentioned IE7’ need for, and reaction to, hasLayout-triggers, which is something the Microsoft developers didn’t take time to fix (and they’ve said so). They just gave us some new triggers for this particular IE/win bug.

    I often use an XML declaration (to intentionally keep IE6 in quirks mode), and I am feeding IE6 some hacks (since it can’t do much without them). I even use a single, separate, stylesheet for all versions of IE/win (because I’m lazy, I guess).
    This doesn’t in itself create any problems now that IE7 arrives, but some corrections for IE7’ bugs are needed. Nothing special about this, as most new browser-versions need a bit of attention when they arrive - it’s just that IE7 is in need of more attention than any other new major browser release.

  7. All these quirks and the lack of a standard across all browsers drive me crazy…i bet all those guys still using tables are smiling right now

  8. I’m at a complete loss of how I’m going to test IE7, I don’t and won’t have the money for Vista, and I don’t have a connection capable of downloading something as large as IE7 and the XP service packs I’m going to need.

    I wonder if it’s possible to make a screen capture site for IE7?

  9. Rowan,
    BrowserCam may be what you need.

  10. I know that it would be complete business madness for them to do so, but wouldn’t it have been interesting to see what would have happened if Microsoft had shipped IE 7 with no quirks mode?

    Perhaps a compromise would have been to allow IE7 to ship with both quirks and standards compliant modes, but to allow those users who wanted to to be able to turn of quirks mode rendering and force everything into standards compliant mode?

    This would also have the benefit of helping quirks mode users prepare their sites for standards compliance.

    Are there any mainstream, Windows-based browsers which currently allow this choice at the user level?

  11. Rowan: It’s possible to run a standalone version of IE7 and although it’s not a perfect version, it should be enough to let you test layouts:

    IE7 Standalone

  12. Oh, ignore my last comment, I didn’t read what you wrote properly. You can get Microsoft to post you the service packs on a CD for only a few dollars shipping, if that’s any help!

  13. […]Three reasons sites break in Internet Explorer 7[…]

  14. “websites based on Web standards” and “sites that use CSS files full of hacks” are at odds with each other.

    One of Zeldman’s big things has been ‘forwards compatibility’. Using HTML/CSS in a way that isn’t going to ahve to be completely revisited whenever a new browser comes out.

    The people who fill sites full of hacks with no regard for forwards compatibility shot themselves in the foot, it’s little better than sending out complete tag soup.

    Those guessed problems seem generally down to bad coding as much as anything.

  15. Quirks and Standards modes are triggered by DOCTYPE. This is mostly the same in IE6 and 7, except XML declarations no longer trigger Quirks Mode in IE7. This is, in turn, mostly the same as the switching system used in other browsers.

    Bookmark these!

    Web authors can easily choose which rendering mode will be used in these browsers by selecting their DOCTYPE. For legacy websites, using Quirks Mode is a good idea until they can be updated. All new builds should really be using Standards [Compliant] Mode.

    I doubt any users would even be able to find a “rendering mode” setting, let alone figure out when it might be useful. And even less likely to remember to switch it back if they’d set it. Remember that most users are not web enthusiasts! :)

  16. “i bet all those guys still using tables are smiling right now”

    I sure am :) Doctypes are the most annoying thing ever invented. However, I do generally write my code to work in Firefox first, then try and get it to work in IE6 as best I can without hacks. So I’m all for the basic goal of standard compliance, i.e. getting the page to be the same in all browsers, but I’m not for all the goofy rules that aren’t 100% necessary, such as always having to use double quotes for attributes and not single quotes, and not being able to have custom attributes in tags that a non-obtrusive javascript might use to add extra functionality in. Standards shouldn’t be so overarching that they stifle all creativity.

  17. All can I say is that while they have the biggest share of the market, we won’t be able to live in peace.

  18. The mission of every true web developer should be to exterminate Internet Explorer. Promote Firefox in all ways you can. One person at a time, we can do it. Internet Explorer MUST be made extinct.

  19. I agree with Dan 100% I hate IE, including 7. No, I’m not some Firefox fanboy, but no matter what I do, I cannot get my sites to look the same in IE as other browsers. There is always something wrong, and I have to compromise. I am not using CSS hacks or anything of the like. I absolutely should not have to spend hours modifying code and compromising my design because MS refuses to make a good browser; it’s ridiculous. IE7 helps a little bit, but not enough. Not even close.

  20. November 17, 2006 by Roger Johansson (Author comment)

    jk:

    Doctypes are the most annoying thing ever invented.

    In what way are they annoying?

    Standards shouldn’t be so overarching that they stifle all creativity.

    Standards only stifle creativity if you don’t know how to use them.

  21. November 17, 2006 by Graham

    Now that MS have stopped the XML declaration triggering quirks mode in IE7, you can force IE7 back into quirks mode (thereby making it render identically to IE6 quirks mode in theory) by placing any html comment in a line between the xml declaration and doctype declaration as follows:

    (I had to remove surrounding angle brackets and comment openers etc in order for the example to display correctly here)

    xml version=”1.0”

    any html comment here

    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

    There must be no blank lines between the xml line, the html comment and the doctype declaration for this to work.

    IE7 caused a number of my company’s (quirks mode) sites to render incorrectly until we applied the “hack” above.

  22. thanks for the details

  23. Doctypes are the most annoying thing ever invented.

    In what way are they annoying?

    IMO, it’s a pain remembering them. I write my pages from scratch, but there’s always one thing I have to look up or copy from another page - the DOCTYPE.

  24. Quirks mode is crap, I mean it’s difficult making your site WC3 compliant but browsers need to be more strict so it doesn’t encourage sloppy coding.

  25. Informed Man: That’s one of the reasons XHTML 1.1 was created. If there’s something wrong with your code, it generally just chokes and dies. If only people could actually use it without worrying about Internet Explorer.

    Here’s to hoping the next IE will actually start supporting a 7 year old standard…

  26. November 18, 2006 by thepineapplehead

    IMO, it’s a pain remembering them. I write my pages from scratch, but there’s always one thing I have to look up or copy from another page - the DOCTYPE.

    Erm, have you tried creating a simple .txt file somewhere on your PC with a list of them? Call me stupid but that’s what I do.

  27. Obviously it would be a pain to remember all the doctypes, but I use TextPad as my editor. You can include little clips of code in a library on the side panel that you can click to include stuff like this.

    I suppose my real complaint about doctypes is that it is hard to port css from one to another sometimes. I need a good reference for translating css between doctypes, because you may find a site demoing some cool effect but it refuses to work for you unless you change doctypes.

  28. November 22, 2006 by Slob Jones

    [any html comment here]

    Graham’s quirks mode fix causes my site content to disappear in IE6.

    Any reason that would occur?

  29. November 23, 2006 by Lonnie

    Hey guys I think this post fits in here without being considered spam:

    I’m pulling a fundraiser for a 20 user browsercam membership. You will get 1 year’s access to Browsercam for only $25 (It goes for that a MONTH - look at www.browsercam.com). The plan offers:

    12 months of Unlimited access to the Capture service and unlimited access to 30-minute Remote Access sessions on Windows, Mac and Linux machines.

    This is all being done via fundable.org at: https://www.fundable.org/groupactions/groupaction.2006-11-23.3387277043

    You can’t beat this deal and I would have to say this is a must for any professional developer/designer without all the major platforms and browsers to test on in their business/studio.

  30. November 23, 2006 by Roger Johansson (Author comment)

    Lonnie: I’ll leave your comment, but next time please get your markup in order. b elements and target attributes do not belong here. Thanks.

  31. November 29, 2006 by celine

    How can I find a hosting company who is already IE 7 compliant?

  32. December 4, 2006 by Bill Criswell

    celine: It has nothing to do with the hosting company. They just host the documents for you. Hope that clears things up. =)

  33. Hi, many thanks for the article. Excuse my bad english.

    The better way to use DOCTYPE, i think is using an editor that provide in STRICT URI. And now, how to code for both versions of IE (<=IE6 and IE7+)?, how to use hack codes for liquid layouts that IE7 now see and break the web?

    I found the next article http://www.positioniseverything.net/articles/jello-expo.html but i don’t now how to modify for IE7.

    Any help?

    Thanks again !!!

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.