Page web ok sous Mozilla mais pas sous IE

[bysty]

Bonjour,

j'ai inséré un menu déroulant en CSS et javascript dans ma page web, tout à très bien fonctionné jusqu’à ce que je le présente à mon chef sur son pc avec IE ... aucun menu déroulant à l'écran ... les boules

Je reviens a mon bureau dépité, je réouvre ma page... j'ai bien mon menu, je test sous IE ..pas de menu ...

d’où cela peut il venir ?

voici la page en question :

http://www.saint-paul-angouleme.fr/historiques3.php

voici le script :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
var DDSPEED = 10;
var DDTIMER = 15;
 
// main function to handle the mouse events //
function ddMenu(id,d){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearInterval(c.timer);
  if(d == 1){
    clearTimeout(h.timer);
    if(c.maxh && c.maxh <= c.offsetHeight){return}
    else if(!c.maxh){
      c.style.display = 'block';
      c.style.height = 'auto';
      c.maxh = c.offsetHeight;
      c.style.height = '0px';
    }
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }else{
    h.timer = setTimeout(function(){ddCollapse(c)},50);
  }
}
 
// collapse the menu //
function ddCollapse(c){
  c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
}
 
// cancel the collapse if a user rolls over the dropdown //
function cancelHide(id){
  var h = document.getElementById(id + '-ddheader');
  var c = document.getElementById(id + '-ddcontent');
  clearTimeout(h.timer);
  clearInterval(c.timer);
  if(c.offsetHeight < c.maxh){
    c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
  }
}
 
// incrementally expand/contract the dropdown and change the opacity //
function ddSlide(c,d){
  var currh = c.offsetHeight;
  var dist;
  if(d == 1){
    dist = (Math.round((c.maxh - currh) / DDSPEED));
  }else{
    dist = (Math.round(currh / DDSPEED));
  }
  if(dist <= 1 && d == 1){
    dist = 1;
  }
  c.style.height = currh + (dist * d) + 'px';
  c.style.opacity = currh / c.maxh;
  c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
  if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
    clearInterval(c.timer);
  }
}

et le CSS :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body {
	margin-top:10px;
	margin-left:15px;
	text-align:center;
	background-image:url(FondMenuDeroulant.gif);
	background-repeat: no-repeat;
	}
 
* {padding:0; margin:0}
 
.dropdown {
	float:left;
	padding-right:0px;
	color: #FFFFCC;
}
 
 
.dropdown dt {font:11px Verdana, Arial, Helvetica;; width:107px; border:1px solid #535353; padding:0px; font-weight:bold; cursor:pointer; background-color:#FFFFCC}
.dropdown dt:hover {background-color:#ffff70}
.dropdown dd {font:09px Verdana, Arial, Helvetica; position:absolute; overflow:hidden; width:109px; display:none; background:#fff; z-index:200; opacity:0; }
.dropdown dd:hover {background-color:#ffff70}
.dropdown ul {width:109px; border:1px solid #535353; list-style:none; border-top:none; border-right:1px}
.dropdown li {display:inline}
.dropdown li a, .dropdown li a:active, .dropdown li a:visited {display:block; padding:2px; color:#111 ;text-decoration:none; background:#eaf0f2; width:106px; border-right:1px}
.dropdown li a:hover {background:#d9e1e4; color:#000}
.dropdown a, .dropdown a:active, .dropdown a:visited {padding:5px; color:#330000;text-decoration:none; width:105px}
.dropdown .underline {border-bottom:1px solid #b9d6dc}

si quelqu'un a une idée ...

Merci

[NoSmoking]

Envoyé par bysty

si quelqu'un a une idée ...

- mets le code de ton menu dans la page et non pas dans une balise OBJECT
- supprimes les fins de balises orpheline
- revois la conception beaucoup de table imbriquées

[NoSmoking]

sinon as tu essayé avec cette syntaxe

Code html :

1
2
3
<object class="menu" data = "dropdown2.html" type= "text/html">
  Cela reste pas top !
</object>

avec comme CSS par exemple

Code css :

1
2
3
4
.menu {
  width : 800px;
  height : 150px;
}

mais c'est une page PHP je reste persuadé que l'intégration en direct est plus propre.

[bysty]

Merci de ta réponse, je vais regarder tout ça, pour l'intégration directe, j'y ai effectivement pensé, mais après divers essai je n'ai pas réussi a mettre mon menu au bon endroit.

Je te tiens au courant

Merci encore

[bysty]

youpi

merci a toi NoSmoking, apres tes modifs et quelques bidouilles d'ajustement j'ai maintenant mon menu sous IE

bon il est dans une fenetre sous IE8 mais c'est pas super grave
sous IE9 impec mais là j'ai plus mon image de fond bah pas super grave non plus...

tout est toujours impec sous mozilla

Donc rien de bien méchant.

Ha oui aussi je me suis aperçu que si j'agrandi ou rapetisse la page le menu reste a la même taille, la encore c'est pas super grave

mais si tu sais pourquoi a tout ça je suis preneur

Mais en tout cas MMMMEEEERRRCCCCIIII !!!!

[bysty]

RAAAHHH je hais internet explorer !

je viens de m'apercevoir qu'avec cette méthode il ouvre mes liens dans l'encart du menu au lieu de pointer vers la page complète...

C'est pas possible ce navigateur !



Comme toujours ça marche impec sous mozilla...

Donc je vais encore continuer mon investigation mais si quelqu'un sait pourquoi je suis toujours preneur

Merci d'avance

(edit : sous IE9 c'est bon, problème sous IE8(XP))