TR-height shift in firefox

Question

var userRows = new Array();
function removeUser(user) {
  userRow = $("#user-"+user);
  userRows[user] = userRow.html();
  userRow.addClass("removed").html('<td>User removed</td>');
  // I would give the td above the correct colspan

  // Now the user will be removed using AJAX
}

When running the JavaScript/jQuery code above, somehow in FireFox the table row would become like 2px or so lower. In all other browsers this doesn't happen. How can I solve this?

Answer 1

I don't think that's down to JavaScript but CSS and default styles for the browser.

You see every browser has a default set of styles for the elements and to counter these you should use a reset sheet, such as the YUI Reset.

This will set most elements to a standered fixed style so that all browsers follow your sheet and you overide there styles. then you build up your styling from there.

http://developer.yahoo.com/yui/reset/

its how you make your designs the same no matter what browser.