18041 sujets

Questions générales et questions de débutants

Menu horizontal déformé sous Internet Explorer

Bonjour
Avant tout merci pour ce forum et à tous les intervenants qui le font vivre.
Je suis novice en programmation web et je suis entrain de créer une page web. J'ai créé mon menu horizontal qui tient bien sous les autres navigateurs sauf IE 9 . Le menu ne veut pas s'aligner horiontalement sous Internet explorer 9. le dernier boutton "contact" se décale en bas au lieu de s'aligner avec les autres.
en fait quand dans le css je change la taille de police (11px au lieu de 12px) de :


ul#css3menu1 a{font:bold 11px Arial;}


ul#css3menu1 ul a{font:11px Arial;}



ul#css3menu1 li:hover>a{font:bold 11px Arial;}



Alors là tout marche très bien avec internet explorer 9 , par contre avec les autres navigateurs ça a des conséquences.

En fait ce que je voudrais c'est définir cette taille de 11px que pour internet explorer 9.
j'ai testé pas mal de commentaires conditionnés mais rien n'y fait. Merci de votre coup de main Smiley smile 








<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>mon site</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/pontis.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="alternate" type="application/rss+xml" title=" RSS" href="rss.xml" />
<link rel="shortcut icon" href="img/images/favicon.ico" type="image/x-icon" />
<link rel="canonical" href="index.html" />
<meta name="keywords" content="" />
<meta name="copyright" content="" />
<meta name="description" content="" />
<meta name="abstract" content="" />
    <link type="text/css" rel="stylesheet" media="all" href="css/style.css" />
	<link type="text/css" rel="stylesheet" media="all" href="menu.css" />
	<link type="text/css" rel="stylesheet" media="all" href="css/slider.css" />
   
    <script type="text/javascript" src="js/js_69e5e6f68c64c77a2b1469be6d48353b.js"></script>
<script type="text/javascript" src="js/jquery.tools.min44c2.js?P"></script>

  
</head>


