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

1 comment:

gaby de wilde said...

It does work in Opera. :) I like the bug where wrapping a button in an anchor doesn't open the link in IE. It's so useful :P