Mobile Friendly Website

CSSPLAY

Doing it with style

EXPLORERForeground image pngFix using no extra markup and just CSS

Date : 1st October 2010

For IE6

The images with no pngFix. Note in IE6 that the backgrounds are light grey.

Delicious Digg Reddit RSS StumbleUpon twitter

The images with pngFix, but the alpha transparent image is placed on top of the original image so the grey background remains.

Delicious Digg Reddit RSS StumbleUpon twitter

The images with pngFix and the original image pushed out of sight - success.

Delicious Digg Reddit RSS StumbleUpon twitter

To show that the resulting pngFix image can also be a link.

Delicious Digg Reddit RSS StumbleUpon twitter

Icons by Design Reviver


Information

I have recently been working on a web design that required forground png images that would display correctly in IE6 without any extra markup and the webmaster was struggling to find an answer that would work when the images were also used withing links.

They were unaware that this did have a fairly straightforward answer, so I have decided to publish the method here just in case anyone else is struggling with this.

The above demos all use the same markup, which is just the <img> element with classnames, and styled only by IE6 to produce a png image with 'tranparency' from the foreground image.

The last of the four demos shows that the resulting images can all be used within links.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page