I stumbled upon the weirdest behavior in IE6/FF3 when setting custom height (even if it's the same as default) on a button. The following code should demonstrate that while the two buttons are of same height, their padding is different for some implicit reason and cannot be controlled in any fathomable way:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>weird-padding-change</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<style>
input {
vertical-align: middle;
width: 100px;
/* no effect: */
padding-top: 0;
padding-bottom: 0;
}
</style>
</head>
<body>
<div style="background:red">
<input type="button" style="height:24px;" value="_24px_"/>
<input type="button" value="_Def. Height_"/>
</div>
</body>
</html>
If anyone has any idea how to explain this or, even better, make the padding equal - please tell me.
Thanks.