Difference de comportement entre FF et IE

Fermé
eFiX - 5 déc. 2007 à 09:23
 gby - 8 mars 2009 à 15:43
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

5 réponses

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
As-tu essayé avec des adresses absolues (http://path/to/image.jpg) plutôt que relatives (../to/image.jpg) ?

Bonne chance
0
Bon je me doutais bien que mon sujet n'interesserait pas grand monde.
Tant pis.
1
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
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
Ululo Messages postés 28 Date d'inscription mercredi 5 mars 2008 Statut Membre Dernière intervention 31 décembre 2008 7
7 mars 2008 à 15:17
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

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
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