|  | Posted by Ben C on 10/17/06 20:32 
On 2006-10-17, John Dalberg <nospam@nospam.sss> wrote:> 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.
  Navigation: [Reply to this message] |