fadeIn et display none ne prennent pas sur IE par sasquatch - page 1

Bonjour,

J'ai une div "#wrapper" à laquelle j'applique un "display:none" et que j'affiche en fondu d'ouverture via un "$('#wrapper').fadeIn();"
Sur cette div se trouve une map (carte d'une ville avec possibilité de cliquer sur les régions de la ville grâce à un script jQuery).
Tant que le "display:none" est appliqué sur le wrapper, cette map s'affiche bien sur tous les navigateurs SAUF Internet Explorer (6,7,8,9)...
Si je retire le "display:none" du wrapper, ça fonctionne partout mais je perds le fondu.
Je ne sais plus quoi faire pour que ça fonctionne sous IE.
Je ne pense pas que ce soit le script jQuery qui pose problème car j'en ai essayé plusieurs et j'obtiens quand même le bug sur IE (sur tous les autres navigateurs c'est toujours ok).

Pour mieux isoler le problème, j'ai créé un "testcase" minimaliste, en une seule page html, que vous pourrez trouver à l'adresse suivante:
http://www.lexgotham.com/testcase

Si vous pouviez m'aider, ce serait gentil.
Cela fait des jours que je suis dessus et je n'arrive pas à trouver de solutions.

Je pense qu'il faut aller voir sur le site pour mieux saisir la situation mais pour ceux qui veulent voir le code directement, le voici:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr" dir="ltr">
<head>
	<meta http-equiv= "content-type" 	content="text/html;charset=iso-8859-1">
	<meta http-equiv= "Content-Language" 	content="fr,nl,en" >
	<meta http-equiv= "Content-Style-Type"  content="text/css" >
	<meta http-equiv= "Content-Script-Type" content="text/javascript" >
	<title>xxx</title>
		
	<style>
		body 
		{     
		   background-color:#000; 
    		   overflow-y:scroll;
    		   overflow-x:hidden;
		}
		#wrapper
		{  
		    width:505px;
		    position:absolute;
		    z-index:10;
		    display:none; 
		}
		.map
		{  
		    z-index:1000000000;
		    display:block; 
		}
		.item2
		{  
		   margin:-10px 0px 20px 0px;
		   width:505px;
		   height:679px;
		   background:url(plaque.png) no-repeat top center ;
		}
		.entete  
		{  
		   width:377px;
		   height:24px;
		   margin:0px 0px 30px 64px;
		   padding:34px 0px 0px 0px;
		}
		.livraison
		{  
		   margin:-6px 0px 0px 66px;
		   width:373px;
		   height:509px;
		   border:1px solid #777;
		}
	</style>
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript">window.onload = function(){setTimeout("mytest()",400);};function mytest(){ $('#wrapper').fadeIn(1500);};</script>

	<script type="text/javascript">
		(
			function($)
			{
				$.extend
				({
					metadata:{
						defaults:{type:'class',name:'metadata',cre:/({.*})/,single:'metadata'},
						setType:function(type,name){this.defaults.type=type;this.defaults.name=name;},
						get:function(elem,opts){
							var settings=$.extend	({},this.defaults,opts);
							if(!settings.single.length)settings.single='metadata';
							var data=$.data(elem,settings.single);
							if(data)return data;
							data="{}";
							if(settings.type=="class"){var m=settings.cre.exec(elem.className);if(m)data=m[1];}
							else if(settings.type=="elem"){
								if(!elem.getElementsByTagName)return;
								var e=elem.getElementsByTagName(settings.name);
								if(e.length)data=$.trim(e[0].innerHTML);
							}
							else if(elem.getAttribute!=undefined){
								var attr=elem.getAttribute(settings.name);
								if(attr)data=attr;
							}
							if(data.indexOf('{')<0)data="{"+data+"}";
							data=eval("("+data+")");
							$.data(elem,settings.single,data);
							return data;
						}
					}
				});
				$.fn.metadata=function(opts){return $.metadata.get(this[0],opts);};
			}
		)(jQuery);
	</script>
		
	<script type="text/javascript" src="jquery.maphilight.min.js"></script>
	<script type="text/javascript" src="jquery.metadata.min.js"></script>
		
	<script type="text/javascript">
		$(function(){$('.map').maphilight();$('#squidheadlink').mouseover(function(e){$('#squidhead').mouseover();}).mouseout(function(e){$('#squidhead').mouseout();}).click(function(e){e.preventDefault();});});
	</script>
</head>
		
<body>
	<div id="contacter"></div>
	<div  id="wrapper">
		<div class="item2">
			<div class="entete"></div>
			<div class="livraison" >
				<img usemap="#simple" src="bruxelles.png" width="373" height="509" class="map">
				<map name="simple" >
					<area href="index.php?page=livraison&commune=jette" 
							shape="poly"
							coords="88,146,99,141,129,133,137,129,145,133,137,142,141,147,155,147,155,168,151,168,159,177,148,189,145,185,136,185,132,159,96,159,93,151,86,146" 
							alt="Link" 
						        title="Jette" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=bruxelles" 
							shape="poly" coords="130,132,150,112,169,112,189,116,212,124,221,99,239,90,251,95,258,102,275,112,275,121,284,130,275,138,292,161,279,164,274,177,263,170,253,170,253,156,238,151,200,172,200,185,190,185,186,189,182,202,182,212,200,220,200,227,221,220,235,237,232,246,217,246,214,254,206,251,200,245,195,250,186,250,182,258,212,297,222,297,227,320,235,327,239,336,214,328,201,311,200,297,195,280,176,259,164,265,155,246,154,228,166,197,161,187,164,185,151,169,155,169,155,147,142,147,137,141,145,133,136,129" 
							alt="Link" 
							title="Bruxelles" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=schaerbeek" 
							shape="poly"
							coords="182,202,185,192,190,186,200,186,201,172,222,161,232,187,241,199,260,216,256,225,234,236,234,235,218,217 " 
							alt="Link" 
							title="Schaerbeek" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=ganshoren" 
							shape="poly"
							coords="136,184,118,184,84,177,96,160,132,160" 
							alt="Link" 
							title="Ganshoren" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=saintjosse" 
							shape="poly"
							coords="201,227,200,219,183,212,183,203,214,216,221,219" 
							alt="Link" 
						        title="St Josse-ten-Noode" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=evere" 
							shape="poly"
							coords="222,161,238,152,251,156,253,170,262,170,272,177,270,178,266,185,270,199,261,216,242,200,232,187" 
							alt="Link" 
							title="Evere" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=berchem" 
							shape="poly"
							coords="79,176,118,185,110,193,111,206,96,212,80,210,73,203,72,182" 
							alt="Link" 
							title="Berchem-Ste-Agathe" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=koekelberg" 
							shape="poly"
							coords="111,193,118,185,146,185,158,202,148,202,144,198,125,198" 
							alt="Link" 
							title="Koekelberg" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=molenbeek" 
							shape="poly"
           coords="110,194,125,199,143,199,148,202,159,202,149,188,159,178,163,185,161,187,167,197,154,227,145,240,121,223,101,223,97,230,92,227,91,236,74,231,75,227,79,224,78,213,82,212,97,212,110,207" 
							alt="Link" 
							title="Molenbeek-St-Jean" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=etterbeek" 
							shape="poly"
							coords="217,247,231,247,236,236,240,233,252,253,251,269,249,272,230,280,214,269,215,256,213,255" 
							alt="Link" 
							title="Etterbeek" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>	
					<area href="index.php?page=livraison&commune=woluwesaintlambert" 
							shape="poly"
							coords="240,233,256,226,270,200,280,200,305,213,323,216,323,224,314,224,317,234,311,234,305,237,309,246,293,249,291,253,288,246,252,253" 
							alt="Link" 
							title="Woluwe-St-Lambert" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=anderlecht" 
							shape="poly"
							      coords="35,257,76,249,76,233,93,237,93,230,97,232,102,223,120,224,146,242,154,228,154,246,146,253,146,262,143,266,128,274,128,280,115,288,123,294,120,301,103,301,91,311,69,315,66,305,44,305,44,293,27,293,21,280,31,271" 
							alt="Link" 
							title="Anderlecht" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=forest" 
							shape="poly"
					          coords="142,267,161,280,172,281,169,289,164,297,152,297,145,301,149,310,143,315,136,314,132,323,118,332,109,327,105,319,111,302,119,303,125,293,116,288,128,281,129,275" 
							alt="Link" 
							title="Forest" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>				
					<area href="index.php?page=livraison&commune=saintgilles" 
							shape="poly"
							coords="142,267,146,262,146,252,155,246,164,266,176,259,179,277,169,282,161,279" 
							alt="Link" 
							title="St Gilles" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=ixelles" 
							shape="poly"
							coords="177,261,195,279,200,298,164,298,170,288,172,281,179,277" 
							alt="Link" 
							title="Ixelles" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=uccles" 
							shape="poly"
							      coords="152,297,200,299,200,310,213,328,240,337,243,346,234,354,261,389,217,411,217,393,193,385,150,384,135,369,123,336,118,331,133,322,136,315,143,315,150,309,145,301" 
							alt="Link" 
							title="Uccles" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=ixelles" 
							shape="poly"
							coords="243,310,236,327,227,319,222,297,212,297,182,258,186,250,195,250,199,246,214,257,214,269,228,280,238,277,244,293,239,294,244,302,235,305" 
							alt="Link" 
							title="Ixelles" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>	
					<area href="index.php?page=livraison&commune=watermaelboitsfort" 
							shape="poly"
							      coords="324,351,330,355,302,370,282,387,283,376,261,389,235,354,244,345,236,326,244,310,236,306,244,302,246,299,248,302,261,302,267,308,279,311,279,324,300,337,306,333,313,350" 
							alt="Link" 
							title="Watermael-Boitsfort" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>	
					<area href="index.php?page=livraison&commune=auderghem" 
							      shape="poly" coords="248,272,256,285,269,285,279,273,291,285,301,282,314,294,306,306,323,306,310,315,349,343,331,355,324,350,313,350,306,333,300,336,281,324,280,310,266,307,262,302,249,302,245,298,244,301,240,294,244,294,239,277" 
							alt="Link" 
							title="Auderghem" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>
					<area href="index.php?page=livraison&commune=woluwesaintpierre" 
							shape="poly"
							coords="					   253,254,287,246,292,254,292,250,309,246,306,237,312,234,318,234,314,225,321,224,331,233,331,249,327,255,341,282,315,294,301,281,291,284,279,273,270,285,256,284,248,272,252,268" 
							alt="Link" 
							title="Woluwe-St-Pierre" 
							class="{stroke:false,fillColor:'982732',fillOpacity:0.8,alwaysOn:false}"
					>			
				</map>
			</div>
		</div>	
	</div>
</body>
</html>

Merci!

fadeIn et display none ne prennent pas sur IE

fadeIn et display none ne prennent pas sur IE

Supprimer

Modérer

Signaler le message aux modérateurs