Some Sort Of Border Is Appearing When I Use A Table - html

Question

I'm trying to design a web page and i have a 3 column 1 row table set up (Bottom Of The Page). This is illustrated in the following figure.
As you can see in that figure, some border is appearing at the start of td tag (Marked By Black Circles). I've made the border 0 and still there is no effect. Why is happening and how should i resolve it?
I've Provided The Code Below..
HTML
<div class="wrapper col3">
<div id="intro">
<div class="fl_left">
<div class="UpperSlideShow">
</div>
<div class="LowerFlyUps">
<table class="HoverTable" cellpadding="0" cellspacing="0" border="0" style="margin-left:2px;">
<tr>
<td>
<div class="box" id="box">
<div class="inner">
<h4>Header One</h4>
<p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
</div>
</div>
</td>
<td>
<div class="box" id="box1">
<div class="inner">
<h4>Header Two</h4>
<p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
</div>
</div>
</td>
<td>
<div class="box" id="box2">
<div class="inner">
<h4>Header Three</h4>
<p>Content One, Team Pwn helped us identify the root cause of our problems and delivered effective solutions to tackle them.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div class="fl_right"><img src="images/demo/380x300.gif" alt="" /></div>
<br class="clear" />
</div>
</div>
CSS
table.HoverTable
{
border: 0px;
}
table.HoverTable tr
{
border: 0px;
}
table.HoverTable tr rd
{
border: 0px;
}
.box {
position: absolute;
bottom: 0;
width: 175px;
height: 40px;
overflow: hidden;
color: #FFFFFF;
font: 12px Tahoma,sans-serif;
background-color: #284062;
margin-right: 10px;
float: left;
text-align:center;
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.box h4 {
padding-bottom: 10px;
border-bottom: 1px solid #fff;
font: 18px Tahoma,sans-serif;
text-transform: capitalize;
margin: 10px;
}
.box p {
margin: 0 10px;
}
#intro
{
padding:30px 0 5px 0;
font-size:16px;
font-family:Georgia, "Times New Roman", Times, serif;
}
#intro .fl_left
{
display:block;
float:left;
width:575px;
height:300px;
margin:0;
color:#FFFFFF;
background-color:#2684B7;
}
#intro .fl_left h3
{
font-size: 24px;
padding:0;
border:none;
color:#FFFFFF;
text-align:center;
line-height:2em;
}
#intro .fl_left p
{
margin:0;
padding:0;
line-height:1.6em;
}
#intro .fl_left p.readmore
{
display:block;
width:100%;
margin:20px 0 0 0;
padding:0;
text-align:right;
line-height:normal;
}
#intro .fl_left p.readmore a
{
padding:8px 15px;
font-size:18px;
color:#FFFFFF;
background-color:#1C5E82;
}
#intro .fl_right{float:right;}
Javascript
$(document).ready(function() {
$(".box").hover(function ()
{
$(this).animate({height: 200});
}, function ()
{
$(this).animate({height: 40});
}
);
});

Answer 1

This is causing it, the border-left and right. http://jsfiddle.net/SdDeH/4/
table tbody td {
vertical-align: top;
border-collapse: collapse;
border-left: 1px solid #CCC;
border-right: 1px solid #CCC;
}
change to
table tbody td {
vertical-align: top;
border-collapse: collapse;
}

Answer 2

I was not able to duplicate your issue. But you could try adding border-collapse:collapse; to the table.
table.HoverTable
{
border: 0px;
border-collapse:collapse;
}