Forum Moderators: not2easy
The below code is the full table code. Between the two main cells of this page is a double lined border running vertically. I can't find what is creating this border for the life of me and it is driving me nuts. Can someone look at this code and see if you can spot what is creating this border. It separates the two main sections of this, the one on the left has the log in box and one on the right has the two "feature" boxes.
I apologize in advance for the length of the code, but I couldn't make it smaller because I am not sure what is causing the issue...
<table width="119%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="1"><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
<td width="1" class="SpacerHorizontal_Home" ><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
<td width="148" id="leftContent"><table width="100%" height="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" class="homeLeftHeaderDark">Links</td>
</tr>
<tr>
<td valign="top" class="homeLink"><a href="#">> Link 1</a><br />
<a href="#">> Link 2</a><br />
<a href="#">> Link 3</a><br />
<a href="#">> Link 4 </a></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1"><img src="siteassist_images/spacer.gif" alt="" height="1" /></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="homeLinkBackground"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" class="homeLeftHeaderDark">Login</td>
</tr>
<tr>
<td valign="top" class="homeLink"><form name="form1" id="form1" method="post" action="">
Username<br />
<input name="textUsername" type="text" id="textUsername2" style="width:120px" />
Password<br />
<input name="textPassword" type="password" id="textPassword2" style="width:120px" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5"><img src="siteassist_images/spacer.gif" alt="" height="5" /></td>
</tr>
<tr>
<td><input name="imageField" type="image" src="siteassist_images/login_btn.gif" alt="Login" width="57" height="22" border="0" /></td>
</tr>
</table>
</form></td>
</tr>
</table></td>
</tr>
</table>
</td>
<td width="1" class="SpacerHorizontal_Home"><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
<td width="1"><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
<td width="1" class="SpacerHorizontal_Home"><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
<td id="rightContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1"><img src="siteassist_images/spacer.gif" alt="" height="1" /></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="50%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" class="homeFeatureHeader">Feature 1 </td>
</tr>
<tr>
<td height="10"><img src="siteassist_images/spacer.gif" alt="" height="10" /></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="10"><img src="siteassist_images/spacer.gif" alt="" width="10" /></td>
<td class="FeaturedItemBodyText"><span class="FeatureItemNameText">Feature Headline</span> <br />
Lorem ipsum dolor sit amet, consectetuer dulce et decorum est e pluribus unum fiat lux semper fidelis ad infinitum. <strong><br />
LINK></strong></td>
</tr>
</table></td>
<td width="1"><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
<td width="50%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" class="homeFeatureHeader">Feature 2 </td>
</tr>
<tr>
<td height="10"><img src="siteassist_images/spacer.gif" alt="" height="10" /></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="10"><img src="siteassist_images/spacer.gif" alt="" width="10" /></td>
<td class="FeaturedItemBodyText"><span class="FeatureItemNameText">Feature Headline </span><br />
Lorem ipsum dolor sit amet, consectetuer dulce et decorum est e pluribus unum fiat lux semper fidelis ad infinitum. <strong><br />
LINK></strong></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="10"><img src="siteassist_images/spacer.gif" alt="" width="2" height="10" /></td>
</tr>
</table></td>
<td width="1"><img src="siteassist_images/spacer.gif" alt="" width="1" /></td>
</tr>
</table>
any other css pages attached to this or css content in the header of this page?
There are about 5 links to style sheets up there that do various things.
The first thing you should do it get rid of the tables and create <div> instead, it is easier to follow problems.
I have heard you shouldn't use any tables in designs anymore, but I am not sure why people say that as it seems to display ok. However in this case if I were redesigning the site or wanted to get that involved I would change them, but for now I am not really sure how to do that nor do I want to get that deep in this.
