Radio buttons & alignment

[Aronya1]

I have a table within a form. Here's the code for one of the rows:

<tr>
<td class="reg"><input name="kids" type="radio" value="yes" checked style=background-color:"9eb0be">Yes
<td class="reg"><input name="kids" type="radio" value="no" style=background-color:"9eb0be">No &nbsp;&nbsp; If yes, their age(s):<input name="kidsage" type="text" id="kidsage" size="12" maxlength="30" style=background-color:"9eb0be">
</td>
</tr>

What happens is that the display looks like this:
(button)
Yes
(button)
No If yes, their age(s):
(text box)

Can anybody tell me why I'm having this problem? There's plenty of room on the line for everything to display straight across the page.

[spufi]

Below is a cleaned up version of your code, but the one thing I need to see is where you define the width and you didn't include that in your code.

<tr>
<td class="reg"><input name="kids" type="radio" value="yes" checked style="background-color:#9eb0be">Yes</td>
<td class="reg"><input name="kids" type="radio" value="no" style="background-color:#9eb0be">No If yes, their age(s):<input name="kidsage" type="text" id="kidsage" size="12" maxlength="30" style="background-color:#9eb0be">
</td>
</tr>

[Aronya1]

Hi spufi,

The table only has 2 columns; 22% & 78%. Changing the code to your suggestion creates a 3rd cell on that row, to the right of the rest of the table. No good. Also, that cell still has the display problem I cited; radio button over text over text box.

(button)
NO If yes,
their age(s):
(text box)

Want to try again?


I'd rather not do this, but I might just try nesting a seperate 3-cell table in that row.

[Aronya1]

Just realized I'm having the same problem with my Submit & Reset buttons, too.

[Aronya1]

Update:

Any cell with more than one <input> field puts the fields on different lines. AAAAAHHHHHHHHh!!!!!!!!!!!!!!!!!!!!!!!!!

[spufi]

Well the only thing I really did differently was adding </td> before you opened another one because you should be closing a <td> tag before opening a new one. I didn't see a difference when I looked at the output either. Is that section of code in the 22% area, or the 78% area? It really looks it is pushing things down because there isn't enough width for it to be spread out. You got a link to the code, or can you just post the code so I can see it all for myself?

[Aronya1]

The code is pretty sizeable, & I don't have it online at the moment. The code in question is inside the 78% section. I wasn't opening a new <td> tag, specifically because the buttons are supposed to be in the same cell. For some reason, I can't even get a radio button and a single text word to display on the same line.


-------
Ok, the code I originally posted works just fine with <table> tags and nothing else. I'll take a look at the table to see if I can come up with anything.

Thanks for your input.

[spufi]

Originally posted by Aronya1
<tr>
<td class="reg"><input name="kids" type="radio" value="yes" checked style=background-color:"9eb0be">Yes
<td class="reg"><input name="kids" type="radio" value="no" style=background-color:"9eb0be">No &nbsp;&nbsp; If yes, their age(s):<input name="kidsage" type="text" id="kidsage" size="12" maxlength="30" style=background-color:"9eb0be">
</td>
</tr>

Two <td> tags, and one </td> tag. The second <td> tag is opened before the first one is closed.

[Aronya1]

You're right about what I posted. Problem is, I mis-typed. In any case the problem persists, even with both <input>tags inside one <td> tag. Like I posted earlier, the problem occurs with every instance of more than one <input> tag in a cell.

It will turn out to be something simple, I'm sure, but until I find it, my hair will be falling out.

[Fang]

Add style="white-space:nowrap" to the second cell

[Aronya1]

Hi Fang,

Thanks for trying, but that doesn't seem to help. I've put the page up here: member_reg (http://www.aronyanet.com/test/member_reg.htm)

The only way I've been able to fix it is to nest another table into the cell in question, and I'd really like to find a better answer.

Many thanks

[Fang]

This is the cause:
INPUT {DISPLAY: block }
If you need it in, then override it for that cell

[Aronya1]

You the man!

Many thanks.