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!

9 comments:

Anonymous said...

Quite informative post.

Anonymous said...

wow! Sounds stunning.

Unknown said...

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

Unknown 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

Oscar Fernandez said...

Nice article keep blogging this amazing article

Clipping Path Service said...

I really enjoyed your blog Thanks for sharing such an informative post.

clipping path company said...

Great blog about clipping. Love your post.
my website-
Clipping Path Service provider company

photo retouching services

Image Background Remove Blog

How to do clipping path service

Ghost mannequin service

Unknown said...

Amazing post, Thank you for share with us.


Photo Retouching Services