[thelist] Problem with CSS width: x% on a input text field

[Mark Kennedy]

It looks fine in the latest mozilla but wacky in IE6.  This page:

http://www.blooberry.com/indexdot/css/properties/dimension/width.htm

says this about IE5's support of the 'width' style property:

This property now applies to form checkbox and radio buttons (input
type=checkbox|password|radio|text.) These controls have an intrinsic width, so
the extra width is added as padding around the field.

So, er, well... sorry that doesn't really help you (although that CSS site is
pretty useful IMO).

Mark


On Fri, 21 Mar 2003, Rob Mueller wrote:

>Hi
>
>I'm having a bit of a problem with the "width" attribute in CSS. Basically
>I'm trying to create a table that contains some text input boxes and I want
>the boxes to scale nicely as the size of the window they're in change. The
>obvious first solution was this:
>
><input type="text" style="width: 100%" />
>
>Pretty simple, and here's an example mockup of what I'm trying to create. As
>you resize the window, the To/Cc/Bcc text boxes nicely resize to take up the
>space available to them...
>
>http://robm.fastmail.fm/mockup/compose_mockup5.html
>
>That's all nice, because basically I thought if you used "width: 100%" it
>meant "Set the width of this object to 100% of the width of the enclosing
>object". However, I've discovered this isn't right if the input field is
>this:
>
><input type="text" style="width: 100%" value="... some very long string ..."
>/>
>
>Then the width on which the 100% is calculated is based on the the width of
>the string, not the width of the enclosing box! That's really annoying! I've
>come up with a hacky solution, which involves leaving the value="" as empty,
>and then using JS after the document has loaded to change the value, but
>that just seems hacky. Here's some examples:
>
>http://robm.fastmail.fm/mockup/testcsswidth.html
>
>The first one shows the problem, the way the text boxes are set to 100% of
>the width of the text string in them, rather than the enclosing TD cell.
>
>The second shows that it works fine if the string is less than the size of
>the enclosing TD, it uses 100% of the enclosing box.
>
>The third uses my JS solution to the problem
>
>The fourth shows that using a class="" attribute doesn't fix the problem
>either.
>
>So basically I want a text box that grows and shrinks to the size of the
>enclosing area, I don't want the width to have anything to do with the
>default text value.
>
>I've done some searching, but I can't find any obvious answers anywhere.
>Does anyone have any ideas on what CSS I should be using?
>
>Rob
>
>-- 
>* * Please support the community that supports you.  * *
>http://evolt.org/help_support_evolt/
>
>For unsubscribe and other options, including the Tip Harvester 
>and archives of thelist go to: http://lists.evolt.org 
>Workers of the Web, evolt ! 
>