[CSS] FireFox <> IE problèmes d'affichage....

FireFox <> IE problèmes d'affichage.... [CSS] - HTML/CSS - Programmation

Marsh Posté le 08-01-2005 à 17:28:37    

Yop!
 
Voilà j'ai un menu déroulant horizontal et les menus se superposent dans FireFox, alors qu'IE gère ca comme un grand!
 
-> en fait, normallement il y a une taille fixe pour la largeur des champs, mais vu que j'ai un menu "Produits & Services" qui nécessite + de place, j'ai agrandi ce champ ainsi que 2 autres, et une fois agrandi, ca se superpose...
 
Le site : http://www.duotone.ch/~bastien/applimed/  
 

Code :
  1. <div id="menu">
  2.             <dl>
  3.                 <dt onmouseover="montre('smenu1');"><a href="#">Accueil</a></dt>
  4.             </dl>
  5.             <dl>
  6.                 <dt class="menuMedium" onmouseover="montre('smenu2');"><a href="#">Entreprise</a></dt>
  7.                 <dd id="smenu2" class="menuMedium2">
  8.                     <ul>
  9.                         <li><a href="#">Historique</a></li>
  10.                         <li><a href="#">Présentation</a></li>
  11.                     </ul>
  12.                 </dd>
  13.             </dl>
  14.            
  15.             <dl>
  16.                 <dt class="menuBig" onmouseover="montre('smenu3');"><a href="#">Produits &amp; Services </a></dt>
  17.                 <dd id="smenu3" class="menuBig2">
  18.                     <ul>
  19.                         <li><a href="#">Applicateurs</a></li>
  20.                         <li><a href="#">Gants</a></li>
  21.                         <li><a href="#">Compresses</a></li>
  22.                         <li><a href="#">Boules</a></li>
  23.                         <li><a href="#">Sets</a></li>
  24.      <li><a href="#">Accessoires</a></li>
  25.      <li class="menuSpec"><a href="#">Services</a></li>
  26.                     </ul>
  27.                 </dd>
  28.             </dl>
  30.             <dl>
  31.                 <dt class="menuMedium" onmouseover="montre('smenu5');"><a href="#">Qualité</a></dt>
  32.                 <dd id="smenu5" class="menuMedium2">
  33.                     <ul>
  34.                         <li><a href="#">Certification ISO</a></li>
  35.                         <li><a href="#">Fabrication</a></li>
  36.                     </ul>
  37.                 </dd>
  38.             </dl>
  39.   <dl>
  40.                 <dt onmouseover="montre('smenu6');"><a href="#">Contact</a></dt>
  41.             </dl>
  42.   <dl>
  43.                 <dt onmouseover="montre('smenu7');"><a href="#">Liens</a></dt>
  44.             </dl>
  45.  </div>


 

Code :
  1. dl, dt, dd, ul, li {
  2. margin: 0;
  3. padding: 0;
  4. list-style-type: none;
  5. }
  7. #menu {
  8. position: absolute;
  9. margin-top: 96px;
  10. margin-left: 127px;
  11. z-index:100;
  12. width: 100%;
  13. }
  15. #menu dl {
  16. float: left;
  17. width: 80px;
  18. }
  20. .menuMedium {
  21. width: 120px;
  22. }
  23. .menuMedium2 {
  24. width: 119px;
  25. }
  27. .menuBig {
  28. width: 160px;
  29. }
  30. .menuBig2 {
  31. width: 159px;
  32. }
  34. #menu dt {
  35. cursor: pointer;
  36. text-align: center;
  37. font-weight: bold;
  38. border-right: 1px solid white;
  39. }
  41. #menu dd {
  42. border: 1px solid gray;
  43. }
  45. #menu li {
  46. text-align: left;
  47. padding-left: 5px;
  48. background: #fff;
  49. }
  51. #menu li a, #menu dt a {
  52. color: #000;
  53. text-decoration: none;
  54. display: block;
  55. height: 100%;
  56. border: 0 none;
  57. }
  59. #menu li a:hover, #menu dt a:hover {
  60. background: #eee;
  61. }
  63. .menuSpec {
  64. border-top: 1px solid gray;
  65. font-weight: bold;
  66. }


 
