IE Hack: IE Png Fixes - Explained
I am new to this forum and I figured I should share some of my knowledge with you guys regarding IE hacks. If you like these I can keep posting more information regarding current webdesign standards, photoshop tips for increasing ad conversion as well as just about anything having to do with web design, development, and seo.
I have been getting paid to do web development for over 10 years now.. And boy how I have seen things change! If you have any particular suggestions for me, just let me know here, or on a PM.
Let's admit it, we all hate Internet Explorer. I have devoted countless hours ripping my hair out trying to fix the most minute details.. We all know that IE6 is outdated and has horrible CSS rendering engine. The problem is, we are the only ones that know that IE sucks so bad! Why is this? Because people like me and you spend those countless hours making sure that no one knows the difference.
Here are a couple IE fixes that will save you some time!
1) Conditional Statements
Some people that work under me would call these "cop outs" because it makes fixing bugs so easy.
A conditional statement looks something like this:
2a) The Transparent PNG (The old way of fixing them)
As mentioned early, IE6 is outdated and doesn't support PNG alpha transparency. This means that when you save an image as a transparent png IE6 will convert the transparent layer into a black box. This is the worse thing that can happen when you use a transparent logo for your header.
So how do we fix it? Well, there are several accepted ways of fixing this problem, I will share two with you.
The first method is what we used to use six or seven years ago. The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image. The trick here is to force IE to use a blank image that you supply (a 1 x 1 transparent gif) as the alpha channel for the PNG. Essentially your image would look like this:
Notice that the true source is put in the src property of the filter and a blank image is used as the src attribute for the image. Another thing to notice is that the size should be set so that the filter will be applied. Another reason to set the size is to force the image to take the size of the real image and not of the blank image.
This is a complicated way of hacking your way through the bug. I am showing this so you can get a better understanding of how IE6 handles Alpha Transparency. A designer from years back would have created a CSS hack to handle this on all images. I do not recommend this solution.
2b) The Easier Png Fix
Luckily for everyone online google released an extremely simple way to fix all PNG's on your website. You can find it here: code.google.com/p/ie7-js/
All you need to do is setup a Conditional Statement (see point 1) to determine the browser type. Once you have selected the browser you want you will need to copy and paste the ie7 js file you downloaded from google.
This snippet will only pull the google js file if a user that visits your site is using a browser that is less than IE 7. Putting the " IE7_PNG_SUFFIX=".png";" in the script will make it so every png will have the alpha transperant layer. If you do not snippet in, then the code will only target png files that end with -trans.png I also recommend copying the file from google and hosting it on your own server, instead of doing an external HTTP request for the file each time a user hits your page.
I hope this helps someone out here. If anyone has any questions feel free to ask anytime!
- Testeds
I have been getting paid to do web development for over 10 years now.. And boy how I have seen things change! If you have any particular suggestions for me, just let me know here, or on a PM.
Let's admit it, we all hate Internet Explorer. I have devoted countless hours ripping my hair out trying to fix the most minute details.. We all know that IE6 is outdated and has horrible CSS rendering engine. The problem is, we are the only ones that know that IE sucks so bad! Why is this? Because people like me and you spend those countless hours making sure that no one knows the difference.
Here are a couple IE fixes that will save you some time!
1) Conditional Statements
Some people that work under me would call these "cop outs" because it makes fixing bugs so easy.
A conditional statement looks something like this:
Code:
<!--[if IE 6]> Special instructions for IE 6 here <![endif]-->
- Their basic structure is the same as an HTML comment (<!-- -->). Therefore all other browsers will see them as normal comments and will ignore them entirely.
- Internet Explorer, though, has been programmed to recognize the special <!--[if IE]> syntax, resolves the if and parses the content of the conditional comment as if it were normal page content.
2a) The Transparent PNG (The old way of fixing them)
As mentioned early, IE6 is outdated and doesn't support PNG alpha transparency. This means that when you save an image as a transparent png IE6 will convert the transparent layer into a black box. This is the worse thing that can happen when you use a transparent logo for your header.
So how do we fix it? Well, there are several accepted ways of fixing this problem, I will share two with you.
The first method is what we used to use six or seven years ago. The secret behind this implementation is a filter introduced in IE55 that is called AlphaImageLoader. This filter takes an image with alpha channels and displays it. It has also a property for deciding how to scale the image. The trick here is to force IE to use a blank image that you supply (a 1 x 1 transparent gif) as the alpha channel for the PNG. Essentially your image would look like this:
Code:
<img src="1px.gif" style="width: 100px; height: 100px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='TRANPARENT_IMAGE.png', sizingMethod='scale')" />
This is a complicated way of hacking your way through the bug. I am showing this so you can get a better understanding of how IE6 handles Alpha Transparency. A designer from years back would have created a CSS hack to handle this on all images. I do not recommend this solution.
2b) The Easier Png Fix
Luckily for everyone online google released an extremely simple way to fix all PNG's on your website. You can find it here: code.google.com/p/ie7-js/
All you need to do is setup a Conditional Statement (see point 1) to determine the browser type. Once you have selected the browser you want you will need to copy and paste the ie7 js file you downloaded from google.
Code:
<!--[if lt IE 7]> <script src="/JS_DIR/IE7.js"> IE7_PNG_SUFFIX=".png"; </script> <![endif]-->
I hope this helps someone out here. If anyone has any questions feel free to ask anytime!
- Testeds
"The best preparation for good work tomorrow is to do good work today." - Elbert Hubbard
I heard you like sigs.
So I built a sig in your sig,
So I can sig while you sig.