Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 06:54 PM
Jonathan Daggar
Guest
 
Posts: n/a
Default 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
  #2  
Old July 20th, 2005, 06:54 PM
Jukka K. Korpela
Guest
 
Posts: n/a
Default Re: Removing spaces/padding around <input> text fields?

jdaggar@yahoo.com (Jonathan Daggar) wrote:
[color=blue]
> I'm trying to put together a form with a very tight table
> formatting.[/color]

Stop trying, right now. You might even "succeed" in it.
[color=blue]
> Anyone have any suggestions on how to clean the space from around
> these form fields?[/color]

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

  #3  
Old July 20th, 2005, 06:54 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: Removing spaces/padding around <input> text fields?


"Jonathan Daggar" <jdaggar@yahoo.com> wrote in message
news:62ba348b.0403042301.4366a73d@posting.google.c om...[color=blue]
> 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.[/color]

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.
[color=blue]
> 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.
>[/color]

  #4  
Old July 20th, 2005, 06:55 PM
Jonathan Daggar
Guest
 
Posts: n/a
Default Re: Removing spaces/padding around <input> text fields?

"Harlan Messinger" <h.messinger@comcast.net> wrote:
[color=blue]
> 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.[/color]

Thank you, that's half the problem there. That's fixed.
[color=blue]
> 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.[/color]

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
  #5  
Old July 20th, 2005, 06:55 PM
Harlan Messinger
Guest
 
Posts: n/a
Default Re: Removing spaces/padding around <input> text fields?


"Jonathan Daggar" <jdaggar@yahoo.com> wrote in message
news:62ba348b.0403051140.19a684f7@posting.google.c om...[color=blue]
> "Harlan Messinger" <h.messinger@comcast.net> wrote:
>[color=green]
> > The actual implementation of this rule by browsers varies somewhat.[/color][/color]
Replace[color=blue][color=green]
> > <input type="text" class="smallbox" maxlength="3" name="reputation">
> > </td>
> > with
> > <input type="text" class="smallbox" maxlength="3"[/color][/color]
name="reputation"></td>[color=blue][color=green]
> > and see what happens.[/color]
>
> Thank you, that's half the problem there. That's fixed.
>[color=green]
> > I don't know what distinction you're making between "at least one space[/color][/color]
in[color=blue][color=green]
> > after each field" and "some mystery padding on the right". It's not[/color][/color]
clear[color=blue][color=green]
> > from your description or your sample page.[/color]
>
> 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.[/color]

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.
[color=blue]
>
> 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[/color]

  #6  
Old July 20th, 2005, 06:55 PM
Jonathan Daggar
Guest
 
Posts: n/a
Default Re: Removing spaces/padding around <input> text fields?

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@comcast.net> wrote in message news:<c2arv7$1rpt2s$1@ID-114100.news.uni-berlin.de>...[color=blue]
> "Jonathan Daggar" <jdaggar@yahoo.com> wrote in message
> news:62ba348b.0403051140.19a684f7@posting.google.c om...[color=green]
> > "Harlan Messinger" <h.messinger@comcast.net> wrote:
> >[color=darkred]
> > > The actual implementation of this rule by browsers varies somewhat.[/color][/color]
> Replace[color=green][color=darkred]
> > > <input type="text" class="smallbox" maxlength="3" name="reputation">
> > > </td>
> > > with
> > > <input type="text" class="smallbox" maxlength="3"[/color][/color]
> name="reputation"></td>[color=green][color=darkred]
> > > and see what happens.[/color]
> >
> > Thank you, that's half the problem there. That's fixed.
> >[color=darkred]
> > > I don't know what distinction you're making between "at least one space[/color][/color]
> in[color=green][color=darkred]
> > > after each field" and "some mystery padding on the right". It's not[/color][/color]
> clear[color=green][color=darkred]
> > > from your description or your sample page.[/color]
> >
> > 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.[/color]
>
> 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.
>[color=green]
> >
> > 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[/color][/color]
 

Bookmarks

Thread Tools

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

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles