How to fix Images and CSS relative path in AlphaImageLoader

You should be aware that progid:dximagetransform.microsoft.alphaimageloader expressions uses a relative path to the page and not to the CSS folder, so it may lead in a relative image path problem. It was a weird problem when I first noticed that the images aren’t shown properly in Internet Explorer only, so after going back and forth I noticed that issue was caused by dximagetransform alphaimageloader using a weird relative path.

I was using that custom IE CSS rules in an application using CodeIgniter Framework, In order to solve it, I did a change in my htaccess file to rewrite all images referenced from the ie.css file to the right folder, and avoid the relative path problem. This article also helped to figure the problem.

This is the simple rewrite rule that I added into htaccess file:

# Fix wrong relative path on images caused by AlphaChannel support in IE CSS
RewriteRule ie_images/?([^/]+)\.(jpe?g|png|gif) images/$1.$2 [L]

Then, inside the ie.css file, when I needed to reference an image inside the alphaimageloader, I used this:

filter:progid:dximagetransform.microsoft.alphaimageloader(src=’ie_images/image.png’, sizingmethod=’crop’);

So, finally when someone use Internet Explorer, the image under ie_images will be replaced by the right folder specified in the htaccess rewrite rule.

Advertisement

Did you like it?

One Response to “How to fix Images and CSS relative path in AlphaImageLoader”

  1. vard
    June 6, 2012 at 2:12 pm #

    I use this for solve the problem with jquery.fancybox plugin, it works great.
    Very elegant solution, thanks !

Leave a Comment