Saturday, September 29, 2007

What Is Stronger Than Vicadin

Use Transparent PNGs in Internet Explorer

PNG The format for images is increasingly posted on the web since it was created in 1995, and with the use of transparency allows you to get good results.

It 's possible overlapping transparent images to other elements to arrive at an interesting combination of reach with the GIF format , were it not for the usual compatibility problems with Internet Explorer.

Unlike many Firefox, Opera, etc. .., the Web browser from Microsoft does not support the transparency of PNG showing an unlikely gray background.

solution waiting for IE7 is a CSS hack that allows you to bypass the problem by using a special filter for IE (from version 5.5 onwards).

can immediately see the example I made ; for your test, all you have to do is use the following CSS:


# overlay {background: url (opaco70.png);}

* html # overlay {/ * Rules for IE (from 5.5 onwards) * /
background-color: # 000;
back \\ ground-color: transparent;
background-image: url (blank.gif);
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = "opaco70.png" , SizingMethod = "scale");}


Obviously your PNG image will replace opaco70.png example, as the name of transparency to apply.

The problems of this technique? Here they are:

  • is not supported by Internet Explorer 5 and below, so if your site is designed to work with this browser, try to avoid using it
  • The item should have applied the transparency width and height set, or alternatively position: absolute (very restrictive, I know)
  • Use CSS hack deprecated and non-standard

Draw your own conclusions, it could certainly be useful to go back waiting for the official release of IE7, but to evaluate the pros and cons well.




0 comments:

Post a Comment