Table Borders in IE - How to get rid of?

[Sarin]

Hey everyone. I just about finished my website and noticed in IE that the side table borders show black instead of white. I assume the form of CSS I used for my tables is not supported in IE? Is there anything I can do to rid of these ugly lines in IE without affecting the way it looks in Firefox?

Here's the website:

www.CanadianRegius.webs.com (soon www.canadianregius.com)

I know the way I code things is pretty harsh but this is how I do it...

Here's my table code:

<table cellspacing="1" cellpadding="2" class="main"><tr><td bgcolor="#ffffff" valign="top">

<td class="main" valign="top">
<br>
&nbsp;&nbsp;&nbsp;<font size="3"><b>Welcome to <font color="#EF9A15">Canadian Regius...</font></b></font>
<br>
<br>

<br><table><tr><td width="5%" style="vertical-align:top;"></td>
<td class="main" width="70%" style="vertical-align:top;">

Welcome to Canadian Regius. We are a small time Breeder/Hobbyist specializing in Ball Pythons <i>(Python Regius)</i>. We believe in Quality over Quantity and therefore strive to offer only the best! By selecting only the best animals available, we are slowly building a collection that we believe represents these species to their fullest potential. We hope you find the perfect animal(s) for you!
<br><br>
Feel free to have a look around. If you have any questions, comments or suggestions, don't hesitate to contact us. Check back often as we are always updating and evolving as the seasons progress..
<br><br>
Welcome to the addiction...
<br><br>
Nicole Lyons,
<br><a href="index.htm">www.CanadianRegius.com</a>

</td>
<td width="5%" style="vertical-align:top;">
<img src="/images/frontimage.png" title="2010 Female Cinnamon Ball Python">
<div align="right"><a href="http://www.youtube.com/user/canadianregius" target="window"><img src="/images/youtube.png" border="0"></a></div>
</td></tr></table>
<br>
<center><img src="/images/break.png"></center>
<br>
<table><tr><td width="5%" style="vertical-align:top;"></td>
<td class="main" width="70%" style="vertical-align:top;">

<font size="3"><b>Recent <font color="#EF9A15">News...</font></b></font>
<br><br><br>


<i>None</i>



<br>
<br>
<br>
</td></tr></table></table>
<img src="/images/footer.png">
<table width="750"><tr><td width="45%">
<font size="1"><a href="index.htm">Home</a> - <a href="collection.html">Collection</a> - <a href="available.html">Available</a> - <a href="terms.html">Terms</a> - <a href="contact.html">Contact</a></font>
</td><td width="55%" align="right">
<font size="1">Layout and Images Copywrite © <a href="index.htm">Canadian Regius</a> 2010-2011</font>
</td></tr></table>
</center>



</BODY>
</HTML>

And this is my CSS for the table:

table.main
{ text-align: left;
font-family: Verdana;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 754px;
background-color: #000000;
border: 1px #000000 solid;
border-collapse: collapse;
border-style:solid;
border-top:none;
border-bottom:none;
margin-left: 0px;}


.main
{background-color: #FFFFFF;
text-align: left;
font-family: Verdana;
font-weight: none;
font-size: 12px;
color: #000000;}

This is how it looks in IE:


And this is how it's supposed to look: (Firefox)



Thanks!

[jscheuer1]

It's the cellspacing on the table:

<table cellspacing="1" cellpadding="2" class="main"><tr><td bgcolor="#ffffff" valign="top">

<td class="main" valign="top">
<br>
&nbsp;&nbsp;&nbsp;<font size="3"><b>Welcome to <fon . . .

That in combination with (from mystyle.css):

table.main
{ text-align: left;
font-family: Verdana;
font-weight: normal;
font-size: 12px;
color: #000000;
width: 754px;
background-color: #000000;
border: 1px #000000 solid;
border-collapse: collapse;
border-style:solid;
border-top:none;
border-bottom:none;
margin-left: 0px;}

Allows that #000000 to show through. Either change that to a #ffffff, or change the cellspacing to 0. I vote for changing the background-color, as that's what the 'good' browsers are doing.

In fact, other browsers, including IE 8 and above are correctly overriding that #000000 with (from later in the same mystyle.css file):

.main
{background-color: #FFFFFF;
text-align: left;
font-family: Verdana;
font-weight: none;
font-size: 12px;
color: #000000;}