Mon script ne fonctionne pas sous internet explorer 10

Mourad2009B Messages postés 145 Statut Membre -  
Mourad2009B Messages postés 145 Statut Membre -
Bonjour à tous,
mon problème est le suivant :
j'ai une page index en php et html 

<?php
	$titre = "Accueil";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<link rel="stylesheet" href="css_projet_solectrom.css" />
		<script type="text/javascript" src="menu.js"></script> <!-- Pour le menu déroulant -->
		
	  	<meta content="text/html; charset=UTF-8" 	http-equiv="content-type">
	  	<meta name="ROBOTS" content="all">
	  
	  	<title><?php echo $titre; ?></title>
	</head>
	<body>
		
		
		<!-- ****************le menu******************************** -->
		<div id="div_menu">
			<ul> 
				<li><a href="#1">Accueil</a></li> 
				<li><a href="#2">Produits</a></li> 
				<li><a href="#3">S.A.V.</a></li> 
				<li><a href="#4">E-depannage</a></li> 
				<li><a href="#5">Contact</a></li> 
				<li><a href="#1">Qui sommes-nous</a></li> 
			</ul>
		
		</div>
   </body>
</html>

et voici ma page css3 


@CHARSET "ISO-8859-1";

body{
	width: 65em;
	min-height: 40em;
	margin: auto;
	padding: 0;
	text-align: center;	

	behavior: url(csshover.htc); /*WinIE behavior call*/

	/*border: 2px solid white;*/
}




/*_________________________menu_________________________________*/
#div_menu
{
	font-family:Helvetica, sans-serif ,"mvboli", arial; 
	font-size: 1em;
	background: #00914f;
	display: block;
	height: 3em;
	width: 100%;
	margin: 0.2em auto 0.2em ;
}

#div_menu ul{ 
	display: table;
	width: 100%; 
	padding: 0;
	border-radius: 3px; 
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 
							0 3px 5px rgba(0, 0, 0, .2), 
							0 5px 10px rgba(0, 0, 0, .2), 
							0 20px 20px rgba(0, 0, 0, .15);
	
	background: -webkit-linear-gradient(deepskyblue, dodgerblue); 
	background: -moz-linear-gradient(deepskyblue, dodgerblue); 
	background: -ms-linear-gradient(deepskyblue, dodgerblue); 
	background: -o-linear-gradient(deepskyblue, dodgerblue); 
	background: -khtml-linear-gradient(deepskyblue, dodgerblue); 
	background: linear-gradient(deepskyblue, dodgerblue);
}
#div_menu ul li{ 
	display: table-cell; 
	width: 16%;

	transition: width .4s;
	border: 2px solid white;
}

#div_menu ul li:hover{ 
	width: 20%;
}
#div_menu ul li:first-child a{ 
	border-radius: 3px 0 0 3px;
}

#div_menu ul li:last-child a{ 
	border-radius: 0 3px 3px 0; 
}

#div_menu ul li a{ 
	display: block; /*Les liens sont donc affichés tel des blocs (afin que la taille de chaque lien corresponde à celle de son parent)*/ 
	text-align: center; 
	padding: 8px 8px 17px 8px;
	color: rgba(0, 0, 0, .7); 
	text-decoration: none; 
	padding: 8px 5px 17px 5px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .4);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
							0 -1px 0 hsl(210, 100%, 32%) inset, 0 -2px 0 hsl(210, 100%, 38%) inset, 
							0 -3px 0 hsl(210, 100%, 44%) inset, 
							0 -4px 0 hsl(210, 100%, 50%) inset, 
							0 -5px 0 hsl(210, 100%, 60%) inset;
		/*					
	-moz-transition: padding .4s; /*les transitions*
	-o-transition: padding .4s; /*les transitions*
	-ms-transition: padding .4s; /*les transitions*
	-khtml-transition: padding .4s; /*les transitions*
	-webkit-transition: padding .4s; /*les transitions*
	transition: padding .4s; /*les transitions*/
}

#div_menu ul li a:hover, ul li a:focus{ 
	background: rgba(255,255,255,.2);

	box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 
							0 -1px 0 hsl(210, 100%, 42%) inset, 
							0 -2px 0 hsl(210, 100%, 48%) inset, 
							0 -3px 0 hsl(210, 100%, 54%) inset, 
							0 -4px 0 hsl(210, 100%, 60%) inset, 
							0 -5px 0 hsl(210, 100%, 70%) inset; 
	/*cette augmentation ne modifie pas la taille du menu car nous utilisons le modèle de boite tabulaire. 
	De fait, ce sont les éléments frères qui sont réduits.*/
}

#div_menu ul li a:active{ 
	background: -moz-linear-gradient(rgba(0,0,0,.9), rgba(0,0,0,.9)); 
	background: -webkit-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1)); 
	background: -o-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1)); 
	background: -ms-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1)); 
	background: -khtml-linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1)); 
	background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.1)); 

	box-shadow: 0 0 2px rgba(0,0,0,.3) inset; 
}



mon problème comme indiquer auparavant dans le titre et que mon script fonctionne sous mozilla et chrome mais pas sous internet explorer. j'ai trouvé une solution sur internet qui indique que il faut rajouter le fichier "csshover.htc" et la ligne de code suivante dans le body du css "behavior: url(csshover.htc);" mais ça ne change rien
merci d'avance de votre aide. pour information ma transition doit faire en sorte que mon menu s'elargit en largeur quand il est survolé avec la souris.
A voir également:

2 réponses

Réponse 1 / 2
animostab Messages postés 3003 Statut Membre 738
 
Bonjour
voici une page qui t'aidera a résoudre le problème
http://peutetreunereponse.over-blog.com/article-2013481.html

le htc il faut le mettre dans le #div_menu ul li et aussi #div_menu ul li a
0
Réponse 2 / 2
Mourad2009B Messages postés 145 Statut Membre 1
 
Bonjour animostab,
merci pour ta réponse, par contre ça ne marche pas je ne sais pas pourquoi. par contre j'ai ce lien qui fonctionne très bien sur mon navigateur internet-explorer 10, et le plus drôle c'est que ça ne marche pas quand j'ai refais le toto en local (wamp) pourtant j'ai rajouter csshover.htc
merci encore
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
ntrece13 -

159 réponses
App explorer Sa sert a quoi ?
Mada_alpha -
SATS_fr -

1 réponse