Width of text field with Strict Doctype

HTML & CSS
1

When you set the Doctype to Strict and do the following:

<div style=“width:200px; background-color: #f0f”>
<label for=“fname”>First Name</label>
<div style=“background-color:#cccccc;”><input type=“text” name=“name” id=“name” value=“1” style=“width:100%;” /></div>
</div>

it will end up making the input field longer than the <div> block. Why? Where does this extra padding come into play? I’ve set the padding on the input field to 0 and it still goes beyond. Can anyone explain what’s going on with that? Thanks.

2

Hi, we would need to see a site for a better diagnosis. What browser is this happening in?

3

This is the whole page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>

</head>
<body>
<div style="width:200px; background-color: #f0f">
	<label for="fname">First Name</label>
	<div style="background-color:#cccccc;"><input type="text" name="name" id="name" value="1" style="width:100%;" /></div>
</div>
</body>
</html>

Overflows in Firefox and Safari on the mac.

4

Hi, the borders are causing the overflow :). Borders add to the total width.

5

it will end up making the input field longer than the <div> block. Why? Where does this extra padding come into play? I’ve set the padding on the input field to 0 and it still goes beyond. Can anyone explain what’s going on with that? Thanks.
I would guess that the borders on the input are playing a role in this. I’m not a form expert by no means, still learning myself. I can get what you are after by setting the 200px width on the input and giving it an inline-block display;

Then remove the width from the parent div and let it shrink wrap with inline-block also. Tested in FF3, Opera & Safari.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
<style type="text/css">
#wrap {
    display:inline-block;
    background:#F0F
}
#wrap div{
    background:#CCC;
}
#wrap div input{
    display:inline-block;
    width:200px;
}
</style>
</head>
<body>
<div id="wrap">
    <label for="fname">First Name</label>
    <div><input type="text" name="name" id="name" value="1" /></div>
</div>
</body>
</html>
6

You can loose that inner div also by just using a <br> tag.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demo</title>
<style type="text/css">
#wrap {
    display:inline-block;/*shrink wrap*/
    background:#F0F;
}
#wrap input{
    display:inline-block;/*set a width*/
    width:200px;
    margin:0;/*safari*/
}
</style>
</head>
<body>
<div id="wrap">
    <label for="fname">First Name</label>
    <br />
    <input type="text" name="name" id="name" value="1" />
</div>
</body>
</html>
7

Hi,

Ray that example will still be 204px (2 x 2px) wide due to the 2px (outset!) borders applied by default.:slight_smile: Although it works well otherwise :slight_smile:

You could do it (semi) automatically using the technique I posted the other day for textareas.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome</title>
<style type="text/css">
.wrap {
    width:192px;
    padding:0 4px;
    background-color: #f0f;
    overflow:hidden;
}
.wrap input {
    padding:2px;
    width:100&#37;;
    margin:0 -1px 0 -4px;
    float:left;
    clear:both
}
</style>
</head>
<body>
<form action="">
    <div class="wrap">
        <label for="fname">First Name</label>
        <input type="text" name="name" id="name" value="1"  />
    </div>
</form>
</body>
</html>

The example works by adding padding to the parent equal to the border width (and any extra padding you want on the input) and then setting the input to 100% wide. This makes it too big but then its dragged back into the padding of the parent using negative margins and then fits exactly.

8

Hi Paul :slight_smile:
Yes I had seen that method you used for textareas. It looks like it’s just a basic neg-margin drag into parent padding with more favor to the left margin.

I expected that it all should have been wrapped in a form element too, just now cutting my teeth with forms. I avoided them for a long time but now I am regretting that since I have some coming up on a project. :eye:

I just ran into an issue with IE6/7 and a floated form, I will post a thread and see what your thoughts are on that.

9

Agreed. Forms are such a pain. I’m working on a Wufoo type project where developers can create the form visually and then have it write all the code complete with css theme for the CodeIgniter framework. It’s nice because you can tell it to save to a database, pull the record from a database to prepopulate the form and/or email the form.

It just take so long to put those pieces together and have it be consistant without errors throughout your application/site.

10

I thought it’d be nice to only have to change the main div wrapper’s width for the form so that the form fields can stretch to the end of the div wrapper or be half it’s size, etc. I’m thinking this isn’t the best way. I guess pixels it is.

I appreciate all the comments about this topic.

11

I thought it’d be nice to only have to change the main div wrapper’s width for the form so that the form fields can stretch to the end of the div wrapper or be half it’s size, etc.

My method above allows that automatically.:slight_smile:

12

As Paul said, as long as you don’t change the input at all then Pauls way will work. He does 100%width/border and then drags it over witrh a negative margin equating the total borders (and padding if he set, I forget).

It’s very effective :slight_smile:

13

Gotcha. And this approach works in all browsers?

14

It should work well in modern browsers and I checked in ie6 - 8, firefox3+, opera10 and safari4 but I’ve learned never to say “all” browsers :slight_smile:

15

Here’s the thread Paul was referring to with the textarea’s if you’re intersted: