jQUery ui buttons some issues in IE7

Question

I am using jquery UI buttons:

$(document).ready(function() {
    $(\"a.button, .button, button, input:submit, input:button\").button();
})


    

        

Answer 1

Seems like its becasue IE6/IE7 uses a different standard style set for elements. Would proberbly work if you use a CSS Reset or CSS Normalize framework :)

Tried using the Normalize.css (https://github.com/necolas/normalize.css/) and it fixed the float issue atleast.

So its not Jquery UI messing up the layout, its IE!

Try inserting this:

button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */
button, input { line-height: normal; *overflow: visible; }
/*
 * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7
 */
table button, table input { *overflow: auto; }