Major probelms with Alpha Image Loader

Hi there.

I'm currently building a front-end and having a few problems. One is to do with the use of transparent .png images as backgrounds.

I have a div that has a 24bit transparent .png as a background image. This works fine in IE7 and Firefox, but obviously not in IE6, for which I have created an IE specific stylesheet and added style rules to remove this background and load in the image via the Alpha Image loader filter.

Firstly here is the code from my HTML

<link rel="stylesheet" type="text/css" media="all" href="css/modules.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/ie.css" />

Within the modules CSS stylesheet I have styled the div in which the image will act as a background as such:

div#main_image
{
background : url(../images/modules/Untitled-1.png) no-repeat top left;
height : 274px;
position : absolute;
left : -20px;
width : 332px;
}

Now in the IE stylesheet I have styled the div like such:

* html div#main_image
{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/modules/Untitled-1.png', sizingMethod='crop');
background: none;
}

In my mind this should work, yet all I get is a blank div with no background image in IE6.

Any help resolving this matter would be greatly appreciated.

You've set background: none; of course you're not going to get an image!? Take that out and the filter will display the image in the background

I use:


.thediv {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='resources/images/image.png');
}

Thanks for the reply.

However, that doesn't seem to solve the problem.

Doing what you've suggested simply displays the image with a blue background (not transparent). The reason for knocking the background out is so that it doesn't display in ie, and the filtered image is displayed instead.

Ah wait a second... you have to do it like this (make it a class, not an id):


.thediv {
width: 142px;
height: 63px;
float: left;
}

.thediv[class] {
background-image: url(images/image.png);
}


in your normal stylesheet, so that everything that supports the [class] should display the nice transparent image... then have what I posted above in your IE6 specific stylesheet

You've set background: none; of course you're not going to get an image!?

Nope, what the OP is using does work perfectly. I’ve used this method in numerous cases. I just happened to have the case today where a client was asking me about no images in IE 6 (and it concerned only those images with alpha image loader). After a while of pondering and not knowing what it could be I found that it was the file path that was different.

For some reason on my local machine the image path in the alpha image loader had to be relative to the HTML document, not the alternative IE stylesheet which I had in a /css directory. So instead of ../images/blabla.png I had to use images/blabla.jpg.

Then I suggested my client to use an absolute path and it worked.

I've noticed the same thing when using the alpha filter for IE6. If I store my images in a 'resources' folder, and then another folder called 'images', with the stylesheets also within this 'resources' folder I would create a path in the stylesheet as images/image.jpg. But for the ie-stylesheet I have to add /resources/ to the beginning of the path before IE will be able to find it! Very strange indeed as all stylesheets are kept in the same place on the server and the images don't move?

Do you have a link to this method? It seems a little easier than the one I'm using at the moment which requires [class] to be added to the normal stylesheet. Cheers!

Ah, that's brilliant!

Thanks a lot for all your help guys.

Do you have a link to this method? It seems a little easier than the one I'm using at the moment which requires [class] to be added to the normal stylesheet. Cheers!

I’ve used it a couple of times on this website (http://black-coffee.info) to get the semi-transparent dropdown menu background in IE 6. That menu was a challenge to implement - can’t even blame the designer because it was me, haha.

However, I usually have my styleseets in the root directory so I don’t have these path problems… usually.