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;
}

Answers


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.


Need Your Help

Where to bind the ViewModel to the View?

c# windows-phone-7 mvvm viewmodel

I work on a project(6 pages) target on Windows Phone 7.5 and above. I don't do the pure MVVM model, since handle the navigation event and querystrings is such a pain, and I decide to learn it one b...

CakePHP “Fatal error: Class 'Debugger' not found” in a File That Doesn't Reference Debugger

php cakephp-2.0 public

I'm getting the error referenced in the title from a file that doesn't reference the Debugger class. If I manually import Debugger, the error still shows up. The line number referenced in the error...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.