Problems aligning textfield and buttons in tables

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alamaks
Forum Newbie
Posts: 1
Joined: Wed Jun 25, 2003 8:54 am

Problems aligning textfield and buttons in tables

Post by alamaks »

Hi there,

I am creating a custom login page that will bring the user to the main forum page, but the textfield that was created in the tables does not aligned properly with the images in my page. Below is the source code for the site. Can anyone help me with it?


Code:

Code: Select all

<html>
<head>
<title>VersionSeven</title>
<meta http-equiv="Content-Type" content="text/html;">
<!-- Fireworks MX Dreamweaver MX target.  Created Tue Jun 17 19:15:11 GMT+0800 (Malay Peninsula Standard Time) 2003-->
<link href="site01.css" rel="stylesheet" type="text/css">
<link href="fieldtxt.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#e6e6dc">
<TABLE height="6%" cellSpacing=0 cellPadding=0 width=100 align=center 
  border=0>
  <!--DWLayoutTable-->
  <TBODY>
  <TR>
    <TD height="30">&nbsp;</TD></TR></TBODY></TABLE>
<table border="0" cellpadding="0" cellspacing="0" width="752" align="center">
  <!--DWLayoutTable-->
<!-- fwtable fwsrc="Horiz_01slice.png" fwbase="index2.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
  <tr>
   <td width="120" height="1"><img src="images/spacer.gif" width="120" height="1" border="0" alt=""></td>
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td width="411"><img src="images/spacer.gif" width="411" height="1" border="0" alt=""></td>
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td width="172"><img src="images/spacer.gif" width="50" height="1" border="0" alt=""></td>
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td>
   <td width="1"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
  </tr>

  <tr>
   <td height="9" colspan="9"><img name="r1_c1" src="images/bar_ho.gif" width="751" height="9" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="9" border="0" alt=""></td>
  </tr>
  <tr>
   <td height="23"><img src="images/r2_c1.gif" alt="" name="r2_c1" width="120" height="23" border="0" usemap="#r2_c1Map"></td>
   <td rowspan="8"><img name="r2_c2" src="images/r2_c2.gif" width="8" height="349" border="0" alt=""></td>
   <td colspan="3"><img src="images/r2_c3.gif" alt="" name="r2_c3" width="427" height="23" border="0" usemap="#r2_c3Map"></td>
   <td rowspan="8"><img name="r2_c6" src="images/r2_c6.gif" width="8" height="349" border="0" alt=""></td>
   <td colspan="3"><img name="r2_c7" src="images/r2_c7.gif" width="188" height="23" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt=""></td>
  </tr>
  <tr>
   <td rowspan="7" valign="top" bgcolor="#FFFFFF"><img src="images/quo_01.gif" width="120" height="326"></td>
   <td rowspan="7"><img name="r3_c3" src="images/r3_c3.gif" width="8" height="326" border="0" alt=""></td>
   <td height="8"><img name="r3_c4" src="images/r3_c4.gif" width="411" height="8" border="0" alt=""></td>
   <td rowspan="7"><img name="r3_c5" src="images/r3_c5.gif" width="8" height="326" border="0" alt=""></td>
   <td rowspan="4"><img name="r3_c7" src="images/r3_c7.gif" width="8" height="66" border="0" alt=""></td>
   <td><img name="r3_c8" src="images/r3_c8.gif" width="172" height="8" border="0" alt=""></td>
   <td rowspan="4"><img name="r3_c13" src="images/r3_c13.gif" width="8" height="66" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
    <td rowspan="5"><img name="r4_c4" src="images/img_w_01.jpg" width="411" height="310" border="0" alt=""></td>
    <td height="45" valign="top"><table width="172" border="0" align="left" cellpadding="0" cellspacing="0">
        <!--DWLayoutTable-->
          <td width="172"> <form method='post' action='forums/login.php'>
  
  <table width='172' border='0' bordercolor='#0000CC' cellpadding='0' cellspacing='0' class=content>
      <!--DWLayoutTable-->
              <tr><td width='62' rowspan="2" align="left" valign="middle"><div align='left' class="fieldtext"><span class="fieldtext">User ID&nbsp;</span>&nbsp;</div>
              </td>
        <td width="51" rowspan="2" valign="top"> 
          <input name='username' type='text' size="8" class="verdana6">
          <b>        </b> </td>
      <td width="56" height="19" valign="top"><input type='hidden' name='redirect2' value='' />
        <b>
        <input type=hidden name=autologin2 value=1>
        </b></td>
              <td width="3"></td>
              </tr>
              <tr>
                <td rowspan="2" align="left" valign="top"><input type='submit' name='login' value='ok'>
                  </td>
        <td height="3"></td>
              </tr>
              <tr>
                <td rowspan="2" align="left" valign="middle"> 
                  <div align="left"><span class="fieldtext">Password<b>&nbsp; </b></span> </div>
                </td>
          <td rowspan="2" valign="top"><b> 
          <input name='password' type='password' size="8" class="verdana6">
                                                                                                                                                                                                                                                                                                                                                                      </b> </td>
          <td height="21"></td>
              </tr>
              <tr>
                <td height="1"></td>
                <td></td>
              </tr>
              <tr>
                <td height='1'></td>
                <td></td>
                <td></td>
                <td></td>
              </tr>
    </table>
  </form></td>
        </tr>
    </table>
    </td>
    <td rowspan="2"><img src="images/spacer.gif" width="1" height="50" border="0" alt=""></td>
  </tr>
  <tr>
    <td height="5"></td>
  </tr>
  <tr>
    <td height="8"><img name="r5_c8" src="images/r5_c8.gif" width="172" height="8" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
    <td height="8" colspan="3"><img name="r6_c7" src="images/r6_c7.gif" width="188" height="8" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
    <td colspan="3" rowspan="2" valign="top" bgcolor="#FFFFFF"><img src="images/txt_h_01.gif" width="188" height="252"></td>
   <td height="244"><img src="images/spacer.gif" width="1" height="244" border="0" alt=""></td>
  </tr>
  <tr>
    <td height="8"><img name="r8_c4" src="images/r8_c4.gif" width="411" height="8" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td>
  </tr>
  <tr>
   <td height="11" colspan="9"><img name="r9_c1" src="images/r9_c1.gif" width="751" height="11" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="11" border="0" alt=""></td>
  </tr>
  <tr>
   <td height="19" colspan="2"><img name="r10_c1" src="images/r10_c1.gif" width="128" height="19" border="0" alt=""></td>
   <td colspan="3"><img name="r10_c3" src="images/r10_c3.gif" width="427" height="19" border="0" alt=""></td>
   <td colspan="4"><img name="r10_c6" src="images/r10_c6.gif" width="196" height="19" border="0" alt=""></td>
   <td><img src="images/spacer.gif" width="1" height="19" border="0" alt=""></td>
  </tr>
