Difference de comportement entre FF et IE
eFiX
-
gby -
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
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
A voir également:
- Difference de comportement entre FF et IE
- Différence entre tcp et udp - Guide
- Difference entre million et milliard - Accueil - Technologies
- Difference entre mo et mb ✓ - Forum Matériel & Système
- Erreur 20 ff free - Astuces et Solutions
- Erreur 20-2D free box - Forum Freebox
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.
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.
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/
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/
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/
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/
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
Mais pquoi si tes pages sont ds le même dossier faire des liens "file://…"
alors que "lenomdetonfichier"suffit ?
Ululo
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
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
Bonne chance