On dirait que dans FF, c'est la première ligne du tableau après le th qui le recouvre.
Vous pouvez résoudre le problème en faisant en sorte que la première ligne de la table ne comporte pas de couleur d'arrière-plan et que vous puissiez ajouter une marge en haut de la page. Jetez un coup d'oeil maintenant.
La hauteur devrait vraiment être 70px puisque c'est la hauteur de l'image de fond. Le rembourrage n'a pas d'effet sur FF. Dans FF, les onglets ont l'air bien, alors dans les autres versions, vous devez juste vous assurer que l'arrière-plan est blanc.
Changez votre CSS dans la page à ce rembourrage-bas et padding-top ne fonctionne tout simplement pas dans FF en raison de tous les autres styles.
#slim {
width: 580px;
margin: 0 auto;
}
/* tables */
table.interactiveData {
font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
background-color: ;
margin:10px 0pt 15px;
font-size: 10px;
width: 100%;
text-align: left;
border: 1px solid #dbdbdd;
}
table.interactiveData thead tr {
cursor: pointer;
background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
table.interactiveData tbody td {
padding: 7px;
vertical-align: middle;
}
table.interactiveData td.even {
}
table.interactiveData tr.odd {
background-color: #f3f3f3;
}
table.interactiveData td.sortedeven {
background-color:#edf8fa;
}
table.interactiveData td.sortedodd {
background-color:#edf1f2;
}
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
Plus précisément, le #fff que la couleur d'arrière-plan pour remplacer le rouge.
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
Ensuite, réglez-le à une hauteur de 70px et ne définissez qu'une marge gauche et droite. Si vous voulez capitonner haut et bas, vous devrez les envelopper dans une travée ou aller un autre chemin.
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
Fonctionne dans FF, Chrome, IE et Safari maintenant.
balisage complet
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tables $ (document) .ready ( function() { $ ("# interactiveData") tablesorter ({widgets:. [Zèbre ',' columnHighlight ']}); }
);
</script>
<link rel="stylesheet" href="styles.css" />
<style>
#slim {
width: 580px;
margin: 0 auto;
}
/* tables */
table.interactiveData {
font-family: "Lucida Grande", "Tahoma", "Franklin Gothic Medium", "Arial", Sans-serif;
background-color: ;
margin:10px 0pt 15px;
font-size: 10px;
width: 100%;
text-align: left;
border: 1px solid #dbdbdd;
}
table.interactiveData thead tr {
cursor: pointer;
background: url(http://mikepuerto.com/iNews/images/thead-bg.jpg);
}
table.interactiveData thead tr .headerSortDown, table.interactiveData thead tr .headerSortUp {
background: #fff url(http://mikepuerto.com/iNews/images/thead-hover-bg.jpg) center center no-repeat;
}
table.interactiveData tbody td {
padding: 7px;
vertical-align: middle;
}
table.interactiveData td.even {
}
table.interactiveData tr.odd {
background-color: #f3f3f3;
}
table.interactiveData td.sortedeven {
background-color:#edf8fa;
}
table.interactiveData td.sortedodd {
background-color:#edf1f2;
}
table.interactiveData thead tr th {
color: #fff;
font-size: 10px;
font-weight: bold;
height: 70px;
padding-left: 5px;
padding-right: 5px;
}
</style>
</head>
<body>
<div id="slim">
<table id="interactiveData" class="interactiveData" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Rank</th>
<th>Broker-Dealer</th>
<th>Website</th>
<th>Discretionary Assets</th>
<th>Discretionary Assets 2007</th>
<th>Difference in Discretionary Assets 2007-2009</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>data2b
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>1</td>
<td>data4d</td>
<td>data5e</td>
<td>data5e</td>
</tr>
<tr>
<td>2</td>
<td>
data1f
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data2g</td>
<td>data3h</td>
<td>data4i</td>
<td>data4i</td>
</tr>
<tr>
<td>3</td>
<td>data2l
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3m</td>
<td>data4n</td>
<td>data5o</td>
<td>data5o</td>
</tr>
<tr>
<td>4</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
<tr>
<td>5</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
<tr>
<td>6</td>
<td>data2q
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</td>
<td>data3r</td>
<td>data4s</td>
<td>data5t</td>
<td>data5t</td>
</tr>
</tbody>
</table>
</div>
</body>
L'ombre échoue également dans le dernier opéra, FYI –