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

Menu JS ne fonctionne pas sous IE7 si présence de Doctype - HTML/CSS - Programmation

Marsh Posté le 25-05-2007 à 08:42:35    

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:

Reply

Marsh Posté le 25-05-2007 à 08:42:35   

Reply

Marsh Posté le 25-05-2007 à 09:28:24    

Reply

Marsh Posté le 06-06-2007 à 11:48:53    

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.

Reply

Marsh Posté le 06-06-2007 à 18:20:06    

ç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;}

Reply

Marsh Posté le 06-06-2007 à 19:41:24    

: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
Reply

Marsh Posté le 06-06-2007 à 23:23:34    

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

Reply

Sujets relatifs:

Leave a Replay

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