100% width on input type submit vs. input type text

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

Answer 2

I believe it's the way the browser is calculating the input[type=submit] dimensions. I tried applying some resets but those didn't seem to work either. I'm on a Macbook Air with Chrome and on your JSBin example, the realtime preview looked fine but the "Render" validated your issue.

I tried jsfiddle.net and it showed the same issue. Here's a workaround if this will fly for your application. Simply remove the border and background from the submit button and style the wrapper div instead, then put a click listener on the div to submit the form:

CSS:

form { 
    width: 500px; 
    padding:0; 
    margin:0;
}
form div, form div input {
    height:20px;
    margin-bottom:4px;
}
input[type=text] { 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0; 
}
#submit input{
    background:transparent; 
    margin:auto; 
    border:none;
}
#submit{ 
    text-align:center; 
    background-color:#CCC; 
    width: 100%; 
    border: 1px solid red; 
    padding: 0; 
    margin: 0;
    cursor:pointer;
} 

JQUERY:

$('#submit').click(function(){
    $('#login').submit();
});

$('#login').submit(function(){
    alert('form submitted');
    return false;
});

http://jsfiddle.net/pZcx4/

ALTERNATIVE NATIVE JS:

function submit_form()
{
    alert('form submitted');
    return false;

    // when you are ready, do this: document.forms['login'].submit();
}


document.getElementById('submit').addEventListener('click',submit_form,false);

http://jsfiddle.net/pZcx4/3/