Sujet Précédent Sujet Suivant

Mon script ne fonctionne pas sous internet explorer 10

Fermé
Mourad2009B Messages postés 108 Date d'inscription lundi 23 août 2010 Statut Membre Dernière intervention 28 octobre 2024 - 25 oct. 2013 à 14:52
Mourad2009B Messages postés 108 Date d'inscription lundi 23 août 2010 Statut Membre Dernière intervention 28 octobre 2024 - 26 oct. 2013 à 13:45
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 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
25 oct. 2013 à 16:16
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 108 Date d'inscription lundi 23 août 2010 Statut Membre Dernière intervention 28 octobre 2024
26 oct. 2013 à 13:45
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