28173 sujets

CSS et mise en forme, CSS3

Bonjour

Depuis que j'ai installé ie7 j'ai remarqué des anomalies sur un site qui avait été testé avec ie6 l'année dernière et qui s'affichait normalement.
Le menu a été fait avec des CSS. Je me suis inspirée du tutorial "'menu déroulant horizontal" de site Alsacreation. Super.

Voici ce que j'obtiens avec ie6
upload/5176-ie6.gif

Voici ce que j'obtiens avec ie7
upload/5176-ie7.gif

Est ce que quelqu'un a déjà eu cela et peut me donnner des pistes de recherche?

Merci d'avance.

Cordialement.

Frogybella
Modifié par frogy (15 May 2007 - 16:27)
Peut-être en définissant un display:block et en donnant un width à ton sous-menu
Ton sous-menu à l'air de ne s'étendre qu'à la taille de son plus grand lien, donc en fixant une largeur (et pour ça, faut le mettre en block) ça devrait aller mieux

Après ca dépends de la construction de ton menu, mais sans l'code je peux pas trop en dire plus
Merci de ta réponse.

Voici le code du menu qui te permettra peut-être de voir s'il y a un oubli.

<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();"><a href="index.php">Accueil</a></dt>
	</dl>
	<dl>			
		<dt onmouseover="javascript:montre('smenu2');">Matériels neufs </dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="comecal.php">COMECAL</a></li>
					<li><a href="knorr.php">KNORR</a></li>
					<li><a href="agor.php">AGOR</a></li>
			    </ul>
			</dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();" >Matériels occasion</dt>
	      <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
				<ul>
					<li><a href="list.php?categ=ASSE">Assembleuses</a></li>
					<li><a href="list.php?categ=EMBA">Emballeuses</a></li>
					<li><a href="list.php?categ=ENCA">Encarteuses</a></li>
					<li><a href="list.php?categ=MASS">Massicots</a></li>
					<li><a href="list.php?categ=PAP" >Piqueuses/<br>Agrafeuses/<br>Perforeuses</a></li>
					<li><a href="list.php?categ=PLIE">Plieuses</a></li>
					<li><a href="list.php?categ=RELI">Relieurs</a></li>
					<li><a href="list.php?categ=DIV">Divers</a></li>
					<li><a href="list.php">Liste complète</a></li>
				</ul>
	  </dd>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();"><a href="services.php">Services</a></dt>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu5');" onmouseout="javascript:montre();"><a href="contacts.php">Contacts</a></dt>
	</dl>
	<dl>	
		<dt onmouseover="javascript:montre('smenu6');" onmouseout="javascript:montre();"><img src="images/drapeauGB.gif"></dt>
	</dl>
</div>	


et les propriétés dans ma feuille css.

#menu {
	width: 852px;
	font-size: 10pt;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	z-index:2;
	}



#menu dl {
	float: left;
	width: 142px;
	
}

#menu dt {
	cursor: pointer;
	text-align: center;
	background-color: #000000;
	border-right: 1px solid #00ff00;
	border-left: 1px solid #00ff00;
	height: 24px;
	padding-top: 4px;
	}
#menu dd {
	display: none;
	position:absolute;
}

#menu li {
text-align: center;
background-color: #000000;
}

#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}

#menu li a:hover, #menu dt a:hover {
	color: #FF9900;
}


Je m'apperçois effectivement que je n'ai pas défini de propriétés de largeur pour les sous-menus.
Est-ce celà qui pourrait sous ie7 modifier l'affichage?

Cordialement.

Frogybella Smiley smile