Thursday, December 04, 2008

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!

6 comments:

SBl clipping path service said...

Quite informative post.

SBL clipping path said...

wow! Sounds stunning.

Jessica Gatto said...

clipping pathare used to outline objects from the background of an image.yearbeq 25

Jessica Gatto said...

Tourist comes n goes at best he or she takes a souvenir of the visiting place, but a traveler absorbs it all and leaves behind a piece of oneself...loved the way you put it..

Jessica Gatto said...

I will just pick up one point in your post. Why would someone with business interests here endanger those interests by advising people things were ok and have a Tourist hurt and their business destroyed by giving bad advice.What possible logic is that?
I have been asked by people what is happening here and my experience, my guests experience and now this independent witness all say there are no problems for tourists.

Clipping Path said...

Really wonderful post and nice site . thanks for sharing