text box too wide when width set to 100%

Piers Lawson

If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?

Thank you in advance

Piers

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>

Jul 21 '05 #1

Follow Post Reply

27380

Chris Leipold

Have you tried:
display:block;width:auto;?

chris

Piers Lawson wrote:

If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?

Thank you in advance

Piers

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>

Jul 21 '05 #2

David Dorward

Piers Lawson wrote:

If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width.
100% + non-zero padding + non-zero border > 100%
<!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' xml:lang='en' lang='en'>

Why are you using XHTML? (Except you aren't since all tag and attribute
names are lower case in the language).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 21 '05 #3

Jón Fairbairn

David Dorward <do*****@yahoo.com> writes:

Piers Lawson wrote:
If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width.

100% + non-zero padding + non-zero border > 100%

Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say

width: 100% - 0.2em; border-width: 0.1em

to get it to add up right. And using a percentage for the
border width isn't going to chime with other input boxes of
different widths.

--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)

Jul 21 '05 #4

Jan Roland Eriksson

On 17 Mar 2005 20:24:31 +0000, "Jón Fairbairn"
<jo***********@cl.cam.ac.uk> wrote:
[...]

...And using a percentage for the border width isn't
going to chime...

Right; percentage values are not valid for border sizing as per specs.

'border-width'
Value: <border-width>{1,4} | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties

--
Rex

Jul 21 '05 #5

Lauri Raittila

in comp.infosystems.www.authoring.stylesheets, =?iso-8859-1?q?J=F3n?=
Fairbairn wrote:

David Dorward <do*****@yahoo.com> writes:
Piers Lawson wrote:
If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width.
100% + non-zero padding + non-zero border > 100%

Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say

auto
width: 100% - 0.2em; border-width: 0.1em

to get it to add up right.

border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

Jul 21 '05 #6

Jón Fairbairn

Lauri Raittila <la***@raittila.cjb.net> writes:

in comp.infosystems.www.authoring.stylesheets, Jón
Fairbairn wrote:
Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say

auto
width: 100% - 0.2em; border-width: 0.1em

to get it to add up right.

border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.

Really? If I change the OP's code to:

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;padding: 0;">
<input type='text' style='display:block;width:auto'>
</DIV>
</BODY>
</HTML>

both gecko and Opera display some red space to the right of
the input box.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)

Jul 21 '05 #7

Piers Lawson

Thanks for the idea... changing to:

<input type='text' style='display:block;width:auto;'>

meant that the text box shrank to its normal size in IE and FireFox... i.e.
it was far narrower than 15em.

Thank you anyway

Piers

"Chris Leipold" <cl******@dietzk.de> wrote in message
news:39*************@individual.net...

Have you tried:
display:block;width:auto;?

chris

Piers Lawson wrote:
If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text box fit within the DIV (preferably without losing its default borders)?

Thank you in advance

Piers

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>

Jul 21 '05 #8

Piers Lawson

You are right Jon, changing to

<input type='text' style='display:block;width:auto;'>

just means the text box returns to its natural size, which is less than 15em
wide... so it isn't the answer. I thought about using:

<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>

But I guess the default font size for a text box is less than the inherited
size, so it doesn't work either! The following does work:

<input type='text' style='width:14.5em;border-width:
0.25em;padding:0;font-size:1em'>

but has two downsides, the width is hardcoded and the font size is no longer
"natural".

Thank you for your ideas!

Piers

"Jón Fairbairn" <jo***********@cl.cam.ac.uk> wrote in message
news:wf************@calligramme.cl.cam.ac.uk...

Lauri Raittila <la***@raittila.cjb.net> writes:
in comp.infosystems.www.authoring.stylesheets, Jón
Fairbairn wrote:
Indeed. But since he wants the border, what value should he
put in place of 100%? AFAIK there's no way to say

auto
width: 100% - 0.2em; border-width: 0.1em

to get it to add up right.

border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.

Really? If I change the OP's code to:

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;padding: 0;">
<input type='text' style='display:block;width:auto'>
</DIV>
</BODY>
</HTML>

