Comment Feed for 1x1 .png background's and IE 7.0.6001.18000 (Coffeehouse on Channel 9)

Re: Re: Re: Re: 1x1 .png background's and IE 7.0.6001.18000

Jonathan Sampson — Thu, 18 Dec 2008 14:51:45 GMT

Oh yes, terrible fun :) I spent 30 minutes last night trying to work around another small issue in IE. I had four spans that were acting, by direction of css of course, as image corners to a div. For some reason, any time I had a tag beneath that parent div, it would tear my previous div apart. It worked perfectly, again, in every other browser but IE7. After finding no luck on Google, and frankly not even really knowing what to search for, I moved my span's down to be the last children of the parent div, and it solved the problem. Apparently you can just have absolutely positions elements just anywhere in your relatively positioned div - they have to be in the perfect arbitrary spot.

This, Good. (can be seen here: www.sampsonresume.com/contact.php)

<div class="fancy-inset">
<div class='a'>
    <div class='b'>
      <div class='c'>
        <div class='d'>
          <div class="fancyLifter">This is a test.</div>
        </div>
      </div>
    </div>
</div>
<span class='cornerA'></span>
<span class='cornerB'></span>
<span class='cornerC'></span>
<span class='cornerD'></span>
</div>

This, Bad - Evil, Terrifying!.

<div class="fancy-inset">
<span class='cornerA'></span>
<span class='cornerB'></span>
<span class='cornerC'></span>
<span class='cornerD'></span>
<div class='a'>
    <div class='b'>
      <div class='c'>
        <div class='d'>
          <div class="fancyLifter">This is a test.</div>
        </div>
      </div>
    </div>
</div>
</div>

Of course once I got it working right, I simplified it to this:
<div class="fancy-inset">Hello World</div>

And complimented it with the following javascript:

$(document).ready(function(){
    fancyInsets();
});

function fancyInsets() {
    $("div.fancy-inset").each(function(){
        var content = $(this).html();
        $(this).html("<div class='a'><div class='b'><div class='c'><div class='d'><div class='fancyLifter'>" + content + "</div></div></div></div><span class='cornerA'></span><span class='cornerB'></span><span class='cornerC'></span><span class='cornerD'></span></div>");
    });
}

Re: Re: Re: 1x1 .png background's and IE 7.0.6001.18000

stevo_ — Thu, 18 Dec 2008 14:43:56 GMT

IE tends to struggle with tiling anyway I've noticed you can sometimes 'witness' the tiling process when rendering is invalidated.. surely all these quirks are the fun part of being a web developer?

Re: Re: 1x1 .png background's and IE 7.0.6001.18000

Jonathan Sampson — Thu, 18 Dec 2008 14:40:55 GMT

It is for a public site, but the project doesn't go up for another couple of weeks. The most confusing thing for me was that it worked in one version of IE7 (7.0.5730.11) and not the other IE7 (7.0.6001.18000) - I wonder what changed between those two versions.

Regardless, it's working beautifully now, so I'm not too concerned with it :)

Re: 1x1 .png background's and IE 7.0.6001.18000

evildictaitor — Thu, 18 Dec 2008 11:03:31 GMT

It's something to do with GDI+ and how it stretches images. I don't know how the other browsers are doing it, but I suspect them developing deliberately with more-than-one OS in-mind means that they don't use GDI+.

Basically the problem comes from the fact that GDI+ doesn't like images that are 1 pixel up or 1 pixel across - and so it extends the dimentions by adding blank (transparent black) pixels to the picture. This isn't normally a problem, unless you try and stretch the image, whereupon it becomes obvious.

You'll see the same problem if you open your image with (Right-click > Preview) and zoom in a lot.

The solution is to not use 1x1 pixels - 2x2 is probably sufficient, but because of the way the GPU works, somewhere between 5x5 and 20x20 will be less GPU intensive for drawing on large areas.

Re: 1x1 .png background's and IE 7.0.6001.18000

Duncan Mackenzie — Thu, 18 Dec 2008 10:54:12 GMT

I tried to find a link about this with no luck, but I remember a discussion around this with some css-loving folks and they were advising not to use too small an image when doing transparency, that the work of laying out so many copies and handling the transparency blend of each one was a small amount of work, but by increasing the size from 1x1 to 5x5 I believe you'd be reducing the # of images to render by a factor of 25....

I don't understand why it would render it the way it did though, even if it was causing a performance problem.

Is this for a public site? Care to share which one?