CODEWITHSUNDEEP
htmlcsshtml-table
morleyc
morleyc

Reputation: 2431

CSS table TH elements not bold in Firefox (but OK in IE)

Hi I have a table which I want to show the headers along the left in bold, and headers along the top in bold.

The headers are bold in IE, but not in Firefox. Site is here: demo link

And code is below.

What am i doing wrong and how can i make the elements bold in FF?

Thanks,

Chris

HTML

<h2>Compare plans</h2>

<table class="compare-products">
<colgroup>
    <col class="col1"/>
    <col class="col2" />
    <col class="col3" />
    <col class="col4" />
    <col class="col5" />
</colgroup>

    <tr class="plan-headers">
        <th></th>
        <th>Starter</th>
        <th>Business</th>
        <th>Advanced</th>
        <th>Dedicated</th>
     </tr>
    <tr class="recommended-for">
        <td></td>
        <td>Ideal start for static websites</td>
        <td>Fast hosting for dynamic CMS websites</td>
        <td>Custom configurations and high traffic sites</td>
        <td>Dedicated resources for intensive work loads</td>
    </tr>
    <tr class="feature" title="">
        <th scope="row">Web space</th>
        <td>50MB</td>
        <td>1GB</td>
        <td>15GB</td>
        <td>250GB</td>
    </tr>
    <tr class="feature" title="">
        <th scope="row">Bandwidth</th>
        <td>1GB</td>
        <td>30GB</td>
        <td>1TB</td>
        <td>10TB</td>
    </tr>
    <tr class="feature" title="">
        <th scope="row">Websites</th>
        <td>1</td>
        <td>2</td>
        <td>Unlimited</td>
        <td>Unlimited</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">CPU</th>
      <td>Shared</td>
      <td>Shared</td>
      <td>1.2GHz</td>
      <td>2.4GHz</td>
    </tr>
    <tr id="captchaFeature" class="feature" title="">
      <th scope="row">Memory</th>
      <td>Shared</td>
      <td>Shared</td>
      <td>1GB</td>
      <td>4GB</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">IP Addresses</th>
      <td>Shared</td>
      <td>Shared</td>
      <td>2</td>
      <td>8</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">Zend Framework</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">cPanel/WHM</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">PHP/Python/Ruby</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">RAID Storage</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">DELL Hardware</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">99.9% Uptime</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">24/7 Support</th>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
      <td><div class="yes">Yes</div></td>
    </tr>
    <tr class="feature" title="">
        <th scope="row">IMAP/POP3 Accounts</th>
        <td>5</td>
        <td>25</td>
        <td>Unlimited</td>
        <td>Unlimited</td>
    </tr>
    <tr id="manageFeature2" class="feature" title="">
      <th scope="row">FTP Accounts</th>
      <td>1</td>
      <td>5</td>
      <td>Unlimited</td>
      <td>Unlimited</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">Offsite Backup</th>
      <td>-</td>
      <td>1GB Weekly</td>
      <td>10GB Daily</td>
      <td>100GB Daily</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">MySQL Databases</th>
      <td>-</td>
      <td>2</td>
      <td>Unlimited</td>
      <td>Unlimited</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">Subdomains</th>
      <td>-</td>
      <td>2</td>
      <td>Unlimited</td>
      <td>Unlimited</td>
    </tr>

    <tr id="dedicatedFeature" class="feature" title="">
        <th scope="row">SSL Certificate</th>
        <td>-</td>
        <td>-</td>
        <td>Optional</td>
        <td>Optional</td>
    </tr>
    <tr class="feature" title="">
      <th scope="row">ASP &amp; MSQL</th>
      <td>-</td>
      <td>-</td>
      <td>Optional</td>
      <td>Optional</td>
    </tr>

    <tr class="signup">
        <th scope="row"></th>           
            <td>Sign Up</td>
            <td>Sign Up</td>
            <td>Sign Up</td>
        <td>Sign Up</td>
    </tr>
    <tr class="faq-links">
        <th scope="row">Learn more</th>
        <td>Starter Plan FAQ</td>
        <td>Business FAQ</td>
        <td>Advanced FAQ</td>
        <td>Dedicated FAQ</td>
    </tr>
</table>

CSS

compare-products .col1
{
width: 20%;
}

.compare-products .col2
{
width: 20%;
}

.compare-products .col3
{
width: 20%;
}

.compare-products .col4
{
width: 20%;
}

.compare-products .col5
{
width: 20%;
}

.compare-products  tr td
{
text-align: center;
}

.compare-products tr th[scope=row]
{
text-align: right;
border-bottom: 1px dotted #dddddd;
font-weight: bold;
}

.compare-products tr td
{
border-bottom: 1px dotted #dddddd;
padding: 5px 10px 5px 10px;
}

.compare-products tr.plan-headers th
{
font-size: 20px;
font-weight: bold;
border: none;
padding: 5px 5px 5px 5px;
text-align: center;
}

.compare-products tr.feature th
{
font-weight: bold;
}

.compare-products tr.recommended-for td
{
border: none;
padding: 5px 10px 10px 5px;
text-align: center;
}

.compare-products tr td div.yes, .compare-products tr td div.no, .compare-products tr td div.partial {
height: 16px;
text-indent: -9999px;
}

.compare-products div.yes {
background: url(images/yes.png) no-repeat center center;
}

.compare-products div.no {
background: url(images/no.png) no-repeat center center;
}

.compare-products div.partial {
background: url(images/partial.png) no-repeat center center;
}

Upvotes: 1

Views: 1378

Answers (1)

Barry
Barry

Reputation: 432

I don't have enough reputation to be able to comment yet, so I'll put them here.

I'm using FF 10, and the row headers on the left (Web Space, Bandwidth, etc) are displaying as bold. The font isn't as large as the as on the column headers, but it is definitely bold.

Upvotes: 1

Related Questions