Wednesday, June 11, 2008

Fixing button styling in firefox with -moz-margin-*

Yeah, yeah, yeah. Here I go talking about CSS buttons again.

If you style buttons often, you might have noticed that in Firefox, setting border:0 still leaves some mysterious amount of border space. We could fix the vertical centering of things by applying center to the vertical portion of background-position, but that doesn't work so well in the horizontal axis.

Since this issue is specific to Mozilla-based browsers, it turns out that there is an equally vendor-specific way to fix it:

button {-moz-margin-start:-3px;-moz-margin-end:-3px;}

No comments:

Post a Comment