Thead messing up DataTables in Firefox. Works perfectly in IE, Chrome and Safari

This is really driving me crazy... I've been searching for more than 3 hours and I just can't find what's causing this.

The thead (containing images) does not show correctly AND prevent the table rows from being generated.

The page looks perfect in Chrome, IE and Safari : http://i.imgur.com/kVPkf.png

This is how the page looks like in Firefox: http://i.imgur.com/DXzFW.png

The code for creating the thead:

<thead class="rankingheader">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th><img src='punten.png'></th>
<th><img src='kaartings.png'></th>
<th><img src='winningstreak.png'></th>
<th><img src='losingstreak.png'></th>
<th><img src='deelnamegraad.png'></th>
<th><img src='participatiegraad.png'></th>
<th><img src='spektakelwaarde.png'></th>
<th><img src='sigaarwaardigheid.png'></th>
<th><img src='vrouwenaandeel.png'></th>
<th><img src='favorietepartner.png'></th>
<th><img src='deelkespartner.png'></th>
<th><img src='puntenpartner.png'></th>
<th><img src='slaagkanspartner.png'></th>
</tr>
</thead>

The css for the rankingheader class:

table.dataTable thead.rankingheader {
vertical-align: bottom;
text-align: center;
background-color: #aaa;
padding-left: 5px;
padding-bottom: 5px;
}

I have been trying all types of things in my css, but nothing helps.

The only way I get the table to be generated right in Firefox, is when I completely delete the thead-code I posted above. So, that's the proof that is must have something to do with that code.

Thanks for helping me out.