Input Submit Button Width

Forum Moderators: not2easy

Message Too Old, No Replies

Input Submit Button Width

IE/FF Box model and padding differences

Rain_Lover

9:01 pm on Dec 18, 2010 (gmt 0)

Hi,

The following code seems to be valid:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Sample Form</title>

<style type="text/css">

input {width:500px; padding:3px; background:green; border:1px solid red;}

textarea {width:500px; height:150px; padding:3px; background:green ; border:1px solid red;}

</style>

</head>
<body>

<form action="">

<p><input id="entry_0"><label for="entry_0">Name</label></p>

<p><input id="entry_1"><label for="entry_1">Email</label></p>

<p><input id="entry_2"><label for="entry_2">URL</label></p>

<p><textarea id="entry_3" rows="5" cols="5"></textarea></p>

<p><input type="submit" value="Submit"></p>

</form>

</body>
</html>

However, the submit button width is shorter than other fields. Strangely when I remove the doctype declaration, they all get the same length. What am I doing wrong and how can I make them the same size?

Thanks in advance!
Rain Lover

rocknbil

6:10 pm on Dec 19, 2010 (gmt 0)

I've never noticed that. :-) It's something to do with the border, though. Set them to none and they are all the same. My presumption is that the border for an input field and a button are different - borders on buttons are naturally wider. The computed style of the button is 498, the fields 502 (500 + border widths.) I'd just create a class for submit buttons (but don't use the reserved word "submit" or "button" for the selector. Well, you *shouldn't*.)

fbadyari

6:02 am on Dec 23, 2010 (gmt 0)

remove width, padding, & border from your input style and it will work good. it will be aligned equally. & again if it does make some problem then remove the input from style.

SuzyUK

9:21 am on Dec 23, 2010 (gmt 0)

It seems the

input type=submit

uses a different box model, which kind of makes sense, IE and Firefox handle the padding on the

input type=submit

differently anyway, even if it was doing what you wanted regards width.

FF doesn't apply the left/right padding, and both browsers will hide any right overflow by default.. e.g. try adding in an extra long text string for "value=":

I used this HTML:

<form action="">
<p><input></p>
<p><input></p>
<p><input></p>
<p><textarea rows="5" cols="5"></textarea></p>
<p><input class="submit" type="submit" value="Superlong button text Superlong button text Superlong button text Superlong button text Superlong button text"></p>
</form>

It kind of makes sense the way FF handles it, because if you did actually have a very long value you would likely want as much of it as possible to show.

Anyway that's nae helping :o.. So you could add a class to the submit input (see my sample HTML above) and style it differently by taking off the left/right padding (seeing as it's not doing anything anyway) and calculating a different width for it.. this bring it into line cross brower and is possibly easier to avoid an IE conditional CSS

form {padding: 0; margin: 0; float: left; background: #ff0; /* added to show a yellow background for width testing */}

input, textarea {
background: #eee;
padding: 10px 50px; /* exaggerated for show */
border: 3px solid red;
width: 500px;
}

input {}
textarea {}

.submit {
padding: 10px 0;
width: 606px; /* 500px width + 100px left & right padding + 6px left & right border */
}

If you don't require IE6 support using the CSS above, you can select the

input type=submit

without adding that extra class name

replace

.submit

with

input[type=submit]

in the CSS

or

You could force either of the box-sizing models onto all inputs using the CSS box-sizing property, this works pretty much x-browser already - but only in IE8 upwards so would need a conditional CSS to incorporate the the different width like above, also with this you need to know your padding isn't actually doing anything, so while this shows off what the box-sizing property can do, in this case I would consider the top solution more efficient, as both solutions need the extra class name anyway.

<style type="text/css">
form {padding: 0; margin: 0; float: left; background: #ff0; /* added to show a yellow background for width testing */}

input, textarea {
background: #eee;

-moz-box-sizing: content-box; /* FF */
-webkit-box-sizing: content-box; /* Safari */
box-sizing: content-box; /* >=IE8 & Opera */

/* content-box is the default, it can be changed to border-box if you want borders and padding included in width but no support in lt IE8 */

padding: 10px 50px;
border: 3px solid red;
width: 500px;
}

input {}
textarea {}

</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
.submit {width: 606px;}
</style>
<![endif]-->

I'd go for version #1

HTH

Rain_Lover

9:34 am on Dec 23, 2010 (gmt 0)

Hi SuzyUK,

Complete answer!
Thanks! :)