[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)


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
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