jQuery Dialog isn't formatted properly in all 3 browsers

This pop up works fine until I merge to our application.  The dialog Close "x" doesn't show up on the upper right and in one browser it's outside of the dialog box.  I tried in FF, Chrome and IE.  
I downloaded the css, http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/black-tie/jquery-ui.min.css , and save it to the web server.  

Is it because our application is using a different jquery library, jquery1_7_1.min.js and jquery-ui.js(1.10.1)?  The one  I have in my file is "//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js

Attached is my protocol file that works fine.  I extracted the jQuery code and merge into our app, now the format is not working for the Close icon.

Please advise if I should replaced what jquery files on our web server to make this work.  Also is there a risk of breaking our web app if I upgrade?

Thank you.
index7.html
lapuccaAsked:
Who is Participating?
 
GaryCommented:
The image folder should be in the folder where the jQuery UI CSS is
0
 
GaryCommented:
jquery1_7_1.min.js and jquery-ui.js are not the same thing, one is jQuery and one is the jQuery UI

Got a link to the page? You probably just have a css conflict.
0
 
lapuccaAuthor Commented:
It's an Intranet site so I can't provide access here.  Yes, i understand those 2 are different files. However, my file that work contains different version for both files than what's on our web server.
Attached is pretty much the header included in our master page's header.  Appreciate your help.
header.html
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
GaryCommented:
I cannot debug what I cannot see.
If they are using different versions of jquery then try changing the version in the site to the one where it works.
0
 
lapuccaAuthor Commented:
Attached are a couple of views of this jQuery dialog that doesn't show the Close icon properly.  There are several error from the Firebug saying that it can't upload the bg images,
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: url("images/ui-bg_glass_40_111111_1x400.png") repeat-x scroll 50% 50% #111111;
    border: 1px solid #777777;
    color: #E3E3E3;
    font-weight: normal;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: url("images/ui-bg_glass_40_111111_1x400.png") repeat-x scroll 50% 50% #111111;
    border: 1px solid #777777;
    color: #E3E3E3;
    font-weight: normal;
}

Am I supposed to supply this icon image?
Dialog-FF.jpg
dialog-IE8.jpg
Dialog-firebug.jpg
0
 
GaryCommented:
Those images should be in the jQuery UI image folder.
0
 
lapuccaAuthor Commented:
These 2 attached files in fire bug when I click on the 2 span tags.
Dialog-firebug2.jpg
Dialog-firebug3.jpg
0
 
lapuccaAuthor Commented:
Ha!  In my test file, I included the google script.  In our Intranet for some reason if I include the google script then it won't work.  I have to save the library on the web server.  So, how can I download these images to our web server drive?
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js 
I tried
http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/images 

but that doesn't work.

Thank you.
0
 
GaryCommented:
They would have been part of the zip that your black theme came in, if need be just redownload the zip package.
0
 
lapuccaAuthor Commented:
Ha!  I didn't download any zip.  I only went to those 3 url and from the browser save the 3 files that were in my prototype file.  What black them zip file do I need to download and from where?  

From here, https://api.jqueryui.com/dialog/ , I click on the Theming link on the left, and I still don't see any zip download.

thank you.
0
 
GaryCommented:
0
 
lapuccaAuthor Commented:
Thank Gary, I downloaded all the png files there but still missing many like
ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_bbbbbb_256x240.png");
}
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}

Where can I download this entire set of images needed for this widget?

Thank you.
0
 
GaryCommented:
They are listed on that page.
0
 
lapuccaAuthor Commented:
okay, I unzip the jquer-ui 1.10.4 and found a image folder under the css folder.  I copied that to the web server image folder.  It has those missing icon files but my pop up dialog still not displaying the close icon properly!
0
 
GaryCommented:
Right click where the close icon is supposed be and click Inspect Element with Firebug.
What image is showing in the css?
If you mouseover the image does it show up? If not then the paths are wrong. Check the path in the css to where you have actually put the images - they should be in a sub folder of the UI folder
0
 
lapuccaAuthor Commented:
0
 
lapuccaAuthor Commented:
It's showing it can't locate the image.  The master file that includes the script and css is at a folder that has scripts, css and images folder.  Scripts folder is where the jQuery scripts are at.  The images are downloaded to the images folder but it cant find it so I created a images folder under the scripts folder and it still can't find it. Really at a lost now.
0
 
GaryCommented:
Hovering over the background image
images/ui-icons_ededed_256x240.png

...does it load?
0
 
lapuccaAuthor Commented:
Ha!!!  That did it!  It's working now.  Thank you so very much for your patience in helping me with this.

I open another question related to this one, http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28392667.html.
 
Maybe you can help me with it.  The button is outside of the dialog box in IE8.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.