JQuery-UI and CSS Handler

This is the place to report bugs and get support. When posting in this forum, please always provide as much detail as possible.

Please do not report problems with a custom build or custom code in this forum. If you are producing your own build from the source code and have problems or questions, ask in the developer forum, do not report it as a bug.

This is the place to report bugs and get support

When posting in this forum, please try to provide as many relevant details as possible. Particularly the following:

  • What operating system were you running when the bug appeared?
  • What database platform is your site using?
  • What version of mojoPortal are you running?
  • What version of .NET do you use?
  • What steps are necessary to reproduce the issue? Compare expected results vs actual results.
Please do not report problems with a custom build or custom code in this forum. If you are producing your own build from the source code and have problems or questions, ask in the developer forum.
This thread is closed to new posts. You must sign in to post in the forums.
3/4/2011 10:42:14 AM
alkos333
Gravatar
Total Posts 156
View Posts

JQuery-UI and CSS Handler

csshandler appears to mess up the following widget overlay class when jquery-ui-1.8.10.custom.css is added to style.config.

The rule in the css file itself looks like this:

.ui-widget-overlay { background: #c4c4c4 url(img/ui/ui-bg_flat_0_c4c4c4_40x100.png) 50% 50% repeat-x; opacity: .30; filter: Alpha(Opacity=30); }

However, when included in the style.config, Firebug reports a  404 on the image file because URL is rendered like so:

http://netassist1.univrel.niu.edu/Data/style/niufnd-2010/img/ui/ui-bg_flat_0_c4c4c4_40x100.png)%2050%%2050%%20repeat-x;%20opacity:%20.30;%20filter:Alpha(Opacity=30

Indeed, when I look at the CSS applied to the widget overlay on the page, it looks like this in csshandler generated output:

.ui-widget-overlay { background: #c4c4c4 url('/Data/style/niufnd-2010/img/ui/ui-bg_flat_0_c4c4c4_40x100.png) 50% 50% repeat-x; opacity: .30; filter:Alpha(Opacity=30'); }

Notice where the quotes appear   "url('" and   at the end of Opacity=30  assignment.  It treats that whole segment as an URL.  I haven't had much time to analyze URL_REGEX in CSSHandler.cs, but there might be something going on there.

 

 

3/4/2011 11:13:24 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: JQuery-UI and CSS Handler

I've dealt with this issue a number of times, it can be solved pretty easily.

The mojo CSS handler really needs urls to be single quoted but those Aplha(Opacity) should not be quoted.

So what you can do is quote the url and then move the Alpha to a separate line with the same selector so it doesn't interfere with resolving the url for the image like this:

.ui-widget-overlay { background: #c4c4c4 url('img/ui/ui-bg_flat_0_c4c4c4_40x100.png') 50% 50% repeat-x;  opacity: .30;  }
.ui-widget-overlay  { filter: Alpha(Opacity=30); }

Hope it helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.