asked on

css border style property for <td> versus the border property of <td>

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?

ASKER CERTIFIED SOLUTION

Tacobell777

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

emblue

Yes, the CSS and HTML specifications for the <TD> attributes are different. Generally, in IE at least, the CSS will take precedence over the HTML.

So for example, consider the following code:

<STYLE>
td {border: 1px;}
</STYLE>

<TD border=0>some text</TD>

That TD tag should have a border on it, as specified by the CSS code. To remove it, you can specify the style of the td tag like this:

<STYLE>
td {border: 1px;}
</STYLE>

<TD border=0 style="border: 0px">some text</TD>

That example would not have a border because the style attribute will override the general style sheet for the page.

For your situation, if you did not have that style sheet on top, by default your TD tag would have no border in HTML.

Emblue

css border style property for &lt;td&gt; versus the border property of &lt;td&gt;

css border style property for <td> versus the border property of <td>