Achanchinou (achanchinou) wrote in it_contractors,

  • Mood:

CSS, IE, Transparent backgrounds

Off topic, but potentially useful.

As you can see on my main site both IE and non-IE browsers can be beaten into submission when it comes to using transparent and partially pngs for backgrounds.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='trans2.png', sizingMethod='scale');

There is, however, a large ugly bug relating to doing this.

Using the filter: attribute with a AlphaImageTransform (see and search for "filter" if you wish an example) adds a supra layer to the site. This is all fine and dandy, unless you happen to have child tags or containers that are links or buttons. In IE, it disables pass-through clicks and all actions on the child tags. It's very annoying. For the links and linksin divs on my site, I managed to get around it by changing the size of the image to 1px by 1px. It was previously 2x2. There's a set of sizes where this does and doesn't work, and if you experience this behaviour, the trick is apparently to scale up or down a pixel at a time until it does work.

Once this is done properly it's got quite a keen effect. Depending on a few variables I haven't yet figured out, the filtered image doesn't always show up without a position: absolute; attribute added. You can nest divs with these attributes and get varying levels of color changing and transparency.

Tested (working) on: Firefox 1.0.4, Safari on Mac OS 10.2.4, IE Mac OS 10.2, IE 6. Anyone wanna verify the looks on anything else and add it to the list for me? :)
  • Post a new comment


    default userpic

    Your IP address will be recorded