Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3884 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>
  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!
 
++

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)


---------------
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 by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
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
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....

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.088 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)