</table>
<p class="fieldtext">&nbsp;</p>
<p class="fieldtext">&nbsp;</p>
<p class="fieldtext">
  <map name="r2_c1Map">
    <area shape="rect" coords="2,1,56,15" href="http://www.versionseven.com/forums/index.php" alt="VersionSeven Forums">
  </map>
  <map name="r2_c3Map">
    <area shape="rect" coords="81,1,142,16" href="company.htm">
    <area shape="rect" coords="171,1,233,16" href="solution.htm">
    <area shape="rect" coords="263,1,322,16" href="pfolio.htm">
    <area shape="rect" coords="351,1,423,16" href="contact.htm">
    <area shape="rect" coords="5,1,48,16" href="index.php">
  </map>
</p>
</body>
</html>
User avatar
phice
Moderator
Posts: 1416
Joined: Sat Apr 20, 2002 3:14 pm
Location: Dallas, TX
Contact:

Post by phice »

Code: Select all

<html> 
<head> 
<title>VersionSeven</title> 
<meta http-equiv="Content-Type" content="text/html;"> 
<!-- Fireworks MX Dreamweaver MX target.  Created Tue Jun 17 19:15:11 GMT+0800 (Malay Peninsula Standard Time) 2003--> 
<link href="site01.css" rel="stylesheet" type="text/css"> 
<link href="fieldtxt.css" rel="stylesheet" type="text/css"> 
</head> 
<body bgcolor="#e6e6dc"> 
<TABLE height="6%" cellSpacing=0 cellPadding=0 width=100 align=center 
  border=0> 
  <!--DWLayoutTable--> 
  <TBODY> 
  <TR> 
    <TD height="30"> </TD></TR></TBODY></TABLE> 