<body>


	<div id="wrap-nav">
	
	
	<div id="navmich">
	
	
	
	<ul id="css3menu1" class="topmenu">
	
		
	<li class="topfirst"><a href="#" target="_blank"><span>LE LYC&Eacute;E</span></a>
	<ul>
		<li class="subfirst"><a href="wp-content/uploads/Formations_Argouges_2011.pdf" target="_blank">Toutes les formations</a></li>

		<li ><a href="#"><span>Fili&egrave;res M&eacute;tiers</span></a>
		<ul>
			<li class="subfirst"><a href="?page_id=2435">Optique</a></li>
			<li><a href="?page_id=2442">Mode</a></li>
			<li><a href="?page_id=355">Communication Graphique</a></li>
			<li><a href="?page_id=496">Industries Graphiques</a></li>

			<li><a href="?page_id=2439">Chimie</a></li>
			<li><a href="?page_id=501">Tertiaire</a></li>
		</ul>

		</li>
		<li><a href="#"><span>Lyc&eacute;e G&eacute;n&eacute;ral et Technique</span></a>
		<ul>
			<li class="subfirst"><a href="?page_id=272">Seconde G&eacute;n&eacute;rale et Technologique</a></li>

			<li><a href="?page_id=272" title="Bac S-SI"><img src="img/michelis/bac_icon.png" alt="jellyfish" /> Scientifique - Sciences de l'Ing&eacute;nieur</a></li>
			<li><a href="#" title="Bac STI2D - ITEC"><img src="img/michelis/bac_icon.png" alt="jellyfish" /> Sciences et Technologies de l'Industrie et du D&eacute;v. Durable</a></li>
			<li><a href="?page_id=525" title="Bac STL"><img src="css3menu1/bac_icon.png" alt="jellyfish" /> Sciences et Technologies de Laboratoire</a></li>
			<li><a href="#" title="Bac STG"><img src="css3menu1/bac_icon.png" alt="jellyfish" /> Sciences et Technologies de la Gestion</a></li>
		</ul>

		</li>
		<li><a href="#"><span>Lyc&eacute;e Professionnel</span></a>
		<ul>
			<li class="subfirst"><a href="?page_id=334" title="CAP CF"><img src="css3menu1/cap_icon.png" alt="jellyfish" /> Couture Flou</a></li>
			<li><a href="?page_id=312" title="CAP PP"><img src="css3menu1/cap_icon.png" alt="jellyfish" /> Pr&eacute;-&agrave;-Porter</a></li>
			<li><a href="?page_id=364" title="Bac Pro CG"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Communication Graphique</a></li>

			<li><a href="?page_id=534" title="Bac Pro Secr&eacute;tariat"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Secr&eacute;tariat</a></li>
			<li><a href="?page_id=537" title="Bac Pro Comptabilit&eacute;"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Comptabilit&eacute;</a></li>
			<li><a href="?page_id=340" title="Bac Pro MMV"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> M&eacute;tiers de la Mode et v&ecirc;tements</a></li>
			<li><a href="?page_id=377" title="Bac Pro PI"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Production Imprim&eacute;e</a></li>
			<li><a href="?page_id=369" title="Bac Pro PG"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Production Graphique</a></li>

			<li><a href="?page_id=519" title="Bac Pro IP"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Industries des Proc&eacute;ed&eacute;s</a></li>
			<li><a href="#" title="Bac Pro OL"><img src="css3menu1/bacpro_icon.png" alt="jellyfish" /> Optique Lunetterie</a></li>
		</ul>
		</li>
		<li><a href="#"><span>Post-bac</span></a>
		<ul>

			<li class="subfirst"><a href="?page_id=433" title="BTS OL"><img src="css3menu1/bts_icon.png" alt="jellyfish" /> Opticien Lunetier</a></li>
			<li><a href="?page_id=411" title="BTS GOP"><img src="css3menu1/bts_icon.png" alt="jellyfish" /> G&eacute;enie Optique option Photonique</a></li>
			<li><a href="?page_id=350" title="BTS IMS"><img src="css3menu1/bts_icon.png" alt="jellyfish" /> Industrie des Mat&eacute;riaux Souples</a></li>
			<li><a href="?page_id=491" title="BTS CIG"><img src="css3menu1/bts_icon.png" alt="jellyfish" />Communication et Industries Graphiques</a></li>
			<li><a href="?page_id=530" title="BTS Chimiste"><img src="css3menu1/bts_icon.png" alt="jellyfish" /> Chimiste</a></li>

			<li><a href="?page_id=438" title="CPGE-ATS"><img src="css3menu1/ats_icon.png" alt="jellyfish" /> Classe pr&eacute;paratoire CPGE-ATS</a></li>
		</ul>

		</li>
		<li><a href="#"><span>Enseignements sp&eacute;cifiques</span></a>
		<ul>
			<li class="subfirst"><a href="#" title="SI - CIT - SL - BIOTECH - MPS - SES - PFEG">Enseignements d'exploration seconde</a></li>

			<li><a href="#">Enseignement facultatif Arts Plastiques</a></li>
			<li><a href="#">Enseignement facultatif EPS</a></li>
			<li><a href="wp-content/uploads/dossier_inscription_basket_2011.pdf" target="_blank">Section sportive &eacute; vocation sportive Basket</a></li>
			<li><a href="v1/FORMA/section_euro_2010.pdf" target="_blank">Section Europ&eacute;enne</a></li>
		</ul>

		
		
		
			</li>
		</ul>

			</li>
			
			<li class="topmenu"><a href="#"><span>LES ENSEIGNEMENTS</span></a>
	<ul>
		<li class="subfirst"><a href="#"><span>Comment s'inscrire ?</span></a>
		<ul>
			<li class="subfirst"><a href="wp-content/uploads/inscription-argouges-2011.pdf">Lyc&eacute;e G&eacute;n&eacute;ral et Technique</a></li>
			<li><a href="wp-content/uploads/inscription-argouges-2011.pdf">Lyc&eacute;e Professionnel</a></li>
			<li><a href="#">BTS</a></li>
			<li><a href="?page_id=438">Classe pr&eacute;paratoire CPGE-ATS</a></li>
		</ul>

		</li>
		<li><a href="?page_id=486">Plan d'acc&egrave;s</a></li>
		<li><a href="?page_id=3498">Transport</a></li>
		<li><a href="?cat=18">Intendance</a></li>
		<li><a href="?page_id=95">Personnel</a></li>
		<li><a href="#"><span>P&eacute;le &eacute;-social</span></a>
		<ul>
			<li class="subfirst"><a href="?page_id=3404">Infirmerie</a></li>
			<li><a href="#">M&eacute;decin scolaire</a></li>
			<li><a href="#">Assistance sociale</a></li>
		</ul>

		</li>
		
		<li><a href="?page_id=3121">Orientation</a></li>
		<li><a href="?page_id=2230">Calendrier</a></li>
		<li><a href="?p=151">Manuels scolaires</a></li>
                <li><a href="#">Documentations</a></li>
	</ul>

	</li>
	
	
	
	<li class="topmenu"><a href="#"><span>LES CLASSES PR&Eacute;PA</span></a>
	<ul>
		<li class="subfirst"><a href="#"><span>Pratiques physiques et sportives</span></a>
		<ul>
			<li class="subfirst"><a href="?cat=48">EPS obligatoire</a></li>

			<li><a href="?cat=49">Activit&eacute;s sportives</a></li>
			<li><a href="http://www.ac-grenoble.fr/eps/spip.php?rubrique24" target="_blank">R&eacute;f&eacute;rentiels</a></li>
		</ul>
