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