Question

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

This is how they look normally:

In IE 9 they look like this:

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?

Answer 1

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.