</li>
		<li><a href="?cat=43">Association Sportive</a></li>
		<li><a href="?page_id=2688">Maison des lyc&eacute;ens</a></li>
		<li><a href="#">Vie &eacute; l'internat</a></li>

		<li><a href="?page_id=2156">Projets p&eacute;dagogiques</a></li>
	</ul>

	</li>
	
	
					<li class="topmenu"><a href="#"><span>LE CDI</span></a>
	<ul>
		<li class="subfirst"><a href="#">Historique</a></li>
		<li><a href="?page_id=14">Diaporama</a></li>
		<li><a href="?page_id=71">Restructuration</a></li>
		<li><a href="?page_id=3746">Internat</a></li>
		<li><a href="wp-content/uploads/PlanLycee.jpg">Plan du lyc&eacute;e</a></li>
		<li><a href="#">Points de vue</a></li>
		<li><a href="?page_id=2444">Le saviez-vous ?</a></li>
	</ul>

	</li>
				
				
				
				
				
				
			<li class="topmenu"><a href="#"><span>LES PRODUCTIONS</span></a>
					<ul>
						<li class="subfirst"><a href="#"><span>Pratiques physiques et sportives</span></a>
						<ul>
							<li class="subfirst"><a href="?cat=48">EPS obligatoire</a></li>

							<li><a href="?cat=49">Activit&eacute;s sportives</a></li>
							<li><a href="http://www.ac-grenoble.fr/eps/spip.php?rubrique24" target="_blank">R&eacute;f&eacute;rentiels</a></li>
						</ul>
				</li>
						<li><a href="?cat=43">Association Sportive</a></li>
						<li><a href="?page_id=2688">Maison des lyc&eacute;ens</a></li>
						<li><a href="#">Vie &eacute; l'internat</a></li>

						<li><a href="?page_id=2156">Projets p&eacute;dagogiques</a></li>
				</ul>

			</li>
	
	
	
				
				
				<li class="topmenu"><a href="?page_id=1088">RELEV&Eacute; DE NOTE</a></li>
				
				

				
				<li class="topmenu"><a href="#"><span>LES RESSOURCES</span></a>
					<ul>
						<li class="subfirst"><a href="#"><span>Pratiques physiques et sportives</span></a>
						<ul>
							<li class="subfirst"><a href="?cat=48">EPS obligatoire</a></li>

							<li><a href="?cat=49">Activit&eacute;s sportives</a></li>
							<li><a href="http://www.ac-grenoble.fr/eps/spip.php?rubrique24" target="_blank">R&eacute;f&eacute;rentiels</a></li>
						</ul>
				</li>
						<li><a href="?cat=43">Association Sportive</a></li>
						<li><a href="?page_id=2688">Maison des lyc&eacute;ens</a></li>
						<li><a href="#">Vie &eacute; l'internat</a></li>

						<li><a href="?page_id=2156">Projets p&eacute;dagogiques</a></li>
				</ul>

			</li>
				
				
				
				
				<li class="topmenu"><a href="?page_id=1088">VISITE GUID&Eacute;E</a></li>
				
				
				
				
				
				<li class="toplast"><a href="?page_id=2628">CONTACT</a></li>

			
	</ul>
			
			
			

	</div>




	</div>



