Table with input width 100%

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Robert - 30 Aug 2005 13:31 GMT

Hi,

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

The css is located at:
http://www.xs4all.nl/~rvanloen/example/table1/css/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.

Reply to this Message

Martin Honnen - 30 Aug 2005 14:11 GMT

> Could anyone explain the behaviour of my simple table at
> http://www.xs4all.nl/~rvanloen/example/table1/table.html
[quoted text clipped - 4 lines]
> 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.

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

Signature

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

Reply to this Message

Robert - 31 Aug 2005 08:36 GMT

>> Could anyone explain the behaviour of my simple table at
>> http://www.xs4all.nl/~rvanloen/example/table1/table.html
[quoted text clipped - 6 lines]
> The containing td has
> width 298px

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

Reply to this Message

Gert Brinkmann - 30 Aug 2005 18:03 GMT

> Hi,
>
[quoted text clipped - 6 lines]
> 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.

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

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / August 2005

Table with input width 100%