19

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?

ScottE
  • 21,530
  • 18
  • 94
  • 131
  • There might have been a padding or margin somewhere. Try giving `{padding:0px;margin:0px};` – Balanivash Jul 08 '11 at 14:09
  • The jsbin example sets margin and padding to 0 – ScottE Jul 08 '11 at 14:12
  • Interesting. When I looked at your code with the real-time preview of jsbin, it seems ok. But it seems wrong when just using rendering feature – Barış Velioğlu Jul 08 '11 at 14:25
  • 2
    @ScottE This may answer some of your questions: http://stackoverflow.com/questions/1450587/inconsistent-box-model-between-input-type-submit-and-input-type-text – easwee Jul 08 '11 at 14:37

4 Answers4

30

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

Jared
  • 12,406
  • 1
  • 35
  • 39
  • 1
    +1 Was about to post same. The reason of this being such a mess is because there was never defined what model should be followed by the browser when rendering inputs so some just keep sticking with what was used years ago when form inputs where still in bandages and each vendor just used it's own reasoning for dealing with it. The mess is still around today but luckly we have css improving on this. However IE will still fall out of this. – easwee Jul 08 '11 at 14:34
  • Interesting. This exists in css3, but that's not going to help for < IE9. – ScottE Jul 08 '11 at 14:36
  • IE8 seems to support the css3 equivalent, as long as it's not in quirks mode. – ScottE Jul 08 '11 at 14:56
  • We're only worried about windows phone 7, so this works fine. – ScottE Jul 08 '11 at 20:04
  • Worked for me :) – Naveen Kumar V Jul 04 '23 at 11:02
3

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/

AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • Unfortunately I won't be able to use the jquery library. Also, the submit button has rounded corners (css3) - which complicated things somewhat. – ScottE Jul 08 '11 at 14:32
  • You could apply the rounded corners to the div wrapper easily. What library are you using for JS? – AlienWebguy Jul 08 '11 at 14:33
  • We're not using a js library. It's for a mobile app. jquery mobile was already nixed by the client. They're, like usual for a banking client, worried about security. We tried to educate, but there is no sense arguing. – ScottE Jul 08 '11 at 14:37
0

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.

Jules
  • 7,148
  • 6
  • 26
  • 50
0

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.

Jason Gennaro
  • 34,535
  • 8
  • 65
  • 86