Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
818 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°949257
le_duc
PlaTyPuS
Posté le 08-01-2005 à 17:28:37  profilanswer
 

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>
  29.             <dl>
  30.                 <dt class="menuMedium" onmouseover="montre('smenu5');"><a href="#">Qualité</a></dt>
  31.                 <dd id="smenu5" class="menuMedium2">
  32.                     <ul>
  33.                         <li><a href="#">Certification ISO</a></li>
  34.                         <li><a href="#">Fabrication</a></li>
  35.                     </ul>
  36.                 </dd>
  37.             </dl>
  38.   <dl>
  39.                 <dt onmouseover="montre('smenu6');"><a href="#">Contact</a></dt>
  40.             </dl>
  41.   <dl>
  42.                 <dt onmouseover="montre('smenu7');"><a href="#">Liens</a></dt>
  43.             </dl>
  44.  </div>


 

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


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

mood
Publicité
Posté le 08-01-2005 à 17:28:37  profilanswer
 

n°949362
le_duc
PlaTyPuS
Posté le 08-01-2005 à 22:51:56  profilanswer
 

up

n°949363
masklinn
í dag viðrar vel til loftárása
Posté le 08-01-2005 à 22:54:59  profilanswer
 

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
n°949424
le_duc
PlaTyPuS
Posté le 09-01-2005 à 16:39:17  profilanswer
 

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:

n°949542
le_duc
PlaTyPuS
Posté le 09-01-2005 à 19:37:54  profilanswer
 

up, marche toujours pas... :S

n°949559
Le Castor
Neurasténique...
Posté le 09-01-2005 à 20:28:54  profilanswer
 

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
n°949578
FlorentG
Unité de Masse
Posté le 09-01-2005 à 21:12:03  profilanswer
 

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

n°949583
gm_superst​ar
Appelez-moi Super
Posté le 09-01-2005 à 21:31:45  profilanswer
 

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
n°950235
le_duc
PlaTyPuS
Posté le 10-01-2005 à 18:25:50  profilanswer
 

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
n°950330
plainsofpa​in
Pingouino's lover
Posté le 10-01-2005 à 20:28:47  profilanswer
 

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
mood
Publicité
Posté le 10-01-2005 à 20:28:47  profilanswer
 

n°950418
le_duc
PlaTyPuS
Posté le 10-01-2005 à 21:59:25  profilanswer
 

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)

n°950438
plainsofpa​in
Pingouino's lover
Posté le 10-01-2005 à 22:30:02  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
[CSS] Menu horizontal 1 ligne style www.macromedia.com ???CSS vs layout tableau
Problèmes dlopen/dlclose[HTML] Problème de tableaux avec mon site sous Firefox
problèmes pour passer de c++ à gtkforcer css
Problèmes d'affichage FireFox <> IEProblème d'affichage des enregistrements dans un DataReport VB6
Plus de sujets relatifs à : [CSS] FireFox <> IE problèmes d'affichage....


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR