Relative path in filter: progid:DXImageTransform.Microsoft.AlphaImageLoader not working [#185866]

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...

Comments

Comment #1

stella CreditAttribution: stella commented 31 October 2007 at 13:08

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.

Thanks,
Stella

Comment #2

stella CreditAttribution: stella commented 31 October 2007 at 13:17

Status:

Active

» Closed (won't fix)

Added note to README file and checked into CVS.

Cheers,
Stella

Comment #3

meleonid CreditAttribution: meleonid commented 31 July 2008 at 09:52

Hi,

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 }

Comment #4

stella CreditAttribution: stella commented 3 August 2008 at 20:34

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

Cheers,
Stella

Comment #5

stella CreditAttribution: stella commented 15 August 2008 at 11:17

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.

Cheers,
Stella

Comment #6

DolfAndringa CreditAttribution: DolfAndringa commented 27 August 2008 at 15:08

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.
Cheers,

DOlf.

Comment #7

Roman S CreditAttribution: Roman S commented 10 October 2008 at 18:36

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],
              this.style.background = "none",
              this.style.filter = "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.