</body>

</html>





le css en dessous



 



#css3menu1 { display:none;}
ul#css3menu1 {width:980px;}

ul#css3menu1,ul#css3menu1 ul{
	margin:0;list-style:none;background-color:#333;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
ul#css3menu1 ul{
	display:none;position:absolute;left:0;top:100%;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#333;background-image:none;border-width:1px;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-style:solid;border-color:#5A5E60;}
ul#css3menu1 li:hover>*{
	display:block;}
ul#css3menu1 li:hover{
	position:relative;}
ul#css3menu1 ul ul{
	position:absolute;left:100%;top:0;}
ul#css3menu1{
	padding:1px 1px 1px 0;display:block;font-size:0;float:left;}
ul#css3menu1 li{
	display:block;white-space:nowrap;font-size:0;float:left;}
	
	/***css IE**/

/**//*/ul#css3menu1 li{display:block;*white-space:nowrap;}/* */

	
	
ul#css3menu1>li,ul#css3menu1 li{
	margin:0;}
ul#css3menu1>li{border-right : 1px solid #FFF;}
ul#css3menu1 ul>li{
	margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
	outline-style:none;}


ul#css3menu1 a{
	display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#ffffff;cursor:default;padding:10px;background-color:#333;background-image:url("mainbk.png");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{
	float:none;margin:9px 0 0;}
ul#css3menu1 ul a{
	text-align:left;padding:8px 0 0 0;background-color:#333;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#262626;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:12px Arial;color:#fff;text-decoration:none;}
ul#css3menu1 li:hover>a{
	background-color:#1F80AE;border-style:none;font:bold 12px Arial;color:#ffffff;text-decoration:none;background-image:url("mainbk.png");background-position:0 100px;}
	


ul#css3menu1 img{
	border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
	display:none;}
ul#css3menu1 li:hover > a img.def{
	display:none;}
ul#css3menu1 li:hover > a img.over{
	display:inline;}
ul#css3menu1 span{
	display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{
	background-image:url(../img/michelis/arrowsub.gif);padding-right:27px;}
ul#css3menu1 ul li:hover>a{
	background-color:#333;background-image:none;border-style:solid;border-color:#262626;font:12px Arial;color:#1F80AE;text-decoration:underline;}
ul#css3menu1 li.topfirst>a{
	height:15px;line-height:15px;border-radius:0px 0 0 0px;-moz-border-radius:0px 0 0 0px;-webkit-border-radius:0px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topfirst:hover>a{
	line-height:15px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 li.topmenu>a{
	height:15px;line-height:15px;text-shadow:#000000 0px -1px 1px;}
ul#css3menu1 li.topmenu:hover>a{
	line-height:15px;text-shadow:#3d3d3d 0px -1px 1px;}
	ul#css3menu1 li.toplast{width:94px;border-right :none;}
	
	/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {ul#css3menu1 li.toplast {width:92px;float:left;}}

/* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
ul#css3menu1 li.toplast {width:92px;float:left;}
}


ul#css3menu1 li.toplast>a{
	height:15px;line-height:15px;border-radius:0 0px 0px 0;-moz-border-radius:0 0px 0px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:0px;-webkit-border-bottom-right-radius:0px;text-shadow:#000000 0px -1px 1px;text-align:center;}
ul#css3menu1 li.toplast:hover>a{
	line-height:15px;text-shadow:#3d3d3d 0px -1px 1px;}
ul#css3menu1 ._>li>a{
	padding:0;}
ul#css3menu1 li.subfirst>a{
	border-width:0;border-style:none;padding:0;}
ul#css3menu1 li.subfirst:hover>a{
	border-style:none;}

Modifié par aka80 (21 Jul 2011 - 04:34)
j'avais cru résoudre le problème mais toujours rien
Modifié par aka80 (21 Jul 2011 - 04:32)
Sujet clos
Aller à