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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu JS ne fonctionne pas sous IE7 si présence de Doctype

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu JS ne fonctionne pas sous IE7 si présence de Doctype

n°1564970
san_
Posté le 25-05-2007 à 08:42:35  profilanswer
 

Bonjour,
 
Le site web que je dois faire dans le cadre de mes études est pratiquement terminé, mais en testant la compatibilité avec les navigateurs j'ai découvert un problème embêtant. Le menu déroulant JS du site est "décalé" sous IE7 si j'inclus un DOCTYPE dans ma page.
(un aperçu du site est disponible ici, constatez vous même :/ : http://bro29.free.fr).
 
Par contre, si j'enlève le doctype (XHTML 1.0 transitional), tout fonctionne comme sous FF et IE6.
Savez vous d'où ca pourrait venir ?
 
Code JS :

Code :
  1. var menu_timer, menu_current;
  2. var no_timer = false;
  4. function ms(s)
  5. {
  6. clearTimeout(menu_timer);
  7. if (menu_current!=null && menu_current != s) _mh(menu_current);
  8. document.getElementById(s).style.visibility = "visible";
  9. menu_current = s;
  10. }
  12. function _mh(s)
  13. {
  14. var e = document.getElementById(s);
  15. e.style.visibility = "hidden"
  16. e.no_timer = false;
  17. menu_current = null;
  18. }
  20. function mh(s)
  21. {
  22. if (!document.getElementById(s).no_timer) menu_timer = setTimeout("_mh('"+s+"')",1000);
  23. }
  26. function drawMenu(ml)
  27. {
  28. for (i=0; i<labels.length; i++)
  29.  {
  30.   var l = labels[i];
  31.   if (l!=ml)
  32.    {
  33.     var s = 'onMouseOver="ms(\''+l+'\')" onMouseOut="mh(\''+l+'\')"';
  34.     if (window.editMode) s = '';
  35.     document.write('<td width="150"><img src="'+imgPrefix+l+'.gif" '+s+'/><br/><div class="submenu" id="'+l+'">');
  36.     for (j=0; j<menus[i].length; j++)
  37.      {
  38.       document.write('<div><a '+s+' href="'+htmlPrefix+l+'/'+menus[i][j][1]+'.html">'+menus[i][j][0]+'</a></div>');
  39.      }
  40.     document.write('</div></td>');
  41.    }
  42.   else document.write('<td width="150"><img src="'+imgPrefix+l+'.gif"/></td>');
  43.  }
  44. }


 
Code CSS :

Code :
  1. td.menuhome {width: 100%;
  2.    height: 31px;
  3.    vertical-align: top;
  4.    padding: 0px;}
  6. td.menu {width: 100%;
  7.   height: 30px;
  8.   vertical-align: top;
  9.   padding: 0px;}
  11. .submenu {position: absolute;
  12.    visibility: hidden;
  13.    padding: 0px;
  14.    margin: 0px;
  15.    width: 150px;}
  17. .submenu div {font-size: 11px;
  18.     font-weight: bold;
  19.     padding: 4px 0px 4px 10px;
  20.     border-top: 1px solid white;}
  21.    
  22. #accueil div {background-color: #658fbe;}
  24. #adminis div {background-color: #9287af;}
  26. #pedago div {background-color: #65ab5a;}
  28. #vielycee div {background-color: #d088af;}
  30. #contacts div {background-color: #9dc2d7;}


 
Merci d'avance pour votre aide :sweat:

mood
Publicité
Posté le 25-05-2007 à 08:42:35  profilanswer
 

n°1564986
anapajari
s/travail/glanding on hfr/gs;
Posté le 25-05-2007 à 09:28:24  profilanswer
 
n°1570814
san_
Posté le 06-06-2007 à 11:48:53  profilanswer
 

Oui je connais ça mais je ne m'explique pas pourquoi IE7 est le seul qui n'affiche pas correctement mon menu :/
J'ai testé : Safari, IE6, FF, Opéra.. tout marche.

n°1571190
Pitsy
Posté le 06-06-2007 à 18:20:06  profilanswer
 

ça ressemble fort à un problème de positionnement absolu non défini mais interprêté par le navigateur. IE tenant compte du centrage pour interprété la position supposée de l'élément en l'absence d'un left:... ou right:...
 
En général il suffit de rajouter un left:0; pour règler le problème mais vu ton menu obsolète à base de montage en tableau sans position relative précisée je crains que cela pose problème genre tous tes sous-menus collés à droites.
 
Pour moi 2 options:
 
- ajouter un style="position:relative;" sur le td qui contient le menu (m'étonnerais que ça marche il me semble déjà avoir observé le cas foireux)
 
- ajouter un style="text-align:left;" sur le même td pour essayer de récupérer sur IE7 (mais ton montage restera du bricolage):
 

Code :
  1. .menuhome td {text-align:left;}

n°1571215
san_
Posté le 06-06-2007 à 19:41:24  profilanswer
 

:o chapeau bas, le menu marche maintenant, merci beaucoup :jap:
Pourquoi penses tu que ce menu est obsolète ? (je précise qu'il n'est pas de moi, je ne maîtrise pas trop le js encore..)

Message cité 1 fois
Message édité par san_ le 06-06-2007 à 19:42:03
n°1571268
Pitsy
Posté le 06-06-2007 à 23:23:34  profilanswer
 

san_ a écrit :

Pourquoi penses tu que ce menu est obsolète ? (je précise qu'il n'est pas de moi, je ne maîtrise pas trop le js encore..)


Je ne maîtrise pas le javascript des masses non plus ;)
 
C'est 2 choses qui m'ont fait dire ça, plus dans la conception générale du menu que dans la programmation elle-même:
 
- l'utilisation d'une mise en page à l'aide de tableau ou de div superflus
- la construction complète du menu en javascript qui va à l'encontre des règles d'accessibilité et d'un référencement efficace


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

  Menu JS ne fonctionne pas sous IE7 si présence de Doctype

 

Sujets relatifs
debutant HTML prob IE7Menu + classe + xml
[Résolu] CSS : je voudrais une width (100%-largeur menu)menu php
Problème avec DOCTYPE html PUBLIC[EXCEL] Menu déroulant et variable ?
Bug Menu IE 6 (marche sous FF et IE7)Grosse Macro ne fonctionne plus
Plus de sujets relatifs à : Menu JS ne fonctionne pas sous IE7 si présence de Doctype

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

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