Difference de comportement entre FF et IE

eFiX -  
 gby -
Bonjour,

j'ai un petit soucis actuellement avec un développement de site. Je ne suis pas un pro du CSS, mais voilà mon souci :
Après avoir bataillé pendant un moment pour centrer mon menu principal, j'ai voulu rajouter des background sur les liens pour faire des boutons. Et là, surprise, sous FF impossible de les voir, je vérifie comme ça sous IE, et tout fonctionnait.
Il n'est pas encore en ligne, je ne peux donc pas vous montrer en live. Par contre, voilà le CSS et le code employé :

HTML généré :

<table cellpadding="0" cellspacing="0" class="moduletable-top">
<tr>
<td>
<ul id="mainlevel-nav">
<li><a href="http://localhost/site/index.php" class="mainlevel-nav" >Tribune</a></li>
<li><a href="http://localhost/site/index.php?option=com_contact&Itemid=3" class="mainlevel-nav" >Symposium</a></li>
<li><a href="http://localhost/site/index.php?option=com_content&task=section&id=1&Itemid=2" class="mainlevel-nav" >Conscriptions</a></li>
.
.
</ul>
</td>
</tr>
</table>

Et le CSS correspondant à moduletable-top et mainlevel-nav :

table.moduletable-top{
float:right;
margin:0;
padding:0;
width:100%;
}
div.moduletable-top {
padding : 0;
padding-bottom : 10px;
}
table.moduletable-top td {
font-size : 11px;
padding : 0;
margin : 0;
font-weight : normal;
width : 100%;
text-align : center;
}
table.moduletable-top ul {
margin : 0px;
padding : 0px;
text-align : center;
}
table.moduletable-top li {
display: inline;
}
font-size : 11px;
}
#mainlevel-nav ul {
text-align: center;
}

#mainlevel-nav li {
background-image : url(../images/top_nav.gif);
background-repeat : repeat-x;
color : #efefef;
font-family : Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
margin : 0;
padding : 0;
border-right : 1px solid #2c2c2c;
font-size : 20px;
height : 35px;
line-height : 35px;
white-space : nowrap;
display : inline;
}
#mainlevel-nav li a {
background-image : url(../images/top_nav.gif);
background-repeat : repeat-x;
color : #ffffff;
font-family : Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
margin : 0;
padding-left : 30px;
padding-right : 30px;
font-size : 11px;
height : 35px;
line-height : 35px;
white-space : nowrap
}
#mainlevel-nav li a:hover {
background-image : url(../images/top_nav_hover.gif);
background-repeat : repeat-x;
color : #efefef;
font-family : Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
text-decoration : none;
margin : 0;
padding-left : 30px;
padding-right : 30px;
font-size : 11px;
height : 35px;
line-height : 35px;
white-space : nowrap
}
#mainlevel-nav li a#active_menu-nav {
background-image : url(../images/top_nav_active.gif);
background-repeat : repeat-x;
color : #ffffff;
font-family : Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
margin : 0;
padding-left : 30px;
padding-right : 30px;
font-size : 11px;
height : 35px;
line-height : 35px;
white-space : nowrap
}
#mainlevel-nav li a#active_menu-nav:hover {
background-image : url(../images/top_nav_active_hover.gif);
background-repeat : repeat-x;
color : #efefef;
font-family : Geneva, Arial, Helvetica, sans-serif;
font-weight : bold;
text-decoration : none;
margin : 0;
padding-left : 30px;
padding-right : 30px;
font-size : 11px;
height : 35px;
line-height : 35px;
white-space : nowrap
}

J'ai bien conscience que ce n'est pas évident avec des sources incomplètes comme celles là, donc dites moi si vous avez besoin de plus d'informations. Le fait de le voir marcher sur l'un et pas sur l'autre me rend dingue.

Merci d'avance pour vos réponses.
eFiX
Configuration: Windows 2000
Firefox 2.0.0.11

5 réponses

  1. eFiX
     
    Histoire d'être un peu plus clair, 2 screenshots un sous FF et un sous IE

    Rendu Firefox :
    http://img530.imageshack.us/img530/4755/menufffg2.jpg

    Rendu IE :
    http://img372.imageshack.us/img372/6838/menuiexq1.jpg

    L'image de bg utilisée est un gif de 3px de large en repeat-x.
    1
    1. FilPantin
       
      As-tu essayé avec des adresses absolues (http://path/to/image.jpg) plutôt que relatives (../to/image.jpg) ?

      Bonne chance
      0
  2. eFiX
     
    Bon je me doutais bien que mon sujet n'interesserait pas grand monde.
    Tant pis.
    1
  3. shim-sao
     
    Salut,

    Bon plus ou moins difficile de donner une réponse exacte sans pouvoir tester :)
    Sous firefox a mon avis l'image est en fond mais le lien pas a la bonne taille donc
    comme l'image est en fond, ce qui déborde n'est pas visible.
    Pour moi la réponse se trouve dans:

    Ajouter des ' dans
    background-image : url('../images/top_nav_active_hover.gif');
    ça change rien mais c'est plus propre

    Ajouter dans tous les éléments qui n'ont pas de background (ni image, ni couleur)
    background-color: transparent;
    ça change rien mais au moins on est sûr

    Ajouter la position de l'image (par défaut ci-dessous)
    background-position: left top;

    Ensuite il faut remplacer :
    display:inline; par display:block;

    et peut être définir une largeur, la hauteur étant déjà définie
    width:100%;

    Plus sur Joomla!
    https://www.xtrmaddons.com/en/
    http://www.shim-sao.fr/
    1
    1. Aucun
       
      Le problème se situe, comme tu l'as deviné, sur l'interprétation du langage "xhtml" , "html", "css", "javascript", "actionscript", plugin et autre formulation existente du NAVIGATEUR.

      Fait ce test

      Exemple de CSS :

      .albert{
      margin:5px 5px 5px 5px;
      }

      .robert{
      padding:5px 5px 5px 5px;
      }

      Et applique le sur chacun des navigateurs...

      A part faire des compromis entre les navigateurs, je ne vois pas...


      Lien : https://www.zonecss.fr/
      0
  4. Ululo Messages postés 28 Date d'inscription   Statut Membre Dernière intervention   7
     
    Je n'ai pas de réponse à ton pblème.
    Mais pquoi si tes pages sont ds le même dossier faire des liens "file://…"
    alors que "lenomdetonfichier"suffit ?
    Ululo
    0
  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. gby
     
    Je suppose que c'est du joomla ...

    C'est assez bizarre que tu obtienne ce que tu veux en IE et pas en FF, c'est souvent l'inverse.

    J'ai souvent observé qu'il fallait répéter l'info dans tous les item ... mais méfiance des choses peuvent s'ajouter pour certains navigateurs et pas les autres.

    Bonne chance
    0