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
Configuration: Windows 2000 Firefox 2.0.0.11
A voir également:
- Difference de comportement entre FF et IE
- Différence entre tcp et udp - Guide
- Difference entre million et milliard - Accueil - Technologies
- Différence entre gb et go ✓ - Forum Matériel & Système
- Différence entre go et gb ✓ - Forum Clé USB / Carte mémoire
- Freebox erreur 20-ff - Astuces et Solutions
5 réponses
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