1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Why am I getting borders?

Discussion in 'Styling and Customization Questions' started by Chimpie, Feb 12, 2012.

  1. Chimpie

    Chimpie Well-Known Member

    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.

    HTML:
    <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>
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    The borders are being applied by the basehtml class.

    Code:
    .baseHtml th, .baseHtml td
        { border:1px solid #000; padding:.5em; } 
    Create new CSS classes for your table and set the border to none.
     
    Chimpie likes this.
  3. Chimpie

    Chimpie Well-Known Member

    Thanks (again) Brogan.
     
  4. Chimpie

    Chimpie Well-Known Member

    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:
    Code:
    /* 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..
    HTML:
    <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?
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    Try <table class="wxtable"...

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

    Chimpie Well-Known Member

    Still not showing...

    HTML:
    <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>
     
  7. Chimpie

    Chimpie Well-Known Member

    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...
     
  8. Chimpie

    Chimpie Well-Known Member

    (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.

    Code:
    /* 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...

    Code:
    /* 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?
     

Share This Page