0

I have a jQuery UI dialog on a page of mine. The "X" in the upper right-hand corner is made possible by this little piece of CSS:

.ui-widget-header .ui-icon {
  background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/;
}

The problem is that that doesn't work. It only works when I add a leading slash like this:

.ui-widget-header .ui-icon {
  background-image: url(/images/ui-icons_222222_256x240.png)/*{iconsHeader}*/;
}

I know I could just make this change in the jQuery UI files, but that doesn't seem right. It seems hacky, plus, when I upgrade to a newer version of jQuery UI, all my changes will get blown away.

How can I make my jQuery UI images work? I don't know if the fact that I'm using Symfony2 matters here but I thought I'd mention it just in case.

Jason Swett
  • 43,526
  • 67
  • 220
  • 351
  • Update: I've found a more specific issue that I think is causing the problem: http://stackoverflow.com/questions/10397450/symfony2-is-trying-to-feed-my-css-paths-through-routing-but-i-dont-want-it-t – Jason Swett May 01 '12 at 12:12

2 Answers2

0

Should work provided your files are in the right place. This other SO Question has lots of references that illustrate how relative urls in stylesheets are relative to the stylesheet itself, not the containing document.

So as long as you aren't breaking up the jQuery UI download and moving the assets around, should work with a relative URL just fine.

Community
  • 1
  • 1
Peter Bailey
  • 105,256
  • 31
  • 182
  • 206
0

I had the same problem. The problem was the name to the CSS-file in my index-file. First I had jquery-ui-1.10.1.custom.css. I changed it to jquery-ui-1.10.1.custom.min.css and then it worked.

Jeroen
  • 1