Drupal 5.1 + PNG + IE6
Sounds like a fun recipe huh? Well, having tried (and failed) previously to get this combination to work properly, I recently did some work for a client which demanded that .png files (Portable Network Graphic - image files which have transparent bits) were both used and looked correct in Internet Explorer 6.
Basically, I wanted to accomplish four main things:
- I wanted a real .png file with full transparency to look correct in IE6, and behave as it’s supposed to (i.e. letting you see some or all of what’s beneath it).
- I wanted to achieve this using only CSS – no Javascript, no PHP, no Flash, and no other trickery.
- I wanted this to work for background .png files, that is files which are called from the style.css file like so:
#div_1 {
background-image: url(images/druplicon.png)
}. - I wanted the solution to be as tidy as possible.
The trouble is that if you just try to load a .png into IE6 normally, you get the following outcome:
Ouch!
After some googling around, and a bit of trial and error, I came up with a solution which satisfies all of the above criteria. Here’s what I did:
Step 1
Firstly, I inserted the following code into my page.tpl.php file directly before the closing head tag:
Remember to replace ‘your_theme_name’ with the actual name of your theme folder (e.g. 'garland' or 'pushbutton').
<!--[if IE 6]>
<style type="text/css" media="all">@import "/sites/all/themes/your_theme_name/ie6_fixes.css";</style>
<![endif]-->If your Drupal install is in a subfolder (e.g. www/garland) you may instead need to use:
<!--[if IE 6]>
<style type="text/css" media="all">@import "/your_theme_name/sites/all/themes/your_theme_name/ie6_fixes.css";</style>
<![endif]-->(which has an added ‘/your_theme_name’).
This code targets IE6 only, and tells it to load another stylesheet called ‘ie6_fixes.css’. The beauty of the code is that it will be ignored by all other browsers, which means that we can provide IE6 with extra instructions about what to do with our .png files. It also means that we can put our IE6 instructions in a separate file (ie6_fixes.css) and not clutter up our page.tpl.php file.
Step 2
Secondly, then, create the new CSS file. Give it a title of ‘ie6_fixes.css’, and save it to the root of your theme folder – i.e. the same place as your normal style.css file.
Now insert the following into your new ie6_fixes.css file. Again, as with the previous step:
- replace ‘your_theme_name’ with the actual name of your theme folder, and also
- replace ‘#div_1’ with your own div id or class.
(Line wraps marked »):
#div_1 {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src='/sites/all/themes/your_theme_name/images/a_picture.png', sizingMethod='crop');
}Again, as before, if your Drupal install is in a subfolder (e.g. www/garland) you may instead need to use:
#div_1 {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader »
(src='/your_theme_name/sites/all/themes/your_theme_name/images/a_picture.png', sizingMethod='crop');
}And that’s it! If we now look again at our .png file as viewed in IE6, the result is exactly as it should be.
A small caveat:
I haven’t been able to get this method to work with repeating backgrounds yet. An obvious example would be if you wanted a shadow down either side of a centered design. The ideal way would be to cut a small image (maybe 1px high) and then repeat it vertically. My solution was to just create a larger/extended .png file which covers the whole repeating area. Whilst this solution isn’t perfect, it’s certainly not terrible either. Even though we are making a large (in dimensions) file, because it is mostly transparent the actual file size will remain relatively small, and it certainly looks a lot better than an IE6 mess!
Bookmark/Search this post with:
Hi, I'm Laurence and this is my Drupal blog.
Don't Make Me Think!
Pro Drupal Development
PHP Cookbook
Will You Please Be Quiet, Please?
Thanks for this useful tip! I didn't knew you could enable alpha transparency for pngs in IE6 by just using css..
The PNG fix for IE can actually work in IE 5.5 (not 5.0)
I think your best bet for this fix would be to use a script like the one from WebFX (http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html), or its improved implementation by deanEdwards (http://dean.edwards.name/IE7/notes/#PNG) to automate the process for every transparent PNG.
That way you don't need to target specific divs, and you can keep your style sheet clean.
I keep avoiding .pngs for this reason, but I think I'll give this a try.
Cheers.
thanks for the tip.
PS you have a really nice looking site !! great theme work
You need to embrace the Firefox revolution and this will solve your problems... well, 90% of them. For the remaining 10% you'll still need IE. :)
Thanks for this. With what little access I have to PCs running ie6, it appears to work.
It was important to me to have a solution that did not involve javascript on the template page.
Darn. I thought this worked, but I guess the javascript solution I did before was still in the cache. It's really only one image (site logo) I need to apply the filter to. Is there a direct way to do simply that?
But how does Drupal do it? In Garland the Druplicon's background looks transparent (at least you can freely change the colors of the background gradient with the Colors module), and it works perfectly under IE6.
Surprisingly, themes/garland/logo.png has no transparency at all! As far as I can tell, Drupal can do it without resorting to IE-specific hacks, but how?
Hello all,
@ salvis - you kind of answered your own question. The Druplicon which Garland uses is a png but does not, as you said, contain any transparency. Each time you change the Garland color scheme it regenerates all the images necessary for the theme, including the logo. The image for the logo is then just positioned so as to appear like there is transparency, when really there isn't. If, for example, you were to reposition the logo you would see that the logo graphic doesn't line up with the header background gradient behind it.
@ Jonathan - the simplest answer in your case might well be to achieve the effect you need by just cutting the logo image so that it also contains any background, and then position it, like the Garland logo, so that it appears as if the transparency exists when actually it does not.
@Tom - if only a lot of people still didn't use IE6....one day perhaps.
Saving the PNG as Indexed color will give a transparency which works with IE although anti-alias and color pallet are some things which you'll need to work around. It's not an ideal solution -- quick and dirty. Works with IE 5.x.
For repeating backgrounds I think you need to specify either a width or a height argument.
(height:100%; is normally best as... well... it does not seem to mean anything at all.)
IE6 must die!
Good god do I hate IE 6.0... thanks for this tutorial.
IE 6.0 is the new Netscape btw.
i agree with tom. IE must die. Exactly we must kill IE.
The ideal way would be to cut a small image (maybe 1px high) and then repeat it vertically. My solution was to just create a larger/extended .png file which covers the whole repeating area.
How about an src image rather than background? I do hate IE6 but theres no other option to not deal with it. So lets fix it guys...
Thanks for this really useful article.Great cheat sheet, I appreciate it very much.
Nice and interesting article, thank u for the tipp!
btw- nice designed blog :-)
Nice tip, but realistically nothing new as this trick has been used for ages.
I still prefer the .htc trick as it can be applied to many (all) elements, VS an individual one. This allows you to use multiple CSS classes with PNG backgrounds. Although, still, no repeating backgrounds with PNG files.
One suggestion is to replace '/sites/all/themes/your_theme_name/' with the php code: print base_path().path_to_theme();
Has anyone solved the problem of IE6 requesting an image with the relative URL of "none" for every image that has "background-image: none" specified in the CSS? This can cause an awful lot of 404 Not Found responses, which must slow down IE6's rendering of the page somewhat.
Perhaps setting the property to "none" using javascript works, while using plain CSS doesn't?
Is there any other way to tell IE6 to use no image, and not one called "none", using CSS?
People still using IE more and more, still i think firefox has beaten IE, and i always avoid to use IE.
hi man first fix your site in IE6 for png i dont like IE but we have to use it. and ur style is also out of the box
IE is very good. thanks
Nice and interesting article, thank u for the tipp!
btw- nice designed blog :-)
Very sneaky. Well done. I doubt you'll need to go through so many hoops for Chrome (or at least, I would hope not). Thanks for the tip. I need all the coding help I can get.
Hi All,
i am getting a strange problem using with PNG images. Some third party company gave static html pages. it is working fine in ie6 also. but when ever i used css related to ie6 javascript funtionality is not working. when i disabled that css javascript funtion is working. can you sugges me how to resolve this proble. when ever i disabled ie6 related css images not coming in a gray color shade.
can you suggest some steps to reslove this issue.
hmmm good solution i think, very helpful!
Let me just try it :)
My Favourite is and will be Firefox!
But you are right mostly people use IE, however.
Thx for your tip! Nice one :)
Thanks Great article. It works well for me.
But the people who use Firefox is growing very strong. I also only use the firefox.
Yes i like Firefox too!
I think it is more comfortable than all the other browser, just my cents.
Yes, Firefox is more comfortable than all the other browser but i used IE...
i think it is habit...
Some nice tutorial and a good solution.
I prefer Firefox, but still you have to think about IE.
I stay with the Firefox Browser. Its way better than microsoft ie. I don't understand why people still use ie. There are security reasons and usebility things. But thank you for your help. There are too many people still using ie.
Thanks for this tip. I alhays use jquery.pngFix.js
Thx for this helpfully post. It`s always the same problem when a new IE is coming. Old hacks are not working. In FF oder the most other browsers it looks good an in all the different IE`s it looks not so good.
Thank you very much
I was searching for an solution that did not involve javascript on the template page for so long.
Very sneaky. Well done. Thanks for the tip. I need all the coding help I can get.
Thanks for this tip!
The Snurkdipodator searced a lon time for this. Thanks for it!
Use PNG Fix module for this bug.
Lange gesucht warum meine Webseite in unterschiedlichen Browsern so unterschiedlich aussieht. Eine Fußmatte hat nun mal eine bestimmte Größe und farbe und die soll bei allen gleichaussehen. Danke für den Tip
Claudi
Attention toutefois, le contenu présent dans l'élément "retraitée" n'est plus accessible.
Impossible de mon coté de sélectionner le texte écrire dans un input ...
Sinon ca fonctionne parfaitement.
Merci pour l'info et le code
Awesome posting, thank you for sharing.
I keep avoiding .pngs for a long time, but I think I'll give this a try.
Merry Christmas.
Thx a lot. Keep Up the good work. Very cool posting!
Hey awesome posting my friend!
Do you have some more articles like that?
How about an src image rather than background? I do hate IE6 but theres no other option to not deal with it. So lets fix it guys...
Thanks for this great post - I will be sure to check out your blog more often.
Post new comment