My Drupal Blog - Drupal 5.1 + PNG + IE6 - Comments

Has anyone solved the

Anthony Cartmell — Wed, 11 Jun 2008 10:04:02 -0700

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?

Nice tip, but realistically

Yuriy — Wed, 28 May 2008 11:01:36 -0700

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();

Nice and interesting

Tobi — Tue, 26 Feb 2008 20:28:28 -0700

Nice and interesting article, thank u for the tipp!
btw- nice designed blog :-)

Thanks for this really

Dekoration — Thu, 21 Feb 2008 11:09:00 -0700

Thanks for this really useful article.Great cheat sheet, I appreciate it very much.

How about an src image

Ivant — Tue, 29 Jan 2008 23:48:05 -0700

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...

The ideal way would be to

Artikelverzeichnis — Sun, 13 Jan 2008 23:35:12 -0700

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.

i agree with tom. IE must

palyaco — Tue, 25 Dec 2007 11:04:01 -0700

i agree with tom. IE must die. Exactly we must kill IE.

Good god do I hate IE 6.0...

Spinn3r Web Crawler Boy — Sat, 17 Nov 2007 20:37:17 -0700

Good god do I hate IE 6.0... thanks for this tutorial.

IE 6.0 is the new Netscape btw.

IE6 must die!

tom — Wed, 19 Sep 2007 13:04:56 -0700

IE6 must die!

For repeating backgrounds I

You — Sun, 09 Sep 2007 14:45:19 -0700

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.)

Saving the PNG as Indexed

Chris Herberte — Wed, 08 Aug 2007 14:46:42 -0700

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.

Hello all, @ salvis - you

Laurence — Thu, 02 Aug 2007 05:02:48 -0700

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.

But how does Drupal do it?

salvis — Wed, 01 Aug 2007 05:57:06 -0700

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?

Darn. I thought this worked,

Jonathan — Mon, 30 Jul 2007 13:15:30 -0700

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?

Thanks for this. With what

Jonathan — Mon, 30 Jul 2007 11:59:05 -0700

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.

Drupal 5.1 + PNG + IE6

Laurence — Mon, 09 Jul 2007 03:13:47 -0700

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!