<table border="0" cellpadding="0" cellspacing="0" width="752" align="center"> 
  <!--DWLayoutTable--> 
<!-- fwtable fwsrc="Horiz_01slice.png" fwbase="index2.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" --> 
  <tr> 
   <td width="120" height="1"><img src="images/spacer.gif" width="120" height="1" border="0" alt=""></td> 
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td> 
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td> 
   <td width="411"><img src="images/spacer.gif" width="411" height="1" border="0" alt=""></td> 
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td> 
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td> 
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td> 
   <td width="172"><img src="images/spacer.gif" width="50" height="1" border="0" alt=""></td> 
   <td width="8"><img src="images/spacer.gif" width="8" height="1" border="0" alt=""></td> 
   <td width="1"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td> 
  </tr> 

  <tr> 
   <td height="9" colspan="9"><img name="r1_c1" src="images/bar_ho.gif" width="751" height="9" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="9" border="0" alt=""></td> 
  </tr> 
  <tr> 
   <td height="23"><img src="images/r2_c1.gif" alt="" name="r2_c1" width="120" height="23" border="0" usemap="#r2_c1Map"></td> 
   <td rowspan="8"><img name="r2_c2" src="images/r2_c2.gif" width="8" height="349" border="0" alt=""></td> 
   <td colspan="3"><img src="images/r2_c3.gif" alt="" name="r2_c3" width="427" height="23" border="0" usemap="#r2_c3Map"></td> 
   <td rowspan="8"><img name="r2_c6" src="images/r2_c6.gif" width="8" height="349" border="0" alt=""></td> 
   <td colspan="3"><img name="r2_c7" src="images/r2_c7.gif" width="188" height="23" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="23" border="0" alt=""></td> 
  </tr> 
  <tr> 
   <td rowspan="7" valign="top" bgcolor="#FFFFFF"><img src="images/quo_01.gif" width="120" height="326"></td> 
   <td rowspan="7"><img name="r3_c3" src="images/r3_c3.gif" width="8" height="326" border="0" alt=""></td> 
   <td height="8"><img name="r3_c4" src="images/r3_c4.gif" width="411" height="8" border="0" alt=""></td> 
   <td rowspan="7"><img name="r3_c5" src="images/r3_c5.gif" width="8" height="326" border="0" alt=""></td> 
   <td rowspan="4"><img name="r3_c7" src="images/r3_c7.gif" width="8" height="66" border="0" alt=""></td> 
   <td><img name="r3_c8" src="images/r3_c8.gif" width="172" height="8" border="0" alt=""></td> 
   <td rowspan="4"><img name="r3_c13" src="images/r3_c13.gif" width="8" height="66" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td> 
  </tr> 
  <tr> 
    <td rowspan="5"><img name="r4_c4" src="images/img_w_01.jpg" width="411" height="310" border="0" alt=""></td> 
    <td height="45" valign="top"><table width="172" border="0" align="left" cellpadding="0" cellspacing="0"> 
        <!--DWLayoutTable--> 
          <td width="172">
  
  <table width='172' border='0' bordercolor='#0000CC' cellpadding='0' cellspacing='0' class=content> 
 <form method='post' action='forums/login.php'> 
      <!--DWLayoutTable--> 
              <tr><td width='62' rowspan="2" align="left" valign="middle"><div align='left' class="fieldtext"><span class="fieldtext">User ID </span> </div> 
              </td> 
        <td width="51" rowspan="2" valign="top"> 
          <input name='username' type='text' size="8" class="verdana6"> 
          <b>        </b> </td> 
      <td width="56" height="19" valign="top"><input type='hidden' name='redirect2' value='' /> 
        <b> 
        <input type=hidden name=autologin2 value=1> 
        </b></td> 
              <td width="3"></td> 
              </tr> 
              <tr> 
                <td rowspan="2" align="left" valign="top"><input type='submit' name='login' value='ok'> 
                  </td> 
        <td height="3"></td> 
              </tr> 
              <tr> 
                <td rowspan="2" align="left" valign="middle"> 
                  <div align="left"><span class="fieldtext">Password<b>  </b></span> </div> 
                </td> 
          <td rowspan="2" valign="top"><b> 
          <input name='password' type='password' size="8" class="verdana6"> 
                                                                                                                                                                                                                                                                                                                                                                      </b> </td> 
          <td height="21"></td> 
              </tr> 
              <tr> 
                <td height="1"></td> 
                <td></td> 
              </tr> 
              <tr> 
                <td height='1'></td> 
                <td></td> 
                <td></td> 
                <td></td> 
              </tr> 
  </form></table> 
