Error in the background/overlay of a jQuery dialog widget with the modal option Error in the background/overlay of a jQuery dialog widget with the modal option wordpress wordpress

Error in the background/overlay of a jQuery dialog widget with the modal option


It's your CSS. Change the repeat-x to just repeat:

.ui-widget-overlay {    background: url("../img/overlay-bg.png") repeat-x scroll 50% 50% #000000;    opacity: 0.5;}

to:

.ui-widget-overlay {    background: url("../img/overlay-bg.png") repeat scroll 50% 50% #000000;    opacity: 0.5;}


I've seen this being caused by jQuery UI not residing in the current URL base, so its CSS doesn't load. In Safari and Firefox at least, the browser can't find the image so it renders a repeat-x box of default size, which causes the white bar.

Some options are:

  1. Move jQuery UI back inside the URL base.
  2. Change the CSS to point to the absolute URL, although there's a lot of URLs in the jQuery UI CSS files, and it makes upgrading a pain.
  3. Move just the images directory to the URL base.
  4. Override the selector in your own CSS to give it the correct URL.
  5. Look for a second copy of jQuery which might be in another location as an inclusion for another library, that might be overriding your main jQuery.