2005-11-21

Button element styling bug in Firefox

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).