Why am I getting borders?

[Chimpie]

Why am I getting a border on this table on this test page:
http://chimpie.com/xenforo/pages/testpage/

I believe I have the correct setting on 0.

<div class="messageText ugc baseHtml">
 
<table align="center" border="0" cellspacing="7">
    <tr><td colspan="2">
        <div style="text-align:center"><strong>Click on an image to view a bigger version of it.</strong></div>
    </td></tr>
    <tr><td>
    <div style="text-align:center;padding 5px">
        <a href="http://skywarnforum.org/index.php?pageid=day1outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day1otlk_sm.gif" alt="Today's Convective Outlook" title="Today's Convective Outlook" border="1" /></a><br />
        Today's Convective Outlook
    </div>
    </td><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day2outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day2otlk_sm.gif" alt="Tomorrow's Convective Outlook" title="Tomorrow's Convective Outlook" border="1" /></a><br />
        Tomorrow's Convective Outlook
    </div>
    </td></tr>
    <tr><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day3outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day3otlk_sm.gif" alt="Day 3 Convective Outlook" title="Day 3 Convective Outlook" border="1" /></a><br />
        Day 3 Convective Outlook
    </div>
    </td><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day48outlookpage"><img src="http://www.spc.noaa.gov/products/exper/day4-8/day48prob_small.png" alt="Day 4-8 Convective Outlook" title="Day 4-8 Convective Outlook" border="1" /></a><br />
        Day 4-8 Convective Outlook
    </div>
    </td></tr>
</table>
 
</div>

 

[Paul B]

The borders are being applied by the basehtml class.

.baseHtml th, .baseHtml td
    { border:1px solid #000; padding:.5em; }

Create new CSS classes for your table and set the border to none.

 

[Chimpie]

Thanks (again) Brogan.

 

[Chimpie]

Alright... I've been playing with the page a little, trying this and that, and have been getting successful more and more. I've been trying to utilize w3schools as much as possible, but can't figure this one out.

My extra.css has in it:

/* Change colour of the copyright text */
#copyright a {
color: @primaryLight !important;
}
 
/* Change color of Terms and Rules */
#legal a:link, #legal a:visited {
color: @primaryLight !important;
}
 
/* CSS for Wx Maps Table */
.wxtable td
{ padding:5px; border:1px; }

This page is coded..

<div class="wxtable">
 
<table align="center" border="1" cellspacing="7">
    <tr><td colspan="2">
        <div style="text-align:center"><strong>Click on an image to view a bigger version of it.</strong></div>
    </td></tr>
    <tr><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day1outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day1otlk_sm.gif" alt="Today's Convective Outlook" title="Today's Convective Outlook" border="1" /></a><br />
        Today's Convective Outlook
    </div>
    </td><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day2outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day2otlk_sm.gif" alt="Tomorrow's Convective Outlook" title="Tomorrow's Convective Outlook" border="1" /></a><br />
        Tomorrow's Convective Outlook
    </div>
    </td></tr>
    <tr><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day3outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day3otlk_sm.gif" alt="Day 3 Convective Outlook" title="Day 3 Convective Outlook" border="1" width="190" height="136" /></a><br />
        Day 3 Convective Outlook
    </div>
    </td><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day48outlookpage"><img src="http://www.spc.noaa.gov/products/exper/day4-8/day48prob_small.png" alt="Day 4-8 Convective Outlook" title="Day 4-8 Convective Outlook" border="1" /></a><br />
        Day 4-8 Convective Outlook
    </div>
    </td></tr>
</table>
 
</div>

I would think each image should have a border since it has the <td> tags wrapped around it but they don't.

Thoughts?

 

[Paul B]

Try <table class="wxtable"...

If that doesn't work you can always apply the class directly to the td element.

 

[Chimpie]

Still not showing...

<div class="wxtable">
 
<table class="wxtable" align="center" border="1" cellspacing="7">
    <tr><td colspan="2">
        <div style="text-align:center"><strong>Click on an image to view a bigger version of it.</strong></div>
    </td></tr>
    <tr><td class="wxtable">
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day1outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day1otlk_sm.gif" alt="Today's Convective Outlook" title="Today's Convective Outlook" border="1" /></a><br />
        Today's Convective Outlook
    </div>
    </td><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day2outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day2otlk_sm.gif" alt="Tomorrow's Convective Outlook" title="Tomorrow's Convective Outlook" border="1" /></a><br />
        Tomorrow's Convective Outlook
    </div>
    </td></tr>
    <tr><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day3outlookpage"><img src="http://www.spc.noaa.gov/products/outlook/day3otlk_sm.gif" alt="Day 3 Convective Outlook" title="Day 3 Convective Outlook" border="1" width="190" height="136" /></a><br />
        Day 3 Convective Outlook
    </div>
    </td><td>
    <div style="text-align:center">
        <a href="http://skywarnforum.org/index.php?pageid=day48outlookpage"><img src="http://www.spc.noaa.gov/products/exper/day4-8/day48prob_small.png" alt="Day 4-8 Convective Outlook" title="Day 4-8 Convective Outlook" border="1" /></a><br />
        Day 4-8 Convective Outlook
    </div>
    </td></tr>
</table>
 
</div>

 

[Chimpie]

I think I figured it out. I wasn't defining what the properties of the border (style and width) were. With the updated CSS is seems to have fixed it.

More coming...

 

[Chimpie]

(Forgive me if this is basic to the majority of the group. I had to take basically two years off from messing with websites/forums and I'm trying to teach myself as much as possible. I only ask questions when I get stuck.)

So this is what I've learned. I'm posting this to check if I'm right and to help others who might be learning CSS as well.

/* CSS for Wx Maps Table */
td.wxtable
{
padding: 5px;
border-style:solid;
border-width:1px;
}

As I understand it, the above code will apply when I code a <td> element with the following: class="wxtable" , but...

/* CSS for Wx Maps Table */
.wxtable td
{
padding: 5px;
border-style:solid;
border-width:1px;
}

... this code applies to all the <td> elements on the page when the page, or section of the page that begins with:
<div class="wxtable">

Thoughts?