both gecko and Opera display some red space to the right of
the input box.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)

Jul 21 '05 #9

Els

Piers Lawson wrote:

If the following is displayed in IE6 or FireFox, the text box forces the
second DIV to expand beyond its 15em width. Is there a way to have the text
box fit within the DIV (preferably without losing its default borders)?

Thank you in advance

Piers

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;">
<input type='text' style='width:100%;'>
</DIV>
</BODY>
</HTML>

Why don't you just use <input type="text" style="width:15em;"> ?
Of course you should set the font-family and size to the same as the
the rest of the page first (to ensure the same value of em), but that
should work afaics.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #10

Piers Lawson

> Why don't you just use <input type="text" style="width:15em;"> ?

Of course you should set the font-family and size to the same as the
the rest of the page first (to ensure the same value of em), but that
should work afaics.
Setting the width doesn't work as the padding and border are then added
outside of the 15ems... kind of counter intuitive to a newbie like me, but
those I guess are the W3C specs!

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

Jul 21 '05 #11

Els

Piers Lawson wrote:

Why don't you just use <input type="text" style="width:15em;"> ?
Of course you should set the font-family and size to the same as the
the rest of the page first (to ensure the same value of em), but that
should work afaics.

Setting the width doesn't work as the padding and border are then added
outside of the 15ems... kind of counter intuitive to a newbie like me, but
those I guess are the W3C specs!

So, make it a little smaller. Padding and border can be set to ems
too, so just add them up to be 15em together.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Squeeze - Love Circles

Jul 21 '05 #12

Piers Lawson

I came up with another way that works... but it requires an extra nested
div, which seems wrong to me:

<div style="width:15em;background-color: green;">
<div style="padding: 0 5px 0 0;">
<input type='text' style='width:100%'>
</div>
</div>

The 5px compensates for the border and padding used by FireFox when drawing
a text box (6px are used by IE). This method means the text boxes are the
correct size, although with IE, the nested div exteends to the right.

Piers

"Piers Lawson" <Pi***@Lawson.n.a.m.e.NOSPAM> wrote in message
news:3y*******************@newsfe1-gui.ntli.net...

You are right Jon, changing to

<input type='text' style='display:block;width:auto;'>

just means the text box returns to its natural size, which is less than 15em wide... so it isn't the answer. I thought about using:

<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>

But I guess the default font size for a text box is less than the inherited size, so it doesn't work either! The following does work:

<input type='text' style='width:14.5em;border-width:
0.25em;padding:0;font-size:1em'>

but has two downsides, the width is hardcoded and the font size is no longer "natural".

Thank you for your ideas!

Piers

"Jón Fairbairn" <jo***********@cl.cam.ac.uk> wrote in message
news:wf************@calligramme.cl.cam.ac.uk...
Lauri Raittila <la***@raittila.cjb.net> writes:
in comp.infosystems.www.authoring.stylesheets, Jón
Fairbairn wrote:
> Indeed. But since he wants the border, what value should he
> put in place of 100%? AFAIK there's no way to say

auto

> width: 100% - 0.2em; border-width: 0.1em
>
> to get it to add up right.

border-width:0.1em should suffice, you can use width:auto; for block
elements just fine.

Really? If I change the OP's code to:

<!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' xml:lang='en' lang='en'>
<HEAD>
</HEAD>
<BODY>
<DIV style="width:15em;background-color: green;">
 
</DIV>
<DIV style="width:15em;background-color: red;padding: 0;">
<input type='text' style='display:block;width:auto'>
</DIV>
</BODY>
</HTML>

both gecko and Opera display some red space to the right of
the input box.
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
http://www.chaos.org.uk/~jf/Stuff-I-dont-want.html (updated 2005-02-09)

Jul 21 '05 #13

Piers Lawson

> So, make it a little smaller. Padding and border can be set to ems

too, so just add them up to be 15em together.

It appears that IE and FireFox already have ideas about what padding and
border should be used. For instance in FireFox the left border is 2px, the
right border is 1px. The left and right padding are 1px.

I can force these to use em e.g.

