Aide - Recherche - Membres - Calendrier
Version complète : Bug Firefox
Forum Développeur - Administration serveur, programmation et base de données > Programmation > xHTML et CSS
Oliver
Mar 15 2005, 09:14 AM
Salut !
J'ai fait un menu en CSS qui est OK sous IE, mais qui bug sous Firefox (voir image). En fait, au survol des liens, Fire décale la zone vert clair vers la droite (le décalage vient certainement de mon padding-left à 12px ds le "#sommaire a"). Je tourne ça ds tous les sens, je sèche... D'avance merci pour vos lumières !
la CSS :
CODE
#sommaire

{

z-index: 10;

position: absolute;

left: 0px;

top: 155px;

visibility: visible;

width: 150px;

}



#sommaire a

{

padding: 4px 0px 4px 12px;

font-size: 10pt;

font-weight: bold;

color: #99CD00;

text-decoration: none;

}



#sommaire a:hover

{

color: #FFFFFF;

}



#sommaire ul

{

margin: 0px;

padding: 0px;

width: 150px;

list-style-type: none;

background-color: #339933;

}



#sommaire li

{

border-style: solid;

border-color: #FFFF00;

border-width: 0px 0px 1px 0px;

}



#sommaire li a

{

display: block;

width: 150px;

text-decoration: none;

}



#sommaire li a:hover

{

background-color: #99CD00;


l'aperçu :
Guizbizet
Mar 15 2005, 10:52 AM
pourrais tu nous mettre ton code html ou un lien vers une page ou se trouve ton problème

merci
Oliver
Mar 15 2005, 01:03 PM
Oui, c'est vrai, j'aurais dû le mettre ! Voici la partie concernant le menu (c'est tout simple !) :
CODE
<div id="sommaire"><img src="images/haut_sommaire.gif" width="150" height="11" /><br />

 <ul>

   <br />

   <li><a href="#" onmouseover="showDiv('ssmenu1')" onmouseout="close_all_sm();">lien 1</a></li>

   <li><a href="#" onmouseover="showDiv('ssmenu2')" onmouseout="close_all_sm();">lien 2</a></li>

   <li><a href="#">lien 3</a></li>

   <li><a href="#">lien 4</a></li>

   <li><a href="#">lien 5</a></li>

   <li><a href="#">lien 6</a></li>

<li><a href="#">lien 7</a></li>

 </ul>

</div>
krek
Mar 16 2005, 07:50 AM
hello,

Et si dans ton menu : (j'ai pris juste le 3 en exemple mais il faut faire itoo sur tout)
CODE
<li><a href="#">lien 3</a></li>

tu rajoutes :
CODE
<li><a href ="#" class="pousse">lien 3<a/></li>

tu retires ton padding que tu compense par la classe pousse ...
Normalement ca doit marcher comme ça.

bien à toi.
Oliver
Mar 16 2005, 10:22 AM
Salut Krek !
Si je comprends bien, je vires le
CODE
padding: 4px 0px 4px 12px;
du
CODE
#sommaire a
et je crée une classe où je mets ce padding ?
Pcq, comme ça, le pb reste entier sous Fire... :cry:
krek
Mar 16 2005, 11:12 AM
T'es obligé de garder celui que tu as fait ?
pask sinon j'ai retrouvé ça que je trouve pas trop mal et il me semble que c'est ce que tu veux faire :

CODE
<style type="text/css">

<!--



#menu{

  width: 160px;

}

#menu li {

margin:0;}



#menu ul {

background-color:#333;

list-style: none;

margin: 0px;

padding: 0px;

}



#menu li a {

color:#eef;

font-size:80%;

text-decoration: none;

display:block;

height:24px;

padding-left:10px;

background-color:orange;

line-height:24px;

}



#menu a:hover {

color:#000066;

background-color:#F2F2F2;

font-weight: bold;

text-align:left;  }

-->



</style>





</head>



<body><div id="menu">

  <ul>

  <li><a href="#">001</a></li>

  <li><a href="#">002</a></li>

  <li><a href="#">003</a></li>

  <li><a href="#">004</a></li>

  <li><a href="#">005</a></li>

  <li><a href="#">006</a></li>

  <li><a href="#">007</a></li>

  </ul>

</div>
krek
Mar 16 2005, 11:14 AM
j'ai oublié les 2 dernières :

CODE
</body>

</html>


mais tu aurais certainement compris :wink:
Oliver
Mar 16 2005, 12:46 PM
Je vais voir ça de plus près !
Oliver
Mar 16 2005, 01:06 PM
Bon, j'ai remodifié ça pour l'ajuster au niveau des coul, police, etc. et... ça marche impec sous Fire ! biggrin.gif
Il faut, par contre, ajouter un "width:160px" ds "#menu ul", sinon la première ligne du menu ne prend pas en compte le display et le rollover ne fontionne que si l'on survole le txt.
Merci !
krek
Mar 16 2005, 02:22 PM
CODE
Il faut, par contre, ajouter un "width:160px" ds "#menu ul", sinon la première ligne du menu ne prend pas en compte le display et le rollover ne fontionne que si l'on survole le txt.


C'est bizarre pas chez moi ni sous IE ni sous moz ...
Enfin ... L'essentiel est que ca roule pour toi.
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2009 Invision Power Services, Inc.