Forms positioning trouble? Totally puzzled

[thrombox]

I've posted this in the CSS section despite it being HTML as I have not yet transferred all the Styles to the Style Sheet as I'm a little stuck at the moment.This is a contact form I created off a site. I can't seem to position it on my webpage it just jumps to the bottom. This is what I've been doing =-Trying to position the <form> part using top: 100px and left:20px in the styles part.-Trying to create a id="FormMain" and then editing the #FormMain{} in CSS (Please note I have been doing this with other HTML and have no difficulty exportign styles to a CSS, even when I create an ID it just doesn't seem to do anything to it)-Trying to add styles in the <td colspan>Can anyone please tell me what I'm doing wrong? You can load the following HTML to see exactly what I'm seeing. Any help much appreciated.Here is the HTML:<form enctype="multipart/form-data" action="http://free.allforms.mailjol.net/u/f9435624396.php" method="POST" style="margin: 0px"><table border="0" cellpadding="6" cellspacing="0" style="text-align: left; border: 4px solid #7090B0; border-collapse: collapse" width="1%" bgcolor="#F0F0F0"><tr><td colspan="2" bgcolor="#7090B0" style="font-size: 14px; font-family: Verdana; color: #FFFFFF; font-weight: bold; padding: 4px">Contact Us</td></tr><tr><td colspan="2" style="padding: 8px; font-size:11px; font-family: Verdana; color: #000000">Please fill the form below to contact us. Max total image size 3mb (please optimise images for web). We look forward to hearing from you.</td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">1.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Name: *<br><input type="Text" name="Name:" size="71" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">2.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">E-mail: *<br><input type="Text" name="E-mail:" size="71" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">3.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Subject: *<br><input type="Text" name="Subject:" size="71" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">4.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Message: *<br><textarea rows="4" cols="71" style="font-size: 11px; font-family: Verdana" name="Message:"></textarea></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">5.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Upload 1:<br><input type="file" name="Upload 1:" size="59" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td width="1%" style="font-size: 30px; font-family: Verdana; color: #C0C0C0; font-weight: bold; padding-left: 20px" valign="top" align="right">6.</td><td width="99%" style="font-size: 11px; font-family: Verdana; font-weight: bold; padding-right: 20px; color: #000000">Upload 2:<br><input type="file" name="Upload 2:" size="59" style="font-size: 11px; font-family: Verdana"></td></tr><tr><td colspan="2" align="center" style="padding: 8px"><input type="submit" name="submit" value="Submit" style="font-size: 11px; font-family: Verdana">  <input type="reset" name="reset" value="Reset" style="font-size: 11px; font-family: Verdana"></td></tr></table></form>

[music_lp90]

I think it has something to do with the code you are placing this into, can you post that? If you just try this form by itself it lines up at the top left of the screen, so this part should be fine.

[ShadowMage]

Sounds like you're trying to use absolute/relative positioning to place your form. I would advise against doing this (unless you have a very good reason) because this type of placement of elements can get to be very messy, very quickly, and is rarely the same in all browsers. Stick to margins/padding/float for element placement. They give much more consistent results.

[thrombox]

Shadow I think your right.Despite having done several tutorials on positioning I still find them confusing.Originally I thought they were a good idea as they are a prerequisite for z-indexing? Am I correct?Another good thing about absolutes is, if I change a certain element from the top left it move all the other absolutes in line with it? Is this correct?It seems to be doing so?Thats what could possibly be pushing my contact form to the bottom. Is there anyway of giving an order to bypass any absolutes?***Update: apologies I know whats going wrong a simple type error, somehow a closing end of the sidemenu bar got cut off.Apologies. I think it's fixed.

[ShadowMage]

Shadow I think your right.Despite having done several tutorials on positioning I still find them confusing.Originally I thought they were a good idea as they are a prerequisite for z-indexing? Am I correct?

I'm not sure about the z-indexing thing. Personally, I've never been able to get z-index to work for me. Any time I try using it, I fail.Anyhow, there are few situations that demand positioning. Most layouts can be achieved using margins, paddings, and floats. Oh, and modifying the display too.So, if you wanna try getting your form placed using these properties, we'd be glad to help you work out any bugs or fine tune things.

Another good thing about absolutes is, if I change a certain element from the top left it move all the other absolutes in line with it? Is this correct?It seems to be doing so?

Depends on what you mean by "all the other absolutes in line with it". Any child elements will be moved. Sibling elements will not.

[thrombox]

Christ! It was all happening because I missed out a closing </ul>!!! Fixed apologies and gratefulness for the help!

[thescientist]

it always pays to validate your code as the first step of the troubleshooting process.

[dsonesuk]

like form design, except for tables parttableless form

#myform{margin:0;}#myform input, #myform textarea { font-size: 11px; font-family: Verdana;}#outerdiv{text-align: left; border: 4px solid #7090B0; background-color:#F0F0F0; width:38.5%; overflow:auto; float:left; font-family: Verdana;}.rowone{background-color:#7090B0;font-size: 14px;color: #FFFFFF; font-weight: bold; padding: 4px;}.rowtwo{padding: 6px; font-size:11px;color: #000000;}.rowthree{font-size: 30px; color: #C0C0C0; font-weight: bold; padding-left: 20px; clear:both; overflow:auto; margin-bottom:12px;}.rowfour{padding: 8px; text-align:center;clear:both;}.cellone{float:left; padding-right:10px;}.celltwo{font-size: 11px;font-weight: bold; padding-right: 20px; color: #000000; float:left;}.celltwo span{ display:block;}

<form enctype="multipart/form-data" action="http://free.allforms.mailjol.net/u/f9435624396.php" method="POST" id="myform"><div id="outerdiv"><div class="rowone">Contact Us</div><div class="rowtwo">Please fill the form below to contact us. Max total image size 3mb (please optimise images for web). We look forward to hearing from you.</div><div class="rowthree">	<div class="cellone">1.</div>	<div class="celltwo"><span>Name: *</span><input type="Text" name="Name:" size="71">	</div></div><div class="rowthree">	<div class="cellone">2.</div>	<div class="celltwo"><span>E-mail: *</span><input type="Text" name="E-mail:" size="71">	</div></div><div class="rowthree">	<div class="cellone">3.</div>	<div class="celltwo"><span>Subject: *</span><input type="Text" name="Subject:" size="71">	</div></div><div class="rowthree">	<div class="cellone">4.</div>	<div class="celltwo"><span>Message: *</span><textarea rows="4" cols="71" name="Message:"></textarea>	</div></div><div class="rowthree">	<div class="cellone">5.</div>	<div class="celltwo"><span>Upload 1:</span><input type="file" name="Upload 1:" size="59">	</div></div><div class="rowthree">	<div class="cellone">6.</div>	<div class="celltwo"><span>Upload 2:</span><input type="file" name="Upload 2:" size="59">	</div></div><div class="rowfour"><input type="submit" name="submit" value="Submit">  <input type="reset" name="reset" value="Reset"></div></div></form>