jquery UI button not working in IE 9?

Question

There seems to be some problem with jquery UI buttons in IE 9?

This is how they look normally:

enter image description here

In IE 9 they look like this:

enter image description here

Html of the button is:

        <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" >

jquery code:

$(document).ready(function() {

    $('.input-submit').button();

});

Is this a known problem? I am using the latest jquery UI (downloaded yesterday). How to solve it?

are you sure you have all CSS downloaded, or some of your own CSS isn't overwriting the jQuery UI CSS? — Hristo, Mar 26 '11 at 21:37
@Hristo Yes. I remove all stylesheets except the jquery UI one from the page and it still looks like above. — Richard Knop, Mar 26 '11 at 21:40
also... I'm not sure if this is the cause, but `` elements are self-escaped, self-closed (I'm not sure of the term), but it should be `` — Hristo, Mar 26 '11 at 21:45
yes I mean IE9 firebug equivalent, I think it's 'developer tools' — manji, Mar 26 '11 at 21:49
@manji I see many jquery UI styles. I don't know how to copy styles from IE developer tools but they look ok. It works in IE 8, IE 7. — Richard Knop, Mar 26 '11 at 21:53
It seems to work. Created this simple jsfiddle using the code you had above. Only problem is IE 9 doesn't put the text in the centre (vertically) of the button though. Using jQuery and jQuery ui provided in jsfiddle and using Microsoft css from CDN http://jsfiddle.net/2r57S/3/ — jwwishart, Mar 27 '11 at 22:44
@jwwishart What if I sent you a complete HTML of a page where the jquery ui button is not working for me. Would you look at it? — Richard Knop, Mar 28 '11 at 18:54
@RichardKnop. I haven't received anything :oS I'll try again with different email address. — jwwishart, Apr 06 '11 at 22:23
No I didn't Richard. This is odd. Try my contact page maybe? http://jwwishart.blogspot.com/p/contact.html — jwwishart, Apr 11 '11 at 07:19
@jwwishart Ok here it is online, I have uploaded an example: http://richardknop.com/foo.php — Richard Knop, Apr 13 '11 at 15:00

score 3 · Accepted Answer · edited May 23 '17 at 10:30

The CurvyCorners javascript is interfering with the styles declared by jQueryUI.

CurvyCorners is failing because it still calls scanStyles in IE9 even though IE9 supports border-radius ( Support for "border-radius" in IE ) and I suspect that causes conflicts with the existing styles declared by jQueryUI.

http://code.google.com/p/curvycorners/source/browse/trunk/curvycorners.src.js#93 should be:

this.supportsCorners = this.ieVer >= 9.0;

So download curvycorners.src.js, change that line, and use that instead of your current curvycorners.src.js file and the button styles will display correctly.

Hussein · Answer 2 · 2011-04-09T22:13:59.003

Your example is working for me in IE9. Check http://jsfiddle.net/tKksD/4/. Make sure you have jquery-ui.css loaded in your header. Then put both your jQuery.js and jQueryUI.js just before </body> closing tag. And lastly put your jQuery code before </body> and after your jQuery.js and jQueryUi.js scripts.

You can also do this by using:

$('input:button').button();

Check working example at http://jsfiddle.net/tKksD/

Or

<button></button>` instead of `<input type"button" />

Check working example at http://jsfiddle.net/tKksD/

score 1 · Answer 3 · answered Apr 03 '11 at 13:33

Try check CSS files and javascript files. You may miss some file.

<link href="{your path to jquery}/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="{your path to jquery}/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="{your path to jquery}/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />

<script src="{your path to jquery}/jquery-1.5.1.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.button.min.js" type="text/javascript"></script>

score 1 · Answer 4 · answered Apr 08 '11 at 14:05

1

Just covering all bases here, but I assume you are using an up-to-date version jQuery? v1.5.1 was the first version to support IE9 as a top level browser. On a related note any vaguely recent version of jQuery UI needs jQuery 1.3.2+ anyway.

answered Apr 08 '11 at 14:05

andyb

43,435
12
121
150

I'm using jQuery 1.4.4 because of compatibility issues with some plugins. – Richard Knop Apr 08 '11 at 15:59
Unfortunately I am now away from a PC with IE9 on it now, so can't see the problem. I did notice that your test page has the [Byte Order Mark](http://en.wikipedia.org/wiki/Byte_order_mark) in it which definitely causes IE7 to render in **quirks-mode**. Maybe that is affecting IE9 also? I do suspect that since the version of jQuery you are using does not officially support IE9, it could be jQuery that is the problem. – andyb Apr 08 '11 at 19:23

score 1 · Answer 5 · answered Apr 09 '11 at 04:02

1

After downloading your test page, getting rid of curvycorners fixed it. Perhaps you could try using another method to get rounded corners.

answered Apr 09 '11 at 04:02

Chris

4,393
1
27
33

score 1 · Answer 6 · answered Apr 09 '11 at 22:19

Maybe you download jquery and attached scrips locally but url to graphics are relative, so browser can't open images. Try to use firebug for IE in order to check is there is some attempt to download images + you can check if there isn't any error in your js.

Alternativelly IE9 has developer tools, which can be usefull.

score 1 · Answer 7 · answered Apr 14 '11 at 01:17

I was able to get the button on the page working by unselected some styles marked as inline using IE9 Developer tools. (all the border ones) You can see the inline styles in the image below. I've not tracked down why or where yet but I'll try and do some more investigation later (hopefully today) and update this answer as I get more information. Hopefully this might be of some help for the moment.

Showing it working in IE9

score 1 · Answer 8 · answered Apr 14 '11 at 07:03

I had similar problem yesterday, just have a look and add closing

   <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" /> <--

I had accordation that did not work because of this.

Lars Knudsen · Answer 9 · 2011-05-24T18:45:53.690

1

Or have a look at IE9 compat. view..

I think it has something to do with doctype aso.

Maybe even something like this:

<\meta http-equiv=\X-UA-Compatible content=IE=edge>

edited May 24 '11 at 18:45

answered May 24 '11 at 18:37

Lars Knudsen

11
2

jquery UI button not working in IE 9?

9 Answers9

Check working example at http://jsfiddle.net/tKksD/

Check working example at http://jsfiddle.net/tKksD/