Transparency in Internet Explorer 6Transparency in Internet Explorer 6
Posted by: admin in Joomla, Internet Explorer, CSS on Mar 20, 2008
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.
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
#yourdiv
{
width:433px;
height:133px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/blog/your_logo.png');
}
html>body #yourdiv
{
background: url('/your_logo.png') no-repeat 0 0;
}
We kept the best solution for last. You'll need a piece of javascript for this. Just follow the instructions on this page: IEpngFix
TrackBack URI for this entry
Subscribe to this comment's feed
"Solution 3: png fix
For this third solution, you'll need a piece of javascript. Just put the following in the header of your template:"
I don't see the JavaScript, could you post it and maybe also tell how to get it into Joomla.
Regards, Urbaniak