Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2004-04-29
2
Medium Priority
?
85,423 Views
Last Modified: 2011-08-18
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?  
0
Comment
Question by:bisonfur37
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 17

Accepted Solution

by:
Tacobell777 earned 375 total points
ID: 10956102
You'd be better of using contexual styles, example:

<style>
#myTest td
{
  border: 1px solid red;
}
</style>

<div id="myTest">
<table>
               <tr>
                    <td><img src="<?echo $images;?>top_pic1.gif" border="0"></td>
                    <td><img src="<?echo $images;?>top_pic2.gif" border="0"></td>
                    <td><img src="<?echo $images;?>top_pic3.gif" border="0"></td>
               </tr>
          </table>
</div>

border: 1px 0 1px 0;
which represents
border: top right bottom left;

so if you do not want a border at the top its
border: 0 1px 1px 1px;
0
 
LVL 4

Expert Comment

by:emblue
ID: 10978638
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
0

Featured Post

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Ready to get certified? Check out some courses that help you prepare for third-party exams.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

604 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question