Version complète: sur le forum Webmaster Hub : CSS bug sur Firefox (pas sous IE)
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Ajna
vendredi 15 juillet 2005 à 15:16
Salut, j'ai mis un menu sur mon site à gauche de la page celui ci sous IE s'affiche correctement sous firefox on dirait qu'il interprette autrement mon code CSS. J'ai pu me trompé je débute le CSS..
le menu de gauche est constité de boutons dynamiques sous firefox ils s'entre chevauchent et ils ne prennent pas la longeur que dit le css, je ne vois pas pourquoi, pouvez vous m'aider.

extrait du CSS
CODE
.menu_bouton{
text-align:center;padding:5px;}

a.menu_bouton:link{
width:147px;
height:30px;
text-decoration:none;
color:#FF2000;
text-align:center;
font-weight:bold;
background-color:#FFAF66;
padding:5px;
border-style:outset;
border-width:none;
border-color:orange;
}

a.menu_bouton:visited{
width:147px;
height:30px;
text-decoration:none;
color:#FF6500;
text-align:center;
font-weight:bold;
background-color:#FFDF93;
padding:5px;
border-style:outset;
border-width:none;
border-color:orange;
}

a.menu_bouton:hover{
width:147px;
height:30px;
text-decoration:none;
color:#FF1500;
text-align:center;
font-weight:bold;
background-color:#FF6E3E;
background-image:none;
padding:5px;
border-style:inset;
border-width:none;
border-color:orange;
}


Extrait du html
CODE
<table width="1px" border="0" align="left" cellpadding="0" cellspacing="0">
<tr><td width="400">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td><table  width="780" border="0" align="left"
     cellpadding="0" cellspacing="0">
 <tr>
   <td height="150"><img src="http://membres.lycos.fr/reikisource/images/header.jpg"
 width="780" height="150"
alt="reiki soins domicile Rhône (Lyon,Villefranche,Losanne,...)">
</td>
 </tr>
 <tr>
   <td align="center" class="menu_haut" height="34"
    background="images/menuhaut.jpg">
   <script LANGUAGE="JavaScript" type="text/javascript"
    SRC="ejs_menu_dyn.js"></SCRIPT></td>
 </tr>
 <tr>
   <td height="84" background="images/haut.jpg"></td>
 </tr>
 <tr>
   <td><table width="780" border="0" cellspacing="0" cellpadding="0">
       <tr>
         <td width="180" valign="top" background="images/fond.jpg">
  <p><img src="images/image.jpg" width="180" height="88">
           <table width="180" height="200" border="0" align="center"
       cellpadding="0" cellspacing="0" >
             <tr>
               <td height="10px" ><table class="menu_gauche" width="10px"
      border="0" align="center" cellpadding="0" cellspacing="0">
                   <tr>
                     <td width="18">&nbsp;</td>
                     <td width="112"><strong><a href="reiki.php"
      class="menu_bouton">LE RE&Iuml;KI</a></strong></td>
                     <td width="14">&nbsp;</td>
                   </tr>
                   <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="soins.php"
       class="menu_bouton">SOINS</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
                   <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="consultations.php"
        class="menu_bouton">CONSULTATIONS</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
      <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="ethique.php"
    class="menu_bouton">&Eacute;THIQUE</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
                   <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="energetique.php"      
           class="menu_bouton">&Eacute;NERG&Eacute;TIQUE</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
                   <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="meditation.php"
             class="menu_bouton">M&Eacute;DITATION</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
     <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="mailto:soins_AT_reiki-soins.com"      
             class="menu_bouton">CONTACT</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
                   <tr>
                     <td>&nbsp;</td>
                     <td><strong><a href="liens.php" class="menu_bouton">
               LIENS</a></strong></td>
                     <td>&nbsp;</td>
                   </tr>
                 </table></td>
             </tr>
           </table></td>
petit-ourson
vendredi 15 juillet 2005 à 15:49
Je penses qu'il faudrait voir a supprimer certains tableaux imbriqués, perso je trouve le code imbuvable.

A la place d'utiliser un tableau autours de ton menu, tu pourrais utiliser une liste <ul><li>...</li><li>...</li></ul>
MS-DOS_1991
vendredi 15 juillet 2005 à 16:25
Un code (css ou html) ne doit pas etre fait pour IE :nono:
Dudu
vendredi 15 juillet 2005 à 16:31
CITATION(MS-DOS_1991 @ vendredi 15 juillet 2005, 17h25)
Un code (css ou html) ne doit pas etre fait pour IE :nono:
*
Il ne doit pas non plus être fait pour Firefox non plus, ni pour Opera, ni pour Safari, ni pour qui que ce soit ! huh.gif

J'ai un peu l'impression que c'est ce que tu sous-entends unsure.gif
Ajna
vendredi 15 juillet 2005 à 18:17
oui petit-ourson, je simplifiera l'utilisation des tableaux.
J'ai fais d'autres tests, effectivement il s’agit des standards css qui ne sont pas reconnu de la même façon suivant les navigateurs, dans ce cas comment l'on fait normalement? utiliser des fonction pour différencier les navigateurs des visiteurs puis en fonction de cela utiliser des feuilles de styles différentes? wacko.gif
Raphael
vendredi 15 juillet 2005 à 20:54
CITATION(Ajna @ vendredi 15 juillet 2005, 16h16)
Salut, j'ai mis un menu sur mon site à gauche de la page celui ci sous IE s'affiche correctement sous firefox on dirait qu'il interprette autrement mon code CSS.

Salut wink.gif

Malheureusement, ce n'est pas la bonne démarche :-/

IE est actuellement le navigateur le plus buggué et le plus permissif en ce qui concerne les standards et les CSS. Il ne faut donc pas s'y fier.

Il faut avant tout faire un document conforme aux standards pour être sûr de fonctionner sur les navigateurs les plus scrupuleux (Firefox, Opera), et IE suivra aussi.

Voici une méthodologie :
http://blog.alsacreations.com/2004/11/27/9...les-navigateurs
v4np13
vendredi 15 juillet 2005 à 23:12
Je ne vois pas trop l'interet des tableaux dans ce suite. Les blocs <div> feraient aussi bien l'affaire avec du code plus lisible mais bon chacun ses choix wink.gif
Ajna
samedi 16 juillet 2005 à 11:27
merci pour le lien Sibelius, v4np13 l'interet des tableaux.., c'est que j'avais commencé comme ça dès le debut unsure.gif ...
MarvinLeRouge
samedi 16 juillet 2005 à 14:12
CITATION(v4np13 @ samedi 16 juillet 2005, 00h12)
Je ne vois pas trop l'interet des tableaux dans ce suite. Les blocs <div> feraient aussi bien l'affaire avec du code plus lisible mais bon chacun ses choix  wink.gif
*


Salut,

Mieux vaut commencer avec la bonne méthode, que de devoir s'adapter (peut-être difficilement) par la suite parce qu'on est parti sur une mauvaise voie.
Je te conseille d'abandonner tout de suite la mise en page par tableaux, tu te rendras un fier service. Tu verras, tu te remercieras plus tard. wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.