07.21
I am not a designer but sometime we programmer have to face situation of handling images and other stuffs also. Few months ago i was asked by one person who is desinger for solution of PNG images in IE6. He was able to display foreground images in webpage properly but in background repet images he was failed.
I will give you both solution in this article here.
1. For Foreground images.
Download pngfix.js file from http://homepage.ntlworld.com/bobosola and follow instruction. This is best way to display images directly associated with IMG tag of HTML.
2. For Backgound repeted images.
for this we need to create one class. This class has location to images from root folder of website. Once all path are correct than you can use this class in your DIV or TABLE Tag.
Here is Class
If you want to use PNG non repeat:
width:10px;
height:10px;
_width: 10px;
_height: 10px;
background: url(whatever.png) top left no-repeat transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(src=’whatever.png’,sizingMethod=’scale’);
if you want to use PNG with repeat:
display: block;
width: 10px;
background: url(whatever-repeat.png) top left repeat-y transparent;
_background-image: none;
filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’whatever-repeat.png’);
The idea is very simple just use filter:progid:DXImageTransform.Microsoft.
AlphaImageLoader(enabled=’true’, sizingMethod=’scale’, src=’the-image-you-want-to-repeat.png’ ) and make sure you properly apply the other CSS rules. This technique uses scaling instead of repeating but for shadows and other cool effects it is sufficient.
One important note. Here this class is made in CSS file which is in images folder. set your path of .png images according to that in your class.