Si vous pouvez m'aider, merci bcp!
 
++

Reply

Marsh Posté le 08-01-2005 à 17:28:37   

Reply

Marsh Posté le 08-01-2005 à 22:51:56    

up

Reply

Marsh Posté le 08-01-2005 à 22:54:59    

ca marche pas sans préciser de taille?
(en le laissant gérer ca tout seul comme un grand quoi)


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box, and replicate and expand beyond their wildest dreams by throwing away the limits imposed by overbearing genetic r
Reply

Marsh Posté le 09-01-2005 à 16:39:17    

Masklinn a écrit :

ca marche pas sans préciser de taille?
(en le laissant gérer ca tout seul comme un grand quoi)


 
euh....oui, ca marche à peu près, mais c'est très moche  :( .
 
Non, mais y'a surement moyen de le forcer à mettre les éléments les 1 après les autres et pas les superposer!
 
En théorie la propriété float: left; devrait arranger les choses, mais ce n'est pas le cas  :pt1cable:

Reply

Marsh Posté le 09-01-2005 à 19:37:54    

up, marche toujours pas... :S

Reply

Marsh Posté le 09-01-2005 à 20:28:54    

Y'aurait pas un stress avec :

Code :
  1. menu dl {
  2.   float: left;
  3.   width: 80px;
  4. }


 
Si tu donne seulement 80px de largeur à tes <dl>, et que le texte dedans fait plus, ça cause problème, donc essaye de virer le width pour voir...


---------------
W3C : Leading the Web to Its Full Potential... - Membre du W3C l33t club
Reply

Marsh Posté le 09-01-2005 à 21:12:03    

Quel con, j'ai posté avec mon vieux pseudo :cry:

Reply

Marsh Posté le 09-01-2005 à 21:31:45    

Et en donnant une taille minimum (min-width) ? Pour IE ça ne changera rien vu qu'il ne reconnait pas cette propriété.


---------------
Incongru : une FAQ abandonnée sur les Standards du Web - FAQ périmée de blabla@Prog
Reply

Marsh Posté le 10-01-2005 à 18:25:50    

re!
 
vous m'avez mis sur la voix, merci ;)
 
Voilà la soluce pour ceux que ca intéresse:
 
http://www.duotone.ch/~bastien/applimed/
 
La CSS : http://www.duotone.ch/~bastien/applimed/css/menu.css
 
 
Sinon, que pensez-vous du code? Il est valide xhtml 1.0 strict, mais je trouve que c'est un peu le bordel avec tous ces <dl> <dt> <dt>...


Message édité par le_duc le 10-01-2005 à 18:28:34
Reply

Marsh Posté le 10-01-2005 à 20:28:47    

Franchement ? Je trouve ca cool
 
Et puis, dis toi qu'avec des tables ton code prendrait 3 fois plus de lignes (et je suis gentil la je crois).
 
En plus le jour ou tu voudras modifier la mise en page, y aura juste la css a modifier ^^
 
La mise en page CSS ca rox ^^


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 10-01-2005 à 20:28:47   

Reply

Marsh Posté le 10-01-2005 à 21:59:25    

ok, merci ;)
 
 
au fait, personne aurait une idée pour améliorer le menu ?? 2 trucs me dérangent :
 
- le scintillement du menu quand on passe sur les ITEMs
- le bug sous IE (le menu disparait suivant ou on est positionné avec la souris)

Reply

Marsh Posté le 10-01-2005 à 22:30:02    

ben change l'évènement qui appelle la fonction affichant les sous menu
 
=> au lieu de faire au survol, tu fais au click ^^


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed