Position textarea below table

In the following I need/want to alter the field called "TopicBody" to align with the table that appears above it.
No matter whether I tried div or span positioning but I cannot get it working correctly.
Please tell me why.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT"
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>

</head>
<body bgcolor="#eeeeee">
<div id="container">
<center>
<h2>Amend/Delete Help Record</h2>
<form id="HelpUD" name="HelpUD" action="HelpUpdate.php?UID=<?php echo $ID ?>" method=post enctype="multipart/form-data">
<table style="hidden">
<tr><td>Record Type:</td>
<td><input type='text' readonly id="RecordType" name="RecordType" value="<?php echo $ParentString ?>" >
</td></tr>
<tr><td>Topic Title:</td>
<td><input type="text" id="TopicTitle" name="TopicTitle" value="<?php echo $TopicName ?>" maxlength="25">
</td></tr>
<tr><td>Parent:</td>
<td><input type='text' id="Parent" name="Parent" value="<?php echo $Parent ?>" />
</td></tr>
</center>
</table>

Topic Body:
<textarea cols="60" rows="10" id="TopicBody" name="TopicBody" value="<?php echo $Topic ?> ></textarea>

<p><font color=red><?php echo $Message ?></font></p>
<input type=button value="Back" onclick="BackClick()" />
<input type=button value="Delete" onclick="DeleteHelp()" />
<input type=button value="Update" onclick="UpdateClick()" />
</form>
</div>
<div id="header">
        loading...
</div>

</body>
</html>

stockton

Light Poster

32 posts since Jul 2008

Reputation Points: 20

Solved Threads: 0

2 Years Ago

Show Comments

this is better

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<title>Add help</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="Mon, 22 Jul 2000 11:12:01 GMT" />
<!-- Put IE into quirks mode -->
<title><?php echo HOSTDESCRIPTOR ?>: HelpPage</title>
<link rel="stylesheet" type="text/css" href="CSS/Help.css" />
<link rel="stylesheet" href="/CSS/custom-theme/jquery-ui-1.7.1.custom.css"/>
<link rel="stylesheet" href="/CSS/SiteWide.css"/>
<script type="text/javascript" src="/JavaScripts/DWjQuery.js"></script>
<script type="text/javascript" src="/JavaScripts/CL/ComponentLoader.js"></script>
<script type="text/javascript">
$(document).ready( function()
    {
    //load the standard headers.
    $("#header").LoadComponent("<? echo STANDARD_HEADER;?>");
    });
</script>
</head>
<body bgcolor="#eeeeee">
<div style='text-align:center'>
<h2>Amend/Delete Help Record</h2>
<form id="HelpUD" name="HelpUD" action="HelpUpdate.php?UID=<?php echo $ID ?>" method=post enctype="multipart/form-data">
<table style="hidden">
<tr><td>Record Type:</td>
<td><input type='text' readonly id="RecordType" name="RecordType" value="<?php echo $ParentString ?>" >
</td></tr>
<tr><td>Topic Title:</td>
<td><input type="text" id="TopicTitle" name="TopicTitle" value="<?php echo $TopicName ?>" maxlength="25">
</td></tr>
<tr><td>Parent:</td>
<td><input type='text' id="Parent" name="Parent" value="<?php echo $Parent ?>" />
</td></tr>
</table>
Topic Body:
<textarea cols="60" rows="10" id="TopicBody" name="TopicBody" value="<?php echo $Topic ?>"></textarea>
</div>
<p><font color='red'><?php echo $Message ?></font></p>
<input type='button' value="Back" onclick="BackClick()" />
<input type='button' value="Delete" onclick="DeleteHelp()" />
<input type='button' value="Update" onclick="UpdateClick()" />
</form>
</div>
<div id="header">loading...
</div>
</body>
</html>

the best criticism/advice I can offer is to use a code highlighting editor, notepad2 notepad++ or any of the others, that will show you when you have forgotten to close a quote.
the code is not valid xhtml see the new line 2, there are other bugs, validate by pointing the validator at a test run url, so there is a value in the script variables
this tool http://validator.w3.org/ will help you debug

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

2 Years Ago

I appreciate the help and will work on almostbob's suggestions.

stockton

Light Poster

32 posts since Jul 2008

Reputation Points: 20

Solved Threads: 0

2 Years Ago

OK I have attempted your version which can, with small alterations, be seen at http://www.stockton.co.za/HelpUD.php .
It still does not give me what I wanted.
I would like the text "Topic Body: " to appear at the top of the textarea box.
I also want this Text & textarea to be aligned with the fields above it.
Something similar to http://www.stockton.co.za/Screenshot.png would do fine.

stockton

Light Poster

32 posts since Jul 2008

Reputation Points: 20

Solved Threads: 0

2 Years Ago

topic body:

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

2 Years Ago

use span to your text

<span style="vertical-align: top">Topic Body:</span>

It will help you..

Zero13

Practically a Master Poster

624 posts since Jan 2009

Reputation Points: 120

Solved Threads: 139

This question has already been solved

You