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

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?

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

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/

It's pretty weird indeed. I think that the 1px border is added to the outside of your text inputs so it is 500px wide.

While on the Submit button the button is calculated on the sides but shows on the inside, so you get 500px - 1px - 1px = 498px wide...

A possible solution that you could do is just create the following CSS:

.login-tb {
     border: 1px solid red;
     margin: 0;
     padding: 0;
     width: 500px;
}

#login-tb {
     border: 1px solid red;
     margin: 0;
     padding: 0;
     width: 502px;
}

That fixes your issue and it still shows your submit button as 500px wide in Firebug. And as your form is set to 500px width anyway and this doesn't change, there is not much use in implementing a width set in a percentage.

Not sure this will work for your environment. When I played with the jsbin, adjusting the width worked...

.login-tb { width: 99.75%; border: 1px solid red; padding: 0; margin: 0; }

Tested only on Chrome.