PNG Transparency Fix in IE6
Tags: BeginnerAs I was exploring different ways to use Transparent PNG files in some of my designs (Check out Smashing Magazine’s PNG post for some great examples), I had to first find out how to make PNG files work in IE6. As we all know, IE 6 does not fully support transparency.
The .htc Fix
Download the .htc file and specify which element/tag you want PNG support on. To learn more here is an online demo and set up instructions.The Java Script Fix
SuperSleightThis is probably the best Java Script PNG fix for IE6 that I have come across. Please check out www.24ways.org’s tutorial for a guide on how to implement.
Google Code
I stumbled across this Google Code which was pretty straight forward. The downside of this is that script only fixes images named: *-trans.png. Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.
Or the CSS Fix
I stumble across a simple technique that worked effectively, which uses CSS and conditional tags for IE, no Java Script involved.Step1 – HTML
We can start out by creating a new html file and place an empty div tag with a class name “vehicles”.<div class="vehicles"></div>
Step2 – Style Sheet
Next lets create a style sheet called styles.css and add the following:body {
background: url(body-bg.jpg); /* Adding base background pattern */
}
.vehicles {
width: 500px;
height: 176px;
background: url(vehicles.png) no-repeat; /* Adding background of the vehicles */
}Step 3 – IE Style Sheet
Lets create another new style sheet and call this one IE.css.Now we all know IE hates PNG files, so this is the part where we work the magic.
/* Notice I add the 'html' in front of the class name, I did this so there will no background property conflicts with the other style sheets */
html .vehicles {
background: none; /* Hide the current background image so you can replace it with the filter*/
width: 500px; /* Must specify width */
height: 176px; /* Must specify height */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}Step 4 – Conditional Comments for IE
This is the final step. Now we will go back to the html file from step 1, and we will call both of the style sheets we just created.Inside of the <head></head> tags on the top of your file, add the following:
<link rel="stylesheet" href="styles.css" type="text/css" /> <!--[if IE 6]> <link rel="stylesheet" href="IE.css" type="text/css" /> <![endif]-->*Notice we have the conditional comments for IE6 on the 2nd line, this is where we tell IE6 to use the IE.css style sheet in addition to our regular style sheet.
Conclusion
These were 2 simple ways I was able to pull off the PNG problem on IE6. The good part about this technique is that it is XHTML compliant and it also reduces page weight.If you have any suggestions, comments, or know of a better way, please give me a heads up!
Không có nhận xét nào:
Đăng nhận xét