Link to home
Start Free TrialLog in
Avatar of lapucca
lapucca

asked on

jQuery Dialog isn't formatted properly in IE8 browsers

Attached is the screen shot of this close button outside of the dialog.  It's displaying properly in both Chrome and FF.  I also attached the jQuery that we're using for this.
dialog-IE8.jpg
Avatar of lapucca
lapucca

ASKER

Avatar of Dave Baldwin
Which version of jQuery are you using?  The newest version (jQuery 2.x) does not work with IE less than IE9.
The best thing to do for us to help you is to post a link to your code.  If you feel your content may have private data, just create a sample test case and post that link for us.
Avatar of lapucca

ASKER

Sorry, I forgot to provide the test file.  This is a Intranet so I can't provide access but I do have this test file.  However, The test file works fine in IE 8.  It's when I use the jQuery code in our application that it creates the problem in IE 8.  

The following is what is used in our web app.  It's a bit different than what I used in my test file.  
jquery-ui.min.css - v1.10.3 - 2013-05-03

jquery-ui.min.js - v1.10.1 - 2013-02-15
jQuery v1.7.1

I wonder what i need is to put in some css statement that if IE8 then move the button to the left, something like that?
Thank you.
You should consider getting jQuery v 1.10.1 to go along with the jquery-ui version.
Avatar of lapucca

ASKER

This is a jQuery widget, https://api.jqueryui.com/dialog/ 
Do I need to download and install the ThemeRoller to our web server?
I don't know what ThemeRoller is.  At the bottom of the jqueryui page you have linked is this demo code showing that they are loading the current version of jquery, jquery-1.10.2.js.  I could be wrong but I thought that the UI versions were supposed to match the main jQuery versions.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>dialog demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
</body>
</html>

Open in new window

Avatar of lapucca

ASKER

I can have both jQuery-ui js and css files to be version 1.10.3 on our web server.  The jquery.js file is older at 1.7/1.  However, are you suggesting upgrading that to jquery.min.js 1.10.3 version?  I google but din't find find this version.  I think what works in the test file is with 1.10.1.  Will that work or can you tell me where to download 1.10.3 for jquery.min.js

Thanks.
The available versions are listed here on the jQuery web site: http://jquery.com/download/  Down at the bottom of the page are the older versions including 1.10.1.  And this page http://code.jquery.com/jquery/ provides links to more versions that you can download or link to.
Avatar of lapucca

ASKER

The test file works fine and the jquery and jquery-ui version didn't match either but I will sync them seems like a good idea.  Is there a risk upgrading jQuery to newer version on our web server?  Would it break any current code or plug in?

Also, I was playing around in Firebug and noticed I can create the IE8 problem in FF if I disable the "right:0.3em" in the screen shot file attached.

Thank you.
firebug2.jpg
There is always some risk... but I haven't encountered any specific problems myself.  If you 'upgraded' to jQuery 2.x it probably wouldn't work because they say it does not support IE less than IE9.
ASKER CERTIFIED SOLUTION
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of lapucca

ASKER

Sorry for the delay in responding.  I did try using all the matching and proven working when using my test file jquery libraries.  However, it still doesn't work right with IE8.  I very much appreciate the tip to setup an example but this is a SharePoint 2013 web page so that's not possible to simulate external of what you recommend.  
Thank you.
Do you really get a lot of users for ie8?  Anybody using windows XP at this point is at risk because it is not being updated.