Removing spaces/padding around <input> text fields?

Hello,

I'm trying to put together a form with a very tight table formatting.
However, every time I put an text-type input field in, the browser
pads the area to the right of it with space. I've tried to eliminate
it several ways, but it won't go away.

It looks like it's forcing at least one space (line break?) in after
each field, and then there's some mystery padding on the right that
also refuses to go away. I've put up a demo of the problem at:
http://lenin.net/~daggar/formtest.html

--you can see the problem clearly if you highlight the whole page in
IE6, or a browser that similarly highlights the entirity of form
fields.

Anyone have any suggestions on how to clean the space from around
these form fields?

Thanks,
J. Daggar

jdaggar (AT) yahoo (DOT) com (Jonathan Daggar) wrote:

I'm trying to put together a form with a very tight table
formatting.

Stop trying, right now. You might even "succeed" in it.

Anyone have any suggestions on how to clean the space from around
these form fields?

We could tell you about the White Space Bug, but then we would have to
give you a long lesson explaining what you are doing wrong.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

"Jonathan Daggar" <jdaggar (AT) yahoo (DOT) com> wrote

Hello,

I'm trying to put together a form with a very tight table formatting.
However, every time I put an text-type input field in, the browser
pads the area to the right of it with space. I've tried to eliminate
it several ways, but it won't go away.

It looks like it's forcing at least one space (line break?) in after
each field, and then there's some mystery padding on the right that
also refuses to go away.

Except for a line break immediately after a start tag or immediately before
an end tag, browsers are supposed to replace each sequence of white-space
characters (space, tab, carriage return, line feed) with a single space. The
actual implementation of this rule by browsers varies somewhat. Replace

<input type="text" class="smallbox" maxlength="3" name="reputation">
</td>

with

<input type="text" class="smallbox" maxlength="3" name="reputation"></td>

and see what happens.

I don't know what distinction you're making between "at least one space in
after each field" and "some mystery padding on the right". It's not clear
from your description or your sample page.

I've put up a demo of the problem at:
http://lenin.net/~daggar/formtest.html

--you can see the problem clearly if you highlight the whole page in
IE6, or a browser that similarly highlights the entirity of form
fields.

"Harlan Messinger" <h.messinger (AT) comcast (DOT) net> wrote:

The actual implementation of this rule by browsers varies somewhat. Replace
input type="text" class="smallbox" maxlength="3" name="reputation"
/td
with
input type="text" class="smallbox" maxlength="3" name="reputation"></td
and see what happens.

Thank you, that's half the problem there. That's fixed.

I don't know what distinction you're making between "at least one space in
after each field" and "some mystery padding on the right". It's not clear
from your description or your sample page.

Apologies for that, I've put up a revised copy with the page breaks
removed and borders added to clarify the issue.
http://lenin.net/~daggar/formtest.html

The page break/white space is gone, but there's still a noticeable bit
of trailing space. I call it "mystery padding" because it's
apparently not textual white space (it can't be selected like a text
space could). Something, however seems to be forcing the table cell to
grow in horizontal size, even when the input form proper should be
able to fit within the dictated horizontal size of the cell.

I'm testing this on IE6, Opera 7.2, and Mozilla 1.0. While the
vertical size varies between them-- something I'll have to adjust
for-- all of them seem to be forcing some unexplained white space
between the right edge of the input field and the end of the table
cell. Doubly mysterious (to me at least), since I've set the table
cell to "overflow:hidden" to try to hide the extra space.

What am I missing here?

Thank you again,
J. Daggar

"Jonathan Daggar" <jdaggar (AT) yahoo (DOT) com> wrote

"Harlan Messinger" <h.messinger (AT) comcast (DOT) net> wrote:

The actual implementation of this rule by browsers varies somewhat.
Replace
input type="text" class="smallbox" maxlength="3" name="reputation"
/td
with
input type="text" class="smallbox" maxlength="3"
name="reputation"></td
and see what happens.

Thank you, that's half the problem there. That's fixed.

I don't know what distinction you're making between "at least one space
in
after each field" and "some mystery padding on the right". It's not
clear
from your description or your sample page.

Apologies for that, I've put up a revised copy with the page breaks
removed and borders added to clarify the issue.
http://lenin.net/~daggar/formtest.html

The page break/white space is gone, but there's still a noticeable bit
of trailing space. I call it "mystery padding" because it's
apparently not textual white space (it can't be selected like a text
space could). Something, however seems to be forcing the table cell to
grow in horizontal size, even when the input form proper should be
able to fit within the dictated horizontal size of the cell.

The rest of your problem is that the sum of the cell widths exceeds the
table's width. When that happens, everything breaks.

Since you're using CSS, use it for the widths as well, and then make sure
everything adds up. You're better off if, to the extent possible, you let
the browser do the work, or you limit explicit widths to only certain
columns.

I'm testing this on IE6, Opera 7.2, and Mozilla 1.0. While the
vertical size varies between them-- something I'll have to adjust
for-- all of them seem to be forcing some unexplained white space
between the right edge of the input field and the end of the table
cell. Doubly mysterious (to me at least), since I've set the table
cell to "overflow:hidden" to try to hide the extra space.

What am I missing here?

Thank you again,
J. Daggar

You're right, of course. I have to finally learn to suppress my
Netscape 3 instincts.

Thanks again for the help.

"Harlan Messinger" <h.messinger (AT) comcast (DOT) net> wrote

"Jonathan Daggar" <jdaggar (AT) yahoo (DOT) com> wrote in message
news:62ba348b.0403051140.19a684f7 (AT) posting (DOT) google.com...
"Harlan Messinger" <h.messinger (AT) comcast (DOT) net> wrote:

The actual implementation of this rule by browsers varies somewhat.
Replace
input type="text" class="smallbox" maxlength="3" name="reputation"
/td
with
input type="text" class="smallbox" maxlength="3"
name="reputation"></td
and see what happens.

Thank you, that's half the problem there. That's fixed.

I don't know what distinction you're making between "at least one space
in
after each field" and "some mystery padding on the right". It's not
clear
from your description or your sample page.

Apologies for that, I've put up a revised copy with the page breaks
removed and borders added to clarify the issue.
http://lenin.net/~daggar/formtest.html

The page break/white space is gone, but there's still a noticeable bit
of trailing space. I call it "mystery padding" because it's
apparently not textual white space (it can't be selected like a text
space could). Something, however seems to be forcing the table cell to
grow in horizontal size, even when the input form proper should be
able to fit within the dictated horizontal size of the cell.

The rest of your problem is that the sum of the cell widths exceeds the
table's width. When that happens, everything breaks.

Since you're using CSS, use it for the widths as well, and then make sure
everything adds up. You're better off if, to the extent possible, you let
the browser do the work, or you limit explicit widths to only certain
columns.


I'm testing this on IE6, Opera 7.2, and Mozilla 1.0. While the
vertical size varies between them-- something I'll have to adjust
for-- all of them seem to be forcing some unexplained white space
between the right edge of the input field and the end of the table
cell. Doubly mysterious (to me at least), since I've set the table
cell to "overflow:hidden" to try to hide the extra space.

What am I missing here?

Thank you again,
J. Daggar