• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1573
  • Last Modified:

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
0
lapucca
Asked:
lapucca
  • 6
  • 5
  • 3
1 Solution
 
lapuccaAuthor Commented:
0
 
Dave BaldwinFixer of ProblemsCommented:
Which version of jQuery are you using?  The newest version (jQuery 2.x) does not work with IE less than IE9.
0
 
Scott Fell, EE MVEDeveloperCommented:
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.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
lapuccaAuthor Commented:
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.
0
 
Dave BaldwinFixer of ProblemsCommented:
You should consider getting jQuery v 1.10.1 to go along with the jquery-ui version.
0
 
lapuccaAuthor Commented:
This is a jQuery widget, https://api.jqueryui.com/dialog/ 
Do I need to download and install the ThemeRoller to our web server?
0
 
Dave BaldwinFixer of ProblemsCommented:
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

0
 
lapuccaAuthor Commented:
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.
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
lapuccaAuthor Commented:
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
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Scott Fell, EE MVEDeveloperCommented:
When you start fooling around with work arounds you will just get yourself into trouble.

Using jquery 1.1x with the matching jquery ui
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

Open in new window


First test the issue out on the jquery site http://jqueryui.com/dialog/ and if you can't duplicated it, the  problem is with other issues in your code.

>This is a Intranet so I can't provide access
Create a simple test case with minimal data that can be public. Post just that link.  Another option is to recreate your page on jsbin.  I have added the required files for you here http://jsbin.com/cogumozu/1/edit  We don't need your 1000 lines of code, just the test case http://css-tricks.com/reduced-test-cases/

It's very possible that creating a simplified test will not be able to reproduce the issue.  This is where creating a public link will help us help you.
0
 
lapuccaAuthor Commented:
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.
0
 
Scott Fell, EE MVEDeveloperCommented:
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.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 6
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now