Transparency in Internet Explorer 6

Posted: September 30, 2010 in CSS, HTML, Joomla
Tags: , ,

Everyone who ever made a template for joomla, or a web design in general, knows the feeling: finally, after hours or days of work you’ve created something that looks great…until you check how it looks in other browsers. A template that looks great in one browser can be a total mess in another browser and it can turn out quit a job to fix this. Sometimes fixing this can take as much time as creating the template itself. That’s why it is important to keep the differences between browsers in mind, when you create your template. Many starting web designers make the mistake to start thinking about this when the design is nearly finished. This will add extra work to your design which could have been avoided. And when you face a deadline, it will give you some headaches too. So I’ve decided to write a series of articles about these differences between browsers that you should think about.

This first topic is transparency. First, let’s explain what exactly the problem is with transparency. As with all problems, it is important that you fully understand the problem before you solve it.

Image formats and it’s transparency

There are a lot of image formats. One of the criteria to decide which format you should use, is the transparency. Let’s start with an example. Below you see two images. The left one is part of a sunset image and is the background I want to use. The right one is an ‘Ulti Joomla’ logo that I want to use in my web design on top of the background. This logo should have a transparent background and the most outer lines of the logo are semi-transparent.

The first question to ask yourself for each image you want to use, is which format you should use. For the logo, let’s look at the options in terms of the transparency we need.

jpg: The jpeg format simply doesn’t support transparency. If I would make my logo in jpg and place it on top of the background, the background would disappear, like you can see in the image below. So jpg is clearly not what I want.

gif: GIF does support transparency. But it supports it in a rather simple way: a pixel is either transparent or it isn’t. No values in between. While this may be ok for most situations, for what we want here it is not good. The outer semi-transparent lines can not be displayed as we want and you’ll get a result as shown below. So gif isn’t any good either.

png: The PNG format is the most recent of the three and has the best support of transparency. It supports the so-called alpha channel. This means you can have any transparency between 0 and 100%. Great, exactly what we want as you can see in the example below.

Internet Explorer 6
Now we know which format we want to use, we come to the real problem: internet explorer 6 doesn’t support the alpha channel. In internet explorer 6 it will look like the image below, which is of course not wat we want.

Let’s have a look at the possible solutions.

Solution 1: plugins

The easy way would be to install an extension. There are two extensions existing, which should solve the problem (Ultimate PNG Fix Plugin and CorrectPNG). I’ve tried them both on joomla 1.5 (with legacy plugin enabled), but none of them is working for me. You can try them yourself, maybe you’ll have better luck.

Solution 2: css hack
There is an easy css hack to allow a png background with transparency. Although this is not what we’re looking for in this example, it’s worth mentioning. If you have a transparent background, this is what you’re looking for! Just put following piece of code inyour css:

#yourdiv
{
width:433px;
height:133px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’your_logo.png’);
}

html>body #yourdiv
{
background: url(‘/your_logo.png’) no-repeat 0 0;

}

The first part will show the background in IE6. The second part is for the webbrowser which understand inheritance like Firefox.

Solution 3: png fix

We kept the best solution for last. You’ll need a piece of javascript for this. Just follow the instructions on this page: IEpngFix

Advertisements
Comments
  1. K. K. Pal says:

    Good solution boss.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s