INPUT, BUTTON, A and DIV elements in the table below are styled with class="but". They should all be the same height and width and respond the same when 'hovered', but that is not the case with IE, Firefox or Opera.
.but {
display: block; position: static;
background-color: red;
font-size: 14px; text-decoration: none; line-height: 16px;
width: auto; height: 16px; padding: 0; margin: 0;
text-align: center; cursor: pointer;
border-width: 4px; border-style: solid;
border-color: #FFCCCC #990000 #990000 #FFCCCC;
}
.but:hover {
background-color: #6666FF;
border-color: #CCCCFF #000099 #000099 #CCCCFF;
}
.4x {
width: 25%;
}
INPUT, BUTTON, A and DIV elements in the table below are styled with class="but2". It seems INPUT and BUTTON don't accept 'auto' width, but they do accept '6em'.
.but2 {
display: block; position: static;
background-color: red;
font-size: 14px; text-decoration: none; line-height: 16px;
width: 6em; height: 16px; padding: 0; margin: 0 auto;
text-align: center; cursor: pointer;
border-width: 4px; border-style: solid;
border-color: #FFCCCC #990000 #990000 #FFCCCC;
}
INPUT, BUTTON elements below are styled with class="formonly". A and DIV elements are styled with class="but2". So, for INPUT and BUTTON, height refers to container height, not content height.
.formonly {
display: block; position: static;
background-color: red;
font-size: 14px; text-decoration: none; line-height: 16px;
width: 6em; height: 24px; padding: 0; margin: 0 auto;
text-align: center; cursor: pointer;
border-width: 4px; border-style: solid;
border-color: #FFCCCC #990000 #990000 #FFCCCC;
}