</td> 
        </tr> 
    </table> 
    </td> 
    <td rowspan="2"><img src="images/spacer.gif" width="1" height="50" border="0" alt=""></td> 
  </tr> 
  <tr> 
    <td height="5"></td> 
  </tr> 
  <tr> 
    <td height="8"><img name="r5_c8" src="images/r5_c8.gif" width="172" height="8" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td> 
  </tr> 
  <tr> 
    <td height="8" colspan="3"><img name="r6_c7" src="images/r6_c7.gif" width="188" height="8" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td> 
  </tr> 
  <tr> 
    <td colspan="3" rowspan="2" valign="top" bgcolor="#FFFFFF"><img src="images/txt_h_01.gif" width="188" height="252"></td> 
   <td height="244"><img src="images/spacer.gif" width="1" height="244" border="0" alt=""></td> 
  </tr> 
  <tr> 
    <td height="8"><img name="r8_c4" src="images/r8_c4.gif" width="411" height="8" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt=""></td> 
  </tr> 
  <tr> 
   <td height="11" colspan="9"><img name="r9_c1" src="images/r9_c1.gif" width="751" height="11" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="11" border="0" alt=""></td> 
  </tr> 
  <tr> 
   <td height="19" colspan="2"><img name="r10_c1" src="images/r10_c1.gif" width="128" height="19" border="0" alt=""></td> 
   <td colspan="3"><img name="r10_c3" src="images/r10_c3.gif" width="427" height="19" border="0" alt=""></td> 
   <td colspan="4"><img name="r10_c6" src="images/r10_c6.gif" width="196" height="19" border="0" alt=""></td> 
   <td><img src="images/spacer.gif" width="1" height="19" border="0" alt=""></td> 
  </tr> 
</table> 
<p class="fieldtext"> </p> 
<p class="fieldtext"> </p> 
<p class="fieldtext"> 
  <map name="r2_c1Map"> 
    <area shape="rect" coords="2,1,56,15" href="http://www.versionseven.com/forums/index.php" alt="VersionSeven Forums"> 
  </map> 
  <map name="r2_c3Map"> 
    <area shape="rect" coords="81,1,142,16" href="company.htm"> 
    <area shape="rect" coords="171,1,233,16" href="solution.htm"> 
    <area shape="rect" coords="263,1,322,16" href="pfolio.htm"> 
    <area shape="rect" coords="351,1,423,16" href="contact.htm"> 
    <area shape="rect" coords="5,1,48,16" href="index.php"> 
  </map> 
</p> 
</body> 
</html>

I placed the <form> and </form> tags outside of the <tr> tags and inside the <table> tags so there wont be unspecified spaces.
Image Image
Post Reply