1

I am using jquery UI buttons:

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

<p>
    <button type="submit" value="Back">Back</button> &nbsp;&nbsp;<a class="button" id="register">Continue</a>
</p>

In all browsers the buttons looking perfectly the same , but when i check IE7(switched from IE9 to compatibility mode) the Back button has black border and Continue button moved a couple of pixels down.

here is jsfiddler link http://jsfiddle.net/XJRVt/7/

I also looked at IETester how it is looking in IE6 and it is looking the same like in IE7 :(

May be someone would know how to fix that?

halera
  • 165
  • 2
  • 9

1 Answers1

0

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; }
Marco Johannesen
  • 13,084
  • 6
  • 31
  • 36
  • You could definetly do that. But if you use the Normalize.css file you also fixes issues in other browser like Safari/Chrome/Firefox etc. So that you would place in your generel CSS file. But if you only want to do IE6/IE7 targeting your right on the money :) – Marco Johannesen Sep 09 '11 at 07:56
  • should i place that in separate css file and only after checking if old browser include that? – halera Sep 09 '11 at 08:45
  • How this normalize css working? and i just need to include that witch all the rest css files? no browser check needed? – halera Sep 09 '11 at 08:49