<input type='text' style='width:14.6em;border: 0.1em groove; padding:
0.1em 0.1em 0.1em 0.1em; font-size:1em'>

Which does fit perfectly... however it doesn't look like a normal text box
because:

1) As the text size is increased, the border thickness increases

2) I have had to force a text box's font size of 1em in order that the
calulations work (the font size in a text box is usully less than the
surronding text.

Thanks for your ideas though! I just wish setting a text box's display type
to block worked as some others thought it would!

Piers

Jul 21 '05 #14

Jón Fairbairn

"Piers Lawson" <Pi***@Lawson.n.a.m.e.NOSPAM> writes:

I came up with another way that works... but it requires an extra nested
div, which seems wrong to me:

<div style="width:15em;background-color: green;">
<div style="padding: 0 5px 0 0;">
<input type='text' style='width:100%'>
</div>
</div>

The 5px compensates for the border and padding used by FireFox when drawing
a text box (6px are used by IE). This method means the text boxes are the
correct size, although with IE, the nested div exteends to the right.

I'm not sure why that works and I agree it's nasty. The
fundamental problem with the original version is that
browsers get the width from the "size" attribute of the
input box, which for type text is a number of characters
-- not em!

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

Jul 21 '05 #15

Lauri Raittila

in comp.infosystems.www.authoring.stylesheets, Piers Lawson wrote:

You are right Jon, changing to

<input type='text' style='display:block;width:auto;'>

just means the text box returns to its natural size, which is less than 15em
wide... so it isn't the answer. I thought about using:

<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>

But I guess the default font size for a text box is less than the inherited
size, so it doesn't work either! The following does work:

It is not necessarily inherited size. In fact, I think all browswer scale
font dont on input fields. Try font-size:inherit

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Utrecht, NL.

Jul 21 '05 #16

Jón Fairbairn

Lauri Raittila <la***@raittila.cjb.net> writes:

in comp.infosystems.www.authoring.stylesheets, Piers Lawson wrote:
You are right Jon, changing to

<input type='text' style='display:block;width:auto;'>

just means the text box returns to its natural size, which is less than 15em
wide... so it isn't the answer. I thought about using:

<input type='text' style='width:14.8em;border-width: 0.1em;padding:0'>

But I guess the default font size for a text box is less than the inherited
size, so it doesn't work either! The following does work:

It is not necessarily inherited size. In fact, I think all browswer scale
font dont on input fields. Try font-size:inherit

That doesn't help. The font in the input box may be scaled
down, but html4.01 only describes the size attribute as
'number of characters', and Firefox at least takes that as
something less than an em (reasonably enough, since the
average width of a 'character' is less than an em). Setting
the font size for the input box explicitly, you can see from
the line height that the font has to be much bigger than
that of the parent element before the width gets close (for
an input with size=15).

Empirically, in firefox with my current settings, <input
type='text' style='display:block;width:auto;' size=38> comes
out at the right width, though of course that information is
no use to anyone :-/

--
Jón Fairbairn Jo***********@cl.cam.ac.uk

Jul 21 '05 #17

onionware

I just ran into this same problem. My solution works in IE and Firefox... I couldn't care less about any other browser. The CSS is a little ugly, but the HTML is clean.

<style>
.text-stretch {
padding-right: 4px;
}
* html .text-stretch {
padding-right: 6px;
}
.text-stretch input {
width: 100%;
}
* html .text-stretch input {
margin-right: -7px;
}

.textarea-stretch {
padding-right: 4px;
}
* html .textarea-stretch {
padding-right: 6px;
}
.textarea-stretch textarea {
width: 100%;
margin: 0;
}
* html .textarea-stretch textarea {
margin-right: -7px;
}
</style>

<div style="border: 1px solid blue; width: 300px;">

<div class="text-stretch">
<input type="text" />
</div>

</div>
<br />
<div style="border: 1px solid blue; width: 300px;">

<div class="textarea-stretch">
<textarea rows="4"></textarea>
</div>

</div>

Jul 21 '06 #18

text box too wide when width set to 100%

This discussion thread is closed

Similar topics