In the file css/lightbox_lite.css there is this IE specific code.

* html #overlay {
  background-color: #333;
  back\ground-color: transparent;
  background-image: url(../images/blank.gif);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="..images/overlay.png", sizingMethod="scale");

The problem is that the AlphaImageLoader uses the current page's (relative) address instead of the css's relative address. So I get 404 error's (and no overlay.png is loaded). When you change it into

  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/sites/all/modules/lightbox2/images/overlay.png", sizingMethod="scale");

it works, BUT it causes problems for folks who have installed Drupal in a subdirectory (instead of the root)

I don't know if there is a way for Drupal to insert it's current rootpath into the css file? That would be a 'good' solution...


stella’s picture

I've been looking into this issue and I can't see any way around it. I think for now, I'll add a "known issues" section to the README file so people know to modify the css file when they run into this problem.


stella’s picture

Status: Active » Closed (won't fix)

Added note to README file and checked into CVS.


meleonid’s picture


You could try to play with Javascript. I've created somthing similar for Wordpress.
In code below I detect relative path from CSS include (href property of link html element) and generate add AlphaImageLoader in runtime right in CSS:

* html .png {
behavior: expression(this.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + (function(){var links=document.getElementsByTagName('link');for(var i=0;i }

stella’s picture

Can you paste in the full line of code? If you put it in <code> tags it will be easier to read.


stella’s picture

This line has been removed from the css file as the opacity is now set via the javascript, so it's no longer an issue.


DolfAndringa’s picture

Well, for anyone still wondering. It is possible to use relative url's, but use them relative to the php file. In joomla for instance the whole site is served by index.php. There is a folder templates/[templatename]/css which contains my css files. There is also a folder templates/[templatename]/images which contains images that I use in my css files. Instead of calling AlphaImageLoader(src='../images/someimage.png') I call AlphaImageLoader(src='templates/[templatename]/images/someimage.png'). Of course this less flexible than url's relative to the css file, but at least it works irrespective of the url on which the cms is installed.


Roman S’s picture

In case anyone else stumbles into this thread, I found the following solution to a similar problem of mine:

div#logo {
  width: 390px;
  height: 63px;
  background: url(images/logo.png);
  cursor: pointer;
  _behavior: expression(  /* IE6 only - transparency with proper handling of relative URLs */
              this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1],
     = "none",
     = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ")");

This is not an exact solution for the original post, but can be modified to suit other needs. My logo div now has proper cross-browser transparency AND works with relative paths.

shima’s picture

you just must add this : enabled=true !!!
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='path');

sinasalek’s picture

Version: master » 5.x-2.x-dev

This solution propery

sinasalek’s picture

Version: 5.x-2.x-dev » master