Jason Barrie Morley

I think it’s fair to say that, right now, I would have no qualms in doing horrendous things to whoever is responsible for Internet Explorer; it has taken me a large number of hours to finally get the new design to work (after a fashion) in IE…

The new In7 design relies heavily on PNGs to implement the various shadows scattered around the page. This is applied as a background to a div to ensure that people using browsers that do not support CSS are not swamped with random shadow images:

#header-container {
  background: url('images/header-bg.png') center...
... no-repeat;
}

This, however, is not sufficient for IE, as it does not support PNG transparency. So, a little trickery is needed to convince IE that it really can manage transparency. Thanks to A List Apart for drawing my attention to this one:

#header-container {
  background: url('images/header-bg.png') center...
... no-repeat;
  filter:progid:DXImageTransform.Microsoft.Alpha...
...ImageLoader(src='/images/header-bg.png',sizin...
...gMethod='scale');
}

But! Wait for it! As the custom IE filter, AlphaImageLoader, loads the PNG onto a different layer, we now end up with a div with two backgrounds; the first still showing absolutely no transparency.

It is therefore necessary to somehow stop the background property being interpreted by IE. A little searching on the internet revealed the answer; Internet Explorer falsely interprets properties prefixed with an underscore as the property sans-underscore. So, we end up with:

#header-container {
  background: url('images/header-bg.png') center...
... no-repeat;
  _background: none;
  filter:progid:DXImageTransform.Microsoft.Alpha...
...ImageLoader(src='/images/header-bg.png',sizin...
...gMethod='scale');
}

This additional ‘_background’ line ensures overrides the ‘background’ property in IE alone, ensuring that it does not attempt to display the default background.

For a time; it was good…. I managed about an hour of some serious self-satisfaction for having, as I thought, solved the problem. But no. Internet Explorer has yet another bug which stops links working over an AlphaImageLoader’d div, rendering the entire of In7 useless in IE.

So now, IE supported is provided by overloading the background property in IE to use a gif. *sigh*

#header-container {
  background: url('images/header-bg.png') center...
... no-repeat;
  _background: url('images/header-bg.gif') cente...
...r no-repeat;
}