Problemes de bordure en Css avec Firefox

[YoTsumi-b]

Je suis entrain d'essayer de régler un petit design pour un ami.

Le site est assez simple, donc j'essai de le faire le plus possible en Css, bien que je ne m'y connaisse pas énormément.

Autour de 3 tableaux, il y a des bordures soit 'solid' soit 'dashed'.
Sous IE, aucun problème, tous s'affiche correctement. Par contre, sous Firefox, il n'y a aucune bordure.

Voici les points importants de mon code :

Le css :

Code : Tout sélectionner

   1. menu1 // ou .menu1, je sais pas ce qui est mieux
   2. {
   3. background-color:#FFFFFF;
   4. border-right:1x dashed #cccccc;  
   5. border-bottom:1x dashed #cccccc;  
   6. border-left:1x dashed #cccccc;  
   7. border-top:1x dashed #cccccc;
   8. padding: 5px 5px 5px 5px;
   9. }

La page html :

Code : Tout sélectionner

   1. <table width="90%" class="menu1">
   2.   <tr>
   3.      <td>
   4.           Accueil<br />
   5.            <p>&nbsp;&nbsp;- Liens 1<br />
   6.            &nbsp;&nbsp;- Liens 2<br />
   7.             &nbsp;&nbsp;- Liens 3 </p>
   8.       </td>
   9.    </tr>
  10. </table>

Si vous voulez voir la source entière, voici le site : ici
Regardez la différence entre Ie et Firefox

Merci de me donner des renseignements sur ce probleme.[/url]

[cdrik]

Tu utilises une mauvaise unité de mesure pour définir l'épaisseur de tes bordure :

border-right: 1x dashed #cccccc (INCORRECT)

border-right: 1px dashed #cccccc (CORRECT)

Fais la modification sur toutes tes bordures.

nota : une classe css doit être marquée d'un point

.menu1
ou
table.menu1 (si tu l'appliques uniquement sur l'élément table)

[calimo]

Ensuite tu peux simplifier en utilisant la propriété border qui fait les 4 bordures

On a donc

Code : Tout sélectionner

.menu {
background:#FFFFFF; 
border:1x dashed #cccccc;  
padding: 5px;
}

Padding aussi tu peux simplifier.

menu sélectionne l'élément menu (qui n'existe pas). Tu peux mettre p ou body par exemple.
Pour sélectionner une classe il faut un point ainsi <div class="menu"> se sélectionne avec .menu
Pour les id c'est un # ainsi <div id="menu"> se sélectionne par #menu
Pour les autres attributs c'est [attribut="valeur"] ainsi si tu mets a[hreflang="en"] tu sélectionnes tous les liens pointant vers des sites en anglais

Plus de détails dans les spécifications : http://www.yoyodesign.org/doc/w3c/css2/selector.html