The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Problem displaying FORM in a Table Row
noiseradiostar
post Feb 16 2007, 04:02 PM
Post #1


Newbie
*

Group: Members
Posts: 11
Joined: 16-February 07
Member No.: 1,926



Hi, I have tried all day to get a mailing list form to display on one line of a table row, but no matter what I try the form keeps displaying on two lines.

Here's the way the page should display (without the mailing list FORM)
Test1

What I'm trying to accomplish is to put a mailing list form in the bottom black TR that spans across the table (above the gray border)

Here's what happens when I try to put it all in one TD
Test3

I don't understand why it's not displaying it in one row, and why it uses a second line and pushes the table down.

I've also tried putting each element in a seperate TD, with this result:
Test4

As you can see it syncs the TD's to the TD's above it. How do I start a new TR so that I can have new TD widths? I tried starting a new table at the bottom, but that just screws up my whole page.

I've also tried a new DIV across the bottom instead of a TR. That had the same results. I've tried everything imaginable...changing widths, colspan's, everything. I found this forum hoping that someone may be able to help me.

Any help?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 16 2007, 04:24 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,936
Joined: 9-August 06
Member No.: 6



You have this:
HTML
Get E-Mail Updates
<FORM METHOD="POST" ACTION="http://server.com/WebApps/mail-list-subscribe.cgi"> <INPUT TYPE="text" NAME="email" SIZE=20>
<INPUT TYPE="hidden" NAME="id" VALUE=53309>
<INPUT TYPE="submit" VALUE="Subscribe">

FORM is a block level element, so it "breaks the line". Move the text inside the form.
http://htmlhelp.com/reference/html40/block.html

You may also want to pay a visit to the validator. smile.gif
http://htmlhelp.com/tools/validator/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
noiseradiostar
post Feb 16 2007, 05:26 PM
Post #3


Newbie
*

Group: Members
Posts: 11
Joined: 16-February 07
Member No.: 1,926



Awesome! Thanks a lot! Yeah, i was looking for the html validator. I know my code probably needs lots of cleanup. smile.gif

One more quick question. Why won't the table row's height (the TR holding the form) adjust? The Valign doesn't seem to work either. Anything I can do to tighten up the width around the form? Am I missing something easy?

Thanks again!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 16 2007, 05:51 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,936
Joined: 9-August 06
Member No.: 6



Browsers may add margins to FORM as well as to other block lever elements (that's what makes paragraphs look like paragraphs). Add this to the form tag.

CODE
<form... style="margin: 0">


There are better ways to use CSS than the style attribute. You can read more about that if you click the CSS Reference link in the menu at the top of this page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
noiseradiostar
post Feb 20 2007, 02:51 PM
Post #5


Newbie
*

Group: Members
Posts: 11
Joined: 16-February 07
Member No.: 1,926




Thanks again for your help! Now, I'm on to Phase 2 which is putting links in the same table row. Once again, the form is splitting up between lines and also pusshing the table over to the right.
You can see it here:
Test 3

Once again I've tried every imagainable combination as well as looked at the tutorials and info in the CSS Reference. Nothing seems to work. Any help?

I appreciate your help!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 20 2007, 03:38 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,270
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



If you turn on borders for your tables, then it will be easier to see what is going on.

You also have HTML errors (some of which indicate structural problems) and CSS errors (not all of which are related to your non-standard scrollbar properties).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
noiseradiostar
post Feb 22 2007, 10:49 AM
Post #7


Newbie
*

Group: Members
Posts: 11
Joined: 16-February 07
Member No.: 1,926



OK, I've turned on all borders and fixed most of the html errors (except the ALT tags). I'm still not getting it. Why is the form and the link at the bottom not aligning on one row?

http://www.13stars.net/test3.html

I appreciate everyone's help. This is the last problem and then I'll be totally done with the site (well...the design at least)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2007, 11:13 AM
Post #8


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,936
Joined: 9-August 06
Member No.: 6



smile.gif

Now you have the text inside the form, but you close the form directly after the text instead of letting it contain the form contols too, which is really the purpose of the FORM element.

QUOTE
<FORM METHOD="POST" ACTION="http://server.com/WebApps/mail-list-subscribe.cgi" style="margin: 0">
   Get E-Mail Updates  </form>
<INPUT NAME="email" SIZE="15" style="margin: 0">
<INPUT TYPE="hidden" NAME="id" VALUE=53309 style="margin: 0">
<INPUT TYPE="submit" VALUE="go" style="margin: 0">
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
noiseradiostar
post Feb 22 2007, 12:05 PM
Post #9


Newbie
*

Group: Members
Posts: 11
Joined: 16-February 07
Member No.: 1,926



QUOTE(pandy @ Feb 22 2007, 10:13 AM) *

smile.gif

Now you have the text inside the form, but you close the form directly after the text instead of letting it contain the form contols too, which is really the purpose of the FORM element.

QUOTE
<FORM METHOD="POST" ACTION="http://server.com/WebApps/mail-list-subscribe.cgi" style="margin: 0">
   Get E-Mail Updates  </form>
<INPUT NAME="email" SIZE="15" style="margin: 0">
<INPUT TYPE="hidden" NAME="id" VALUE=53309 style="margin: 0">
<INPUT TYPE="submit" VALUE="go" style="margin: 0">



Yes, I changed that around when I was trying to think of anything and everything it could be. I changed it back as you can see and it still has the problem.

It seems to me the problem is that the columns at the bottom are wanting to align with the columns in the middle of the page. In fact, in the TD cell that holds the FORM, I can change the TD width from 100 to 1200 and it doesn't matter. It still aligns with the column containing the "thirteenstars" graphic above it. Any idea why its doing this and not acting independently regarding the width?


(I know you're murmuring "rookie" to yourself right now. Haha. I promise I'll stop bugging everyone if I can just fix this one problem.)

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Feb 22 2007, 01:33 PM
Post #10


WDG Member
********

Group: Root Admin
Posts: 8,270
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
It seems to me the problem is that the columns at the bottom are wanting to align with the columns in the middle of the page. In fact, in the TD cell that holds the FORM, I can change the TD width from 100 to 1200 and it doesn't matter. It still aligns with the column containing the "thirteenstars" graphic above it. Any idea why its doing this and not acting independently regarding the width?
It's hard to be sure with all the nested tables, but it looks like the cells that are being aligned with each other are part of the same table. So of course they align with each other: that's what tables do.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Feb 22 2007, 11:30 PM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,936
Joined: 9-August 06
Member No.: 6



The text and the form inputs have to wrap. There isn't toom for them not too. In your mind, put the text before the input. Does it look like there's room enough for that? Nope. If you remove all the &nbsp; there's almost room for them on one line. Even if you make the text and the input smaller, wrapping will still occur if the user uses a larger text size than you planned for. Simply put, if it's essential to have it all on one line, don't make it so darn tight.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 15th July 2018 - 01:48 PM