And They All Complained About IE7

When Internet Explorer 7 was in beta, numerous people cried out about its lack of standards-compliance.

But seriously, compared to Internet Explorer 6, version 7 is an absolute dream to work with. I’ve been doing all my development work for the new design in Vista, which means I’ve been testing with Internet Explorer 7, and not 6. It was only by chance that I thought I’d try it out in IE6 on someone else’s computer and was shocked at how terrible it looked. The major issue is with how Internet Explorer 6 interprets the ‘Box-Model’. Instead of applying margins, borders and padding on top of the specified width/height, it includes it within it. That means if you specify width and padding properties for the same element, it’s not going to look the same as Firefox or IE7.

As a result, I’ve spent a good portion of a day’s work revamping the design to nest an additional div layer to separate width properties from margin and/or padding properties. It’s quite a pain, but I’m almost done and things are starting to look good in Internet Explorer 6 as well. If it wasn’t for the 30-40 some percent of people who still visit this site using IE6, I would’ve left it as it was, but I thought it wouldn’t be fair for those users to see a broken design, despite what Microsoft decided to do with the rendering engine in the past. There are still some issues in IE6 which I haven’t yet figured out, but hopefully will start to clear up as I work at it more.

Another week or two and you should see it adorning this site. Its early forms can be seen over at the sandbox already.

8 thoughts on “And They All Complained About IE7”

  1. Yeah, it’s quite a pain. At this point, I’m rushing through the new design first; I’ve been testing it in IE6 and looks pretty good so far (I spent so much time fixing some stupid rendering problems) so I’ll get around to fixing this theme once I publish with that and then release it publicly.

  2. The way I’m handling it is using seperate stylesheets for IE6 and IE7 with the default one being for Firefox

    // your stylesheet of margin/padding adjustments.

    and

    just the margins and paddings really. it isn’t really a hack either… more like, built in functionality for IE.

  3. Hrmm… good point Justin. I hadn’t considered using conditional statements at all. Is that W3C valid though?

    I’ve got almost all the issues fixed already in IE6 (for the new design at least) so it’s not a big deal at this point, but would still be good to know for future reference.

  4. and if you haven’t yet, look for MultipleIEs. it’s a little overkill since I don’t think anyone in their right mind uses the IE 3.0 version from 1996 (haha), but its useful if you want both 6 and 7. i doubt anyone even uses 5 anymore.

  5. I did look at MultipleIE and it was my first choice, but doesn’t work in Vista, which is my development environment currently. As a result, I’ve been Virtual PC and an IE6 test image that Microsoft provides for specifically these testing purposes.

Leave a Reply

Your email address will not be published. Required fields are marked *