IE box clipping with 'filter' hack

For some time now, there's been a glitch on the SUSU front page. I'm entirely to blame, and it's partly through my apathy for IE that it remained. Yesterday however, I decided enough was enough and fixed it.

The problem was a negatively positioned image which would get clipped when rendered in IE (of any version). I'd done this on other pages with no problems, whether using negative margins (margin-top: -25px;) or positioning (position: relative; top: -25px;). In this case, I was using absolute positioning, so I could also right-align the image within its containing div.

I can't remember what lead me to try this, but I removed a little IE hack from the containing div's style, which was used to render a PNG with alpha transparency properly in IE5.5+. As it was, it was hardly necessary for this PNG, as its background was plain. The 'hack', if you're unaware, looks a little like this:

.styled-div {
   background: url('alpha.png') no-repeat !important;
   background: transparent;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='alpha.png', sizingMethod='crop');
}

The fundamental part is the filter property, which is unique to IE. It calls a special utility in IE's renderer to load an alpha image, which is then rendered just like IE7, Firefox, Safari, etc. The background tricks are needed to hide the normal background image in IE (IE doesn't understand what !important means).

The interesting thing that I discovered is that this property was affecting how the div's child elements were rendered too. When I tried to position an element outside of its box, regardless of any overflow values I tried, they'd be clipped.

The solution was simple: don't use filter. In my case, I could easily change the background image so it didn't need alpha transparency. Actually, I tweaked the PNG file so it still renders with transparency, but IE uses a different background colour (Photoshop calls this the matte colour). I used TweakPNG to do this. What should you do if you need nested alpha transparency though?

Unfortunately, it doesn't work. Well, you can nest transparent images as much as you like, just don't expect them to leave the parent's bounding box. I did a little experiment, trying different values for sizingMethod, and different combinations of divs with and without the filter property. As long as the parent box has filter set, all its children will be cropped at its edges. Oh well, I guess you get what you pay for!