Creating plugins for jQuery is a relatively straightforward task, however poorly named plugins can conflict with one another (or even with core jQuery functionality). I have seen numerous attempts at solving this problem which each have their advantages and disadvantages.
My take on this problem is to define widgets in a completely separate namespace and then refer to them using a single jQuery plugin `widget`. This plugin depends upon the following jQuery variant of my `$namespace` function from here.
The button element can be styled easily for the desired look, however as soon as padding is specified the button appearance is drastically different across web browsers. So I did some searching and found several different fixes and found that a combination of all of them does the trick (mostly).
I have added the following to the end of Eric Meyers fantastic reset stylesheet.
/* Fix for IE7 */
/* Default padding that can be overridden as desired. */
padding: 2pt 4pt;
/* Fix for IE7+ */
/* Fix for FF */
I threw a crude test together and viewed it with Chrome, FireFox, IE9/IE8/IE7 and Opera and it seems to be a solved case. There are minor differences but it is certainly an improvement. IE7 still adds padding above and beneath button text. Please post a comment if you know how to fix that problem!