Making a big form questionnaire thing. Tables?

[Awesome_O_4000]

I figured tables would be easiest to use. This is coming from no knowledge of tables. Seems like a smart move there.

Anyway, should I use tables? It’s going to look like this (Made a quick one with tables already).

I see that it’s all weird in IE7 though.

If I were to go this route, how could I fix the width of the left columns? I tried colspan and width properties on the td’s, but that didn’t seem to do much.

[Syous]

Read below.

[Syous]

CSS it and use float the label to the left, justify text to the right.

input {
display: block;
width: 100px;
float: left;
}

label{
dsiplay: block;
text-align: right;
float: left;
width: 100px:
}

[fasterthanlight]

I always… ALWAYS lay out forms with tables.

Especially long ones…

there is less chance of the overall structure breaking if you use tables as opposed to a crap load of divs floated left and right…

Tables are fine, even… .AWESOME to use if you use them properly, people have this misconception about tables being deprecated now, and that divs are the bees knees…

Tables still have valuable usages

This is how I would code your form, awesome-o

<table>
<tr>
<th><label>Some Label</label></th>
<td><input></td>
</tr>

<tr>
<th><label>Some Label</label></th>
<td><input></td>
</tr>

<tr>
<th><label>Some Label</label></th>
<td><input></td>
</tr>

</table>

table {
border-collapse: collapse;
margin:0;
padding:0;
}

table tr th {
font-weight:normal;
text-align: left;
}

table tr td {
text-align: right;
}

Granted, you could just use <td>'s for your labels, but sometimes its necessary to distinguish the label td from the input td, and the only way to do that is to use <th> and <td> respectively. – or give your label td a class… but why add unnecessary classes if you can distinguish them at a tag level

[Syous]

Faster is wrong, I am right.

Tables are easier for forms, and I realize I should of made my latest form using them…always learning!

[fasterthanlight]

lol

[fasterthanlight]

Note to Awesome-o

if you lay out your tables like I showed you, you can apply very specific CSS to just your labels:

table tr th {
width: ---- ;
}

[Awesome_O_4000]

Sweeeeet.

Thanks FTL.

[Awesome_O_4000]

Sweet, this is working well so far. Looks good in Firefox. Guess what it doesn’t look good in.

If you care to look, you’ll see the left column is super narrow, and the labels are on 2-3 lines.

Additionally, the 8th or 9th item, the Fund Strategy, has a dropdown menu with an open field beside it. I want the open field below on the next line, but not sure how to at the moment.

I’ll work on the basics for everything else while I wait for someone comes in here and hold my hand.

[actionAction]

Add some conditional CSS to fix M$ Internet Exploiters misrepresentation of your code
<!–[if IE]>
Special instructions for IE here
<![endif]–>

You can use a [noparse]<br />[/noparse] tag within your td to achieve a line break.

[fasterthanlight]

try adding this first

table tr th {
text-align:left;
[COLOR=Red] font-weight: normal;
padding:0;
font-size:12px;
width: — px;[/COLOR]
}

table tr th label {
display:block;
width: —px;
}

you shouldnt have to write IE conditionals if you get your css all fleshed out properly…

you have to be very very specific, don’t leave anything as default.

*EDIT: disregard, I see the problem now, let me find a solution

[fasterthanlight]

get rid of cellpadding=8 in your <table>

you can add padding to your td’s and th’s with the CSS… this could be causing conflicting padding issues which makes your table wider than your column, which would drop it down below your nav, also it would be adding the unnecessary padding to your labels forcing them to squeeze and display on 3 lines

[Awesome_O_4000]

[quote=fasterthanlight™;2326197]get rid of cellpadding=8 in your <table>

you can add padding to your td’s and th’s with the CSS… this could be causing conflicting padding issues which makes your table wider than your column, which would drop it down below your nav, also it would be adding the unnecessary padding to your labels forcing them to squeeze and display on 3 lines[/quote]

Oops. Forgot to remove that.

Okay, so I re-HTML’d it. Looking good, but a couple of things I’m trying to get to work:

• I need a little space between each tr. Adjusting the padding/margins don’t do anything. What other options do I have?
• td width still isn’t changing in IE.

I think there was something else. I forget.

I just got back from vacation a couple days ago, so forgive me for the stupid questions. lol

[fasterthanlight]

to add padding in between each tr, just add top or bottom padding to both <th> and <td> (I know for a fact that IE doesn’t like borders on table rows, the same could be true about padding)

IE might be having a problem with your labels, not your <th>

so define a fixed width for your labels and apply the same value (minus any padding) to your <th>

table tr th **label** {
width: --- px;
}

[Awesome_O_4000]

@fasterthanlight™;2326236

to add padding in between each tr, just add top or bottom padding to both <th> and <td> (I know for a fact that IE doesn’t like borders on table rows, the same could be true about padding)

wtf. I tried that. I swear I did. And it didn’t work. And now it does. Yay.

:sen:<— I have no idea what that smiley is. Had a killer urge to use it though.

[fasterthanlight]

you must not have been internetting correctly

[Awesome_O_4000]

I got your internet. Right here.

Still looking gay in IE. IE doesn’t seem to care about the width property in tables. And it’s still placing text inputs and drop down menus side by side.

Oh well. I’ll worry about it tomorrow morning.

LEARNING IS FUN

[redelite]

@fasterthanlight™;2326317

you must not have been internetting correctly

[quote=Awesome-O 4000;2326333]I got your internet. Right here.
[/quote]

LOL, Now now you two!

Just a small little critique: That menu on the left, confused the crap out of me for the first few seconds. I think you should make them on click->show instead of on hover->show. Of course, that’s just one opinion. (-:

I’ll check the width issues when I get home on a PC. :bounce:

[Awesome_O_4000]

[quote=redelite;2326346]
Just a small little critique: That menu on the left, confused the crap out of me for the first few seconds. I think you should make them on click->show instead of on hover->show. Of course, that’s just one opinion.[/quote]

Yeah, I’m not a giant fan of how it works myself, but they seem to, and I guess that’s all that matters. Heh.

[fasterthanlight]

Judging by firebug, you still haven’t defined a width for your label, this could fix your IE problem

To fix the problem with drop down menus and inputs,

you can break the two apart into two different table rows, and set the label to rowspan=2

<table>
<tr>
<th rowspan="2"><label>LABELZ</label></th>
<td>DROP DOWN MENU</td>
</tr>
<tr>
<td>INPUT YO</td>
</tr>
</table>

[COLOR=DarkOrange]** *edit: if doing that gives too much padding inbetween the drop down and input, you can give those two

's a class and adjust the padding:**[/COLOR]

<table>
<tr class="mod">
<th rowspan="2"><label>LABELZ</label></th>
<td>DROP DOWN MENU</td>
</tr>
<tr class="mod">
<td>INPUT YO</td>
</tr>
</table>

table tr.mod th, table tr.mod td { /* modify padding for both <th> and <td> */
padding-top: ---- px; 
}