« Jasper Reports and PHP
Custom Projects »

Lovin IE7

Okay, so I’ve had a bit of time to use and develop against IE7 and put the new engine through its paces and I’m finally starting to realise just what a massive upgrade it is.

Now, I hate MS as much as the next geek, but I really have to applaud the advancements that have been made with this new version. I know that the interface changes are fun to pick apart and debate over where they stole them from, but the real improvements and groundbreaking work has happened behind the scenes in the rendering engine.

I always thought that IE6 was okay to develop against. Not great, it still had a few things about it, but they were not such a big deal. However now I use IE 7 as the first thing I test with (apart from Firefox), so many things have come out of the woodwork and I realise how crippled it really was.

In the last week, I have encountered the following problems with IE6 that have been fixed in IE7:

  • 3px (or is it 6) floating bug. That is, when you have a div floating beside another div with a fixed with, there needs to be a fair bit of breathing room between the two otherwise the floating div will appear below the non-floating div, IE claimed it wouldn’t “fit”.
  • Lack of support for position: fixed
  • Painting bugs.

I just had a site today which had something like the following:

Half of the content would be overwritten when painted by the white background of the first div. Weird.

  • Floats getting caught near the edges instead of sitting in the corners
  • Padding on tds acting differently to padding on divs inside cells.
  • Weird layout changes when hovering over links causing floating divs to be truncated.
  • The ever-present lack of PNG alpha support.

Of course, it will be a while until we can say goodbye to IE6, we still need to use tools like the fantastic multiple IE to see how most people will see your site.

Thankfully, with Vista now being included with most new PCs we will see IE6 usage drop dramatically over the next few months. IE7 usage has been increasing by a healthy 3% / month over the last few months, and we can expect that to pickup speed. It’s also interesting to note that Firefox usage is still increasing in spite of the shinny new IE.

I really hope that the team don’t rest and keep developing. There are still many more things that need fixing and implementing… but it’s a great restart to a stagnant world of web development.

This entry was posted on Friday, February 23rd, 2007 at 7:30 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “Lovin IE7”

  1. Derek Says:
    May 8th, 2009 at 1:03 pm

    Take a look at the following html. In IE7 on my Vista machine the 3px problem is still there:

    IE Sucks so much!

    /*
    ** Markup free clearing
    ** Details: http://www.positioniseverything.net/easyclearing.html
    */
    .clear-block:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clear-block {
    display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clear-block {
    height: 1%;
    }
    .clear-block {
    display: block;
    }
    /* End hide from IE-mac */

    .container {
    width: 400px;
    }

    div {
    margin: 0;
    padding: 0;
    }

    .floater {
    width: 60px;
    height: 165px;
    background: red;
    float: right;
    margin-left: -3px;
    }
    .content {
    height: 60px;
    background: green;
    }
    .extras {
    width: 340px;
    background: tan;
    }

    If only IE didn’t stink so much…
    This is the primary content. It is displayed beside the floater.
    Link 1Link 2Link 3

  2. Derek Says:
    May 8th, 2009 at 1:08 pm

    I have found that the 3px margin error is still kicking in IE7. I tested the following in IE7 on a Vista machine and it works in FF but not in IE7… 3px gap between floater and extras. Do you get the same results?

    <html>
    <head>
    <title>IE Sucks so much!</title>
    <style type=’text/css’>
    /*
    ** Markup free clearing
    ** Details: http://www.positioniseverything.net/easyclearing.html
    */
    .clear-block:after {
    content: “.”;
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    .clear-block {
    display: inline-block;
    }
    /* Hides from IE-mac \*/
    * html .clear-block {
    height: 1%;
    }
    .clear-block {
    display: block;
    }
    /* End hide from IE-mac */

    .container {
    width: 400px;
    }

    div {
    margin: 0;
    padding: 0;
    }

    .floater {
    width: 60px;
    height: 165px;
    background: red;
    float: right;
    }
    .content {
    height: 60px;
    background: green;
    }
    .extras {
    width: 340px;
    background: tan;
    }

    </style>
    </head>
    <body>
    <div class=’container clear-block’>
    <div class=’floater’>If only IE didn’t stink so much…</div>
    <div class=’content’><p>This is the primary content. It is displayed beside the floater.</p></div>
    <div class=’extras’><a href=’/'>Link 1</a><a href=’/'>Link 2</a><a href=’/'>Link 3</a></div>
    </div>
    </body>
    </html>

Leave a Reply