Lets say that we have the following in a css file that we are importing to our html file.
table { background-color: #c6c4c4; border-width: 0px; padding: 0px;}
th { background-color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; horizontal-align: left; vertical-align: top }
td { border-bottom: solid black 2px; border-top: solid black 2px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; horizontal-align: left; vertical-align: top }
table.top { background-color: #ffffff; border-width: 0; padding: 7px;}
th.top { background-color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; horizontal-align: center; vertical-align: top }
td.top { font-family: Verdana, Arial, Helvetica, sans-serif; horizontal-align: left; vertical-align: top }
Here is the HTML we are working on.
<table border="0" bgcolor="#FFFFFF" cellspacing="0" cellborder="0">
<tr bgcolor="#FFFFFF">
<td style="border: 0px" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic1.gif" border="0"></td>
<td style="border: 0px" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic2.gif" border="0"></td>
<td style="border: 0px" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic3.gif" border="0"></td>
</tr>
</table>
As you may be able to tell, the cells where the images are placed have a top and bottom border. We want to get rid of this border and have tried the following:
1. changed <td style="border: 0px" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic1.gif" border="0"></td>
to <td class="top" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic1.gif" border="0"></td>
2. changed <td style="border: 0px" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic1.gif" border="0"></td>
to <td border="0" bgcolor="#FFFFFF"><img src="<?echo $images;?>top_pic1.gif" border="0"></td>
None of these worked. When I changed the td.top definition to include 'border: 0px' and used number 1 from above, it worked, the border was no more.
The question is, why did I have to specify a border when by default there are no borders (in td's) and is the css style definition for a <td> border completely different than the html definition for a <td> border?
Start Free Trial
