Thread: CSS and Tables

    #1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2002
    Location
    Bako, CA
    Posts
    42
    Rep Power
    13

    CSS and Tables


    I have this CSS code that works perfect, BUT if I want to put it within a table Cell, it screws it all up. Maybe someone can give me some input!! Here is the code:

    CSS CODE
    __________

    div.tabBox {}

    div.tabArea {
    font-size: 80%;
    font-weight: bold;
    }
    a.tab {
    background-color: white;
    border: 1px solid #183cad;
    border-bottom-width: 0px;
    padding: 2px 1em 2px 1em;
    text-decoration: none;
    }
    a.tab, a.tab:visited {
    color: #183cad;
    }
    a.tab:hover {
    background-color: white;
    color: #183cad;
    }
    a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
    background-color: white;
    color: #183cad;
    }
    div.tabMain {
    background-color: white;
    border: 1px solid #183cad;
    padding: 1em;
    }


    HTML CODE
    _____________

    <div class="tabArea">
    <a class="tab" href="link.htm">Link</a>
    <a class="tab" href="link.htm">Link</a>
    <a class="tab" href="link.htm">Link</a>
    <a class="tab" href="link.htm">Link</a>
    </div>


    Thanks again for the help!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    The problem is that for some reason, the table cuts off some of the DIV's area, which removes the borders. I'm not sure of how to do a 'real' fix, but this simple little work around turns out ok.

    <TABLE><TR><TD height=100>
    <DIV class="tabArea">
    &amp;nbsp;<BR>
    <A class="tab" href="link.htm">Link</a>
    <A class="tab" href="link.htm">Link</a>
    <A class="tab" href="link.htm">Link</a>
    <A class="tab" href="link.htm">Link</a>
    </DIV>
    </TD></TR></TABLE>

IMN logo majestic logo threadwatch logo seochat tools logo