nickchrisless
10-25-2006, 01:56 AM
I'm trying to make a header for my forum. Whenever I try to copy the search form information from the vBulletin template and paste it into the appropriate <td>, it stretches out my table leaving the header unaligned.
Here is my table... like said, it's all laid out perfectly until the search form is entered. Then it becomes a bit stretched out vertically. You'll notice this by looking at the middle links, or the "remember me" section to the right...
The form of the table should continue to look like:
http://www.sportstalknet.net/header.jpg
Here is the code (HTML):
<table id="Table_01" width="778" height="87" border="0" cellpadding="0" cellspacing="0" background="images/header_bg.jpg">
<tr>
<td rowspan="10" width="295" height="87"></td>
<td colspan="5" rowspan="2" width="332" height="34" align="center">
<!-- Search Form -->
<form action="search.php?do=process" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="text" class="bginput" name="query" style="font-size:9px;" value="Search SportsTalkNet.net" size="29" tabindex="1001" />
<input type="image" src="images/go.jpg" class="button" value="go" tabindex="1004" />
</form>
<!-- End Search Form -->
</td>
<td width="150" height="19"></td>
<td>
<img src="images/spacer.gif" width="1" height="19" border="0"></td>
</tr>
<tr>
<td rowspan="9" width="150" height="68" align="right">
<!-- login form -->
<form action="http://www.sportstalknet.net/forums/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<div class="logintext"><label for="navbar_username">User Name:</label>
<input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="User Name" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" />
<br><label for="navbar_password">Password:</label>
<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" />
<br>Remember Me?<input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />
<input type="image" class="button" src="images/login.gif" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
</div>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
<td>
<img src="images/spacer.gif" width="1" height="15" border="0"></td>
</tr>
<tr>
<td rowspan="3" width="1" height="17"></td>
<td rowspan="2">
<a href="advertise.html">
<img src="images/advertise.jpg" width="68" height="11" border="0"></a></td>
<td colspan="3" width="263" height="8"></td>
<td>
<img src="images/spacer.gif" width="1" height="8" border="0"></td>
</tr>
<tr>
<td rowspan="6" width="44" height="38"></td>
<td rowspan="5">
<a href="forums/register.php">
<img src="images/register.gif" width="108" height="33" border="0"></a></td>
<td rowspan="6" width="111" height="38"></td>
<td>
<img src="images/spacer.gif" width="1" height="3" border="0"></td>
</tr>
<tr>
<td width="68" height="6"></td>
<td>
<img src="images/spacer.gif" width="1" height="6" border="0"></td>
</tr>
<tr>
<td colspan="2">
<a href="forums/sendmessage.php">
<img src="images/contact_us.jpg" width="69" height="10" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td colspan="2" width="69" height="9"></td>
<td>
<img src="images/spacer.gif" width="1" height="9" border="0"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href="about_us.html">
<img src="images/about_us.jpg" width="69" height="10" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td width="108" height="5"></td>
<td>
<img src="images/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td colspan="5" width="332" height="7"></td>
<td>
<img src="images/spacer.gif" width="1" height="7" border="0"></td>
</tr>
</table>
To see the code live go to www.sportstalknet.net/header_new.html
-----------------------------------------------------------------------------
Nevermind, I figured it out...
I forgot to add in the margin=0 and padding=0 to my form. That did the trick. I also should have made that code in CSS.
Thanks anyways! (Please delete)
Here is my table... like said, it's all laid out perfectly until the search form is entered. Then it becomes a bit stretched out vertically. You'll notice this by looking at the middle links, or the "remember me" section to the right...
The form of the table should continue to look like:
http://www.sportstalknet.net/header.jpg
Here is the code (HTML):
<table id="Table_01" width="778" height="87" border="0" cellpadding="0" cellspacing="0" background="images/header_bg.jpg">
<tr>
<td rowspan="10" width="295" height="87"></td>
<td colspan="5" rowspan="2" width="332" height="34" align="center">
<!-- Search Form -->
<form action="search.php?do=process" method="post">
<input type="hidden" name="do" value="process" />
<input type="hidden" name="quicksearch" value="1" />
<input type="hidden" name="childforums" value="1" />
<input type="hidden" name="exactname" value="1" />
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="text" class="bginput" name="query" style="font-size:9px;" value="Search SportsTalkNet.net" size="29" tabindex="1001" />
<input type="image" src="images/go.jpg" class="button" value="go" tabindex="1004" />
</form>
<!-- End Search Form -->
</td>
<td width="150" height="19"></td>
<td>
<img src="images/spacer.gif" width="1" height="19" border="0"></td>
</tr>
<tr>
<td rowspan="9" width="150" height="68" align="right">
<!-- login form -->
<form action="http://www.sportstalknet.net/forums/login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])">
<script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script>
<div class="logintext"><label for="navbar_username">User Name:</label>
<input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="User Name" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" />
<br><label for="navbar_password">Password:</label>
<input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" />
<br>Remember Me?<input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />
<input type="image" class="button" src="images/login.gif" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" />
</div>
<input type="hidden" name="s" value="$session[sessionhash]" />
<input type="hidden" name="do" value="login" />
<input type="hidden" name="vb_login_md5password" />
<input type="hidden" name="vb_login_md5password_utf" />
</form>
<!-- / login form -->
</td>
<td>
<img src="images/spacer.gif" width="1" height="15" border="0"></td>
</tr>
<tr>
<td rowspan="3" width="1" height="17"></td>
<td rowspan="2">
<a href="advertise.html">
<img src="images/advertise.jpg" width="68" height="11" border="0"></a></td>
<td colspan="3" width="263" height="8"></td>
<td>
<img src="images/spacer.gif" width="1" height="8" border="0"></td>
</tr>
<tr>
<td rowspan="6" width="44" height="38"></td>
<td rowspan="5">
<a href="forums/register.php">
<img src="images/register.gif" width="108" height="33" border="0"></a></td>
<td rowspan="6" width="111" height="38"></td>
<td>
<img src="images/spacer.gif" width="1" height="3" border="0"></td>
</tr>
<tr>
<td width="68" height="6"></td>
<td>
<img src="images/spacer.gif" width="1" height="6" border="0"></td>
</tr>
<tr>
<td colspan="2">
<a href="forums/sendmessage.php">
<img src="images/contact_us.jpg" width="69" height="10" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="10" border="0"></td>
</tr>
<tr>
<td colspan="2" width="69" height="9"></td>
<td>
<img src="images/spacer.gif" width="1" height="9" border="0"></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href="about_us.html">
<img src="images/about_us.jpg" width="69" height="10" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td width="108" height="5"></td>
<td>
<img src="images/spacer.gif" width="1" height="5" border="0"></td>
</tr>
<tr>
<td colspan="5" width="332" height="7"></td>
<td>
<img src="images/spacer.gif" width="1" height="7" border="0"></td>
</tr>
</table>
To see the code live go to www.sportstalknet.net/header_new.html
-----------------------------------------------------------------------------
Nevermind, I figured it out...
I forgot to add in the margin=0 and padding=0 to my form. That did the trick. I also should have made that code in CSS.
Thanks anyways! (Please delete)