Can't get table cell width with text field to get smaller

[John Dalberg]

I have this simple table below. I can't get the input box (text field) to
display smaller. I tried different cell widths, I used smaller font and I
set both the cell width and the text field but I can't decrease the width.
Should't I be able to set the second cell width to any width? Right now in
Firefox, the input box is over 100px and it should be much less. When I
remove the tetx field, the cell width is fine. What are the constraints of
a text field?




<table border="0" cellpadding="0" cellspacing="0" style="border:thin
#000099 solid" width="400">
<tr>
<td width="95%" bgcolor="#FFFFCC">Enter Number :</td>
<td width="5%" bgcolor="#CCFFCC"><input type="text" name="textfield"
style="font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px"></td> </tr>
</table>


Tony

 

[Jonathan N. Little]

I have this simple table below. I can't get the input box (text field) to
display smaller. I tried different cell widths, I used smaller font and I
set both the cell width and the text field but I can't decrease the width.
Should't I be able to set the second cell width to any width? Right now in
Firefox, the input box is over 100px and it should be much less.

Why do you think so? You have neither styled the INPUT element to a
specific width nor sized the field with the attribute SIZE for the
character count. All you have done is shrunk the text size to a tiny 9px!

When I
remove the tetx field, the cell width is fine. What are the constraints of
a text field?




<table border="0" cellpadding="0" cellspacing="0" style="border:thin
#000099 solid" width="400">
<tr>
<td width="95%" bgcolor="#FFFFCC">Enter Number :</td>
<td width="5%" bgcolor="#CCFFCC"><input type="text" name="textfield"
style="font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px"></td> </tr>
</table>

 

[John Dalberg]

Why do you think so? You have neither styled the INPUT element to a
specific width nor sized the field with the attribute SIZE for the
character count. All you have done is shrunk the text size to a tiny 9px!

Yes I was able to do so and using a small font and monospace font.
http://www.cs.tut.fi/~jkorpela/forms/present.html

Tony

 

[Ben C]

I have this simple table below. I can't get the input box (text field) to
display smaller. I tried different cell widths, I used smaller font and I
set both the cell width and the text field but I can't decrease the width.
Should't I be able to set the second cell width to any width?

You can, but it's treated as a minimum width. If the content of the cell
isn't that small, the cell gets wider. That's just what <td>s do-- they
never overflow.

The input is a replaced element and has an intrinsic width of whatever
it is you're seeing, which is bigger than 5% of 400px, so the cell
grows. Intrinsic width trumps containing width.

Right now in Firefox, the input box is over 100px and it should be
much less. When I remove the tetx field, the cell width is fine. What
are the constraints of a text field?

You need to set the width of the input, using the width property or the
size attribute.

Setting it to width: 100% does the trick. This explicitly sets it to
"the width of its container", which is the <td>, whose width is 5% of
400px, i.e. 20px.

 

[jojo]

Yes I was able to do so and using a small font and monospace font.
http://www.cs.tut.fi/~jkorpela/forms/present.html

You were "able to"? Congratulations. But I wouldn't it call great
because I like to be able to read what I just entered into a form...

To size the form use the size-attribute of the input or use the
css-property width on the input (and not on the table) as Jonathan
already told you.