Upon my discovery, I encountered a peculiar issue in IE6/FF3 when trying to set a custom height (even if it matches the default) on a button. The following code illustrates that although both buttons have the same height, their padding differs inexplicably and cannot be adjusted in any understandable manner:
<!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 there is anyone out there who can shed some light on this phenomenon or better yet, find a way to make the padding consistent - please share your insights.
Thank you.