Button Size Is Ugly Cross Browser

© 2 April, 2013, Martin Rinehart

The code says, with lots of other concerns removed:

    var btn = document.createElement( 'button' );
        btn.style.border = '2px solid gray';
        btn.style.width = '7px';
        btn.style.height = '10px';

I was converting a div to a button because Microsoft's earlier browsers had trouble applying the :hover pseudo-class to items where they hadn't anticipated hover (like divs). Here's an hour killed (plus ten minutes to put up this page).

The size of the content area, width by height, of a div specified as above is 7x10, as the code says. The size of the content area of a button, specified exactly the same way, is either 16x6 (Opera, MSIE) or 12x6 (Chrome, Firefox).

Reliable: use a div and change styles on mouseover and mouseout events. Don't use :hover pseudo-class selectors.

Tested: the four browsers mentioned, latest versions, Windows Vista.


Feedback: MartinRinehart at gmail dot com

# # #