I prefer to use button elements in stead of input elements for buttons. When I was trying to create a button of flexible width using two background images, I ran into a nasty styling bug in Firefox regarding buttons: you can't set the padding to 0!
Example HTML:
<button type="submit"><span>A button</span></button>
Example CSS:
button {
width: 80px;
height: 24px;
padding: 0;
background: #f00;
border: 0;
}
button span {
display: block;
width: 80px;
height: 24px;
line-height: 24px;
text-align: center;
background: #00f;
}
Result: (this should be a be a blue button without any red showing).
Posts
