Question

I have a login form that is styled to have the textboxes and the submit button stretch to 100% of the container size. This is for a fluid mobile layout, but my jsbin example below has a fixed container size for demonstration purposes.

http://jsbin.com/ozutoq/9

In IE7, IE8, FF 4, Safari – all render the submit button a bit shorter than the textboxes. Firebug’s layout tool shows the textboxes at 500px wide, but the submit button at 498px wide. In my real example the submit button is 6px skinnier. How can I fix this so it takes up the full width?

Update

I did another test by setting a fixed width on the inputs. It seems that the submit button doesn’t follow the box model. I used a 100px width, and it showed 98px + 2px for borders, while the textboxes showed 100px width + 2px for borders.

So, I guess the question is how can I deal with this in a fluid layout? -1px right and left padding on the buttons doesn’t seem to work, and the design calls for a 1px border on the button! Will I have to resort to js?

Answer 1

For some reason mozilla sets the inputs of type text to -moz-box-sizing:content-box; but the submit button is set to -moz-box-sizing:border-box;

Setting the following will give you the intended rendering in FF.

.login-tb {
    border:1px solid red; 
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin: 0;
    padding: 0;
    width:100%; 
}

Update:
Added Safari and IE8+ support