28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un petit soucis qui me tracasse et qui va me faire passer un sale week end si je ne le résoud pas avant 17h Smiley biggol Smiley biggrin

J'ai un tableau rien de plus classique :

<table class="subcultures" summary="Production observée sur 5 subcultures en fonction du taux de perte">
  <caption>Ce tableau décline la production observée sur 5 subcultures en fonction du taux de perte.</caption>
  <thead>
    <tr>
      <th>Subcultures</th>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Production réalisée (taux de perte = 20%)</th>
      <td>100</td>
      <td>240<span>(60)</span></td>
      <td>576<span>(324)</span></td>
      <td>1382<span>(1318)</span></td>
      <td>3318<span>(4782)</span></td>
      <td>7963<span>(16337)</span></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <th>Taux de multiplication*</th>
      <td>-</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
    <tr>
      <th>Production réalisée (Taux de perte = 0%)</th>
      <td>100</td>
      <td>300</td>
      <td>900</td>
      <td>2700</td>
      <td>8100</td>
      <td>24300</td>
    </tr>
    <tr>
      <th>Production réalisée (taux de perte = 10%)</th>
      <td>100</td>
      <td>270<span>(30)</span></td>
      <td>729<span>(171)</span></td>
      <td>1968<span>(732)</span></td>
      <td>5314<span>(2786)</span></td>
      <td>14349<span>(9951)</span></td>
    </tr>
  </tbody>
</table>


et voici le Css correspondant :

table { width:99%; margin:1em auto; }
table * { border:hidden; border:none; }
table caption { margin:1em 0; }
table tr { height:3em; }
table td { text-align:center; }
table thead { background:url(img/table_header.jpg) no-repeat; }


Et voici les rendus :

Sous firefox (niquel) :
http://img151.imageshack.us/img151/7403/tabffxc6.png

Sous IE7 et IE6 (exactement le même rendu foireux)
http://img151.imageshack.us/img151/3991/tabieeb3.png

Donc la question à 2€ du jour : Pourquoi IE me sort un rendu aussi crade pour un dégradé ?

D'avance merci,

zmove
on dirait que tes tr 0 à 5 sous
<th>Subcultures</th>

ont un fond.

Essayes de déclarer des couleurs de fonds transparents à tes éléments, quitte à les IDentifier ou les CLASSer.
Tout d'abord merci pour la réponse Smiley biggrin

J'ai essayé d'ajouter cette règle dans mon css pour enlever le fond potentiel des td de mon thead


table thead tr td { background:none; }


Sous firefox, aucun changement, l'affichage est toujours correct

Sous IE, les TD apres mon TH "subcultures" n'affichent plus aucun fond (fond blanc si vous préférez), donc pas top.

J'ai également essayé :

table thead tr { background:none; }


En pensant que c'était peut-être au tr de mon thead qui'IE mettait un fond

résultat :
sous ff, toujours niquel
sous IE, je n'ai plus du tout mon image de fond.

Je suis donc toujours dans l'impasse.