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
dialog-IE8.jpg
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.
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.
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.
ASKER
This is a jQuery widget, https://api.jqueryui.com/dialog/
Do I need to download and install the ThemeRoller to our web server?
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>
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.
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.
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
ASKER
jquery-ui.js
jquery-ui.min.css