28172 sujets

CSS et mise en forme, CSS3

[Résolu] Text-decoration non appliqué sur les éléments fils.

Bonjour,

J'ai un petit problème d'incompatibilité avec IE et FFox.
J'utilise une classe CSS pour mettre en forme des éléments dans une table, et l'attribut text-decoration me pose problème.

Voici le code CSS :

div.div1 {
  color: #FF0000;
  font-size: 10pt;
  text-decoration: underline;
  font-style: normal;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  zoom: 1;
}


Et voici le code HTML :

<div id="Container37" style="min-height: 20px; width: 70px;" class="div1">
  <table width="100" height="20" cellspacing="0" cellpadding="0" border="0">
    <tr>
      <td align="left" valign="top">
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td align="left" valign="top" width="48" height="20">
              <span id="Txt3">Bla, bla, bla</span>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>


Je sais que la mise en page avec des <table> pique les yeux, mais c'est du HTML généré par une application dédié, et je ne peux pas la changer (pour le moment)...

Au final, ces deux morceaux de code fonctionnent correctement avec Internet Explorer et mon texte, dans le <span>, est correctement souligné. Mais ce n'est pas le cas dans FFox, le souligné n'apparait pas.
Et au contraire, le texte est bien mis en gras et en rouge, pour les deux navigateurs.

Je n'arrive pas à voir où est mon erreur...
Merci de votre aide. Smiley smile

Question subsidiaire :
* Est-ce qu'utiliser style="" et class="" sur une même balise peut entrainer des problèmes ? Où est-ce possible ?
Modifié par Mardull (07 Sep 2009 - 17:45)
Bonjour et bienvenu sur le Forum, Smiley smile

Il n'y a à priori pas d'erreur dans le code proposé. Peut-être suffit-il d'augmenter le poids de l'instruction. Par exemple en spécifiant plus précisément l'élément visé ou en ajoutant un !important derrière la valeur .
text-decoration: underline !important;
Salut,

Ou essai ça :
div.div1 span{ 
  color: #FF0000; 
  font-size: 10pt; 
  text-decoration: underline; 
  font-style: normal; 
  font-weight: bold; 
  font-family: Arial, Helvetica, sans-serif; 
  zoom: 1; 
}
Le Hack CSS !important n'a pas l'air de fonctionner dans ce cas...

Mais en rajoutant span à la déclaration CSS, le souligné est revenu.

Merci pour votre aide ^^
Modifié par Mardull (07 Sep 2009 - 17:19)
Sujet clos
Aller à