Table with input width 100%

Hi,

Could anyone explain the behaviour of my simple table at
http://www.xs4all.nl/~rvanloen/examp...le1/table.html

The css is located at:
http://www.xs4all.nl/~rvanloen/examp...s/webstyle.css

I would like to know why the input element is too big.
It sticks out in firefox and is cut off by the cell in IE6.

Both the HTML and CSS file have been validated.

What I was trying to accomplish is making a centered input box with
maximum width to fit in the cell with some padding left and right to it.

Robert.

re: Table with input width 100%

Robert wrote:
[color=blue]
> Could anyone explain the behaviour of my simple table at
> http://www.xs4all.nl/~rvanloen/examp...le1/table.html
>
> The css is located at:
> http://www.xs4all.nl/~rvanloen/examp...s/webstyle.css
>
> I would like to know why the input element is too big.
> It sticks out in firefox and is cut off by the cell in IE6.[/color]

Looking at the computed styles with the DOM inspector of Firefox I see
for the input:
width 299px
border-left-width 2px
border-right-width 2px
The containing td has
width 298px


--

Martin Honnen
http://JavaScript.FAQTs.com/

re: Table with input width 100%

Robert wrote:
[color=blue]
> Hi,
>
> Could anyone explain the behaviour of my simple table at
> http://www.xs4all.nl/~rvanloen/examp...le1/table.html
>
> The css is located at:
> http://www.xs4all.nl/~rvanloen/examp...s/webstyle.css
>
> I would like to know why the input element is too big.
> It sticks out in firefox and is cut off by the cell in IE6.[/color]

For Firefox: IIRC you have to add the border-width to the field-width. Here
the border seems to be 1 or 2 pixels on each side of the field. So the
field overlaps by 2 (or 4) Pixels outside the td.

For IE: I think the field is not cut off, but the border of the field
exactly covers the border of the td. (I had expected that IE would keep the
field completely inside the td, because this browser does sum the border to
the element's width.)

Gert

re: Table with input width 100%

Martin Honnen wrote:[color=blue]
>
>
> Robert wrote:
>[color=green]
>> Could anyone explain the behaviour of my simple table at
>> http://www.xs4all.nl/~rvanloen/examp...le1/table.html
>>[/color]
>
> Looking at the computed styles with the DOM inspector of Firefox I see
> for the input:
> width 299px
> border-left-width 2px
> border-right-width 2px
> The containing td has
> width 298px
>[/color]

Thanks. I thought width included the border. So that would explain it.