HighDots Forums  

Removing spaces/padding around <input> text fields?

HTML Writing HTML for the Web (comp.infosystems.www.authoring.html)


Discuss Removing spaces/padding around <input> text fields? in the HTML forum.

Reply
 
Thread Tools Display Modes
  #1  
Old   
Jonathan Daggar
 
Posts: n/a

Default Removing spaces/padding around <input> text fields? - 03-05-2004 , 01:01 AM






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



Reply With Quote
  #2  
Old   
Jukka K. Korpela
 
Posts: n/a

Default Re: Removing spaces/padding around <input> text fields? - 03-05-2004 , 02:53 AM






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

Quote:
I'm trying to put together a form with a very tight table
formatting.
Stop trying, right now. You might even "succeed" in it.

Quote:
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



Reply With Quote
  #3  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: Removing spaces/padding around <input> text fields? - 03-05-2004 , 08:31 AM




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

Quote:
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.

Quote:
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.



Reply With Quote
  #4  
Old   
Jonathan Daggar
 
Posts: n/a

Default Re: Removing spaces/padding around <input> text fields? - 03-05-2004 , 01:40 PM



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

Quote:
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.

Quote:
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


Reply With Quote
  #5  
Old   
Harlan Messinger
 
Posts: n/a

Default Re: Removing spaces/padding around <input> text fields? - 03-05-2004 , 03:37 PM




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

Quote:
"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.

Quote:
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


Reply With Quote
  #6  
Old   
Jonathan Daggar
 
Posts: n/a

Default Re: Removing spaces/padding around <input> text fields? - 03-06-2004 , 02:23 AM



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

Quote:
"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

Reply With Quote
Reply




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off



Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.