28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problème Over et IE

Bonjour,

je suis actuellement entrain de concevoir un site web (tout léger), avec un menu déroulant. J'ai du utiliser un behavior pour que les sous-menu s'affichent sous IE.

Mon problème est que à présent, les sous menus sous IE s'affichent mais sur tout la largeur j'ai une bande brune qui vient avec :s : http://institut-untempspoursoi.be/

Code html : 


  <ul id="menuDeroulant">
			<li>
		<a href="#">Contact</a>
			<ul class="sousMenu">			      
				<li><a href="#">Email</a></li>
				<li><a href="#">Adresse</a></li>
			</ul>
		</li>
		
					<li>
			
			<a href="#">Nouveautés</a>
			<ul class="sousMenu">			      
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menus</a></li>
			</ul>
		</li>
		
		
				<li>
					<a href="#">Marques</a>
			<ul class="sousMenu">			      
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menus</a></li>
			</ul>
		</li>
		
		
				<li>
		<a href="#">Solarium</a>
		
			<ul class="sousMenu">			      
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menus</a></li>
			</ul>	
		</li>
		
				<li>
			<a href="#">Hommes</a>

			<ul class="sousMenu">			      
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menus</a></li>
			</ul>
		</li>
		
				<li>
			<a href="#">Soins</a>
			<ul class="sousMenu">			      
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>

				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
			</ul>
		</li>
		
		
		
		<li>
			<a href="#">L'institut</a>
			<ul class="sousMenu">
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>
				<li><a href="#">Sous menu</a></li>		
			</ul>
		</li>
</ul>



code css : 

#menuDeroulant
{
	width: 947px;
	height: 21px;
	list-style-type: none;
	margin: 0;
	padding: 0;
	position: absolute;
	background-color: #754842;
	
}
#menuDeroulant li
{
	float: right;
	width: 100px;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant li a:link, #menuDeroulant li a:visited
{
	display: block;
	height: 1%;
	color: #FFF;
	margin: 0;
	padding: 4px 8px;
	
	text-decoration: none;
	background-color: #754842;
}
#menuDeroulant li a:hover { background-color: #834538;  }
#menuDeroulant li a:active {
	background-color: #834538;
	top: 0px;
}

#menuDeroulant .sousMenu
{
	display: none;
	list-style-type: none;
	margin: 0;
	padding: 0;
	border: 0;
}
#menuDeroulant .sousMenu li
{
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100px;
	border-top: 1px solid transparent;
	border-right: 1px solid transparent;
	
}
#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	display: block;
	color: #FFFFFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background-color: #754842;
	background-repeat: repeat;
}
#menuDeroulant .sousMenu li a:hover
{
	background-image: none;
	background-color: #FBD9B3;
	color:#754842;;
}

#menuDeroulant li:hover .sousMenu { display: block; }



Quelqu'un aurait une idée d'où celà peut venir ?

Merci. Smiley smile
Modifié par adrien334 (03 Nov 2007 - 13:04)
Bonjour et bienvenue,
j'ai pas IE6 mais cela pourrait venir du display:block de tes liens:

#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited

{
	display: block;
	color: #FFFFFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background-color: #754842;
	background-repeat: repeat;
}

qui ne s'adaptent pas à la largeur des <li>.
Essayes de résoudre ça en attribuant un width:100% à tes liens
ou alors 100px
Et cela résoudra tes espaces verticaux entre item de list. Quelques explications
Modifié par Hermann (13 Oct 2007 - 12:58)
Salut, et merci pour la réponse, j'ai essayé avec ceci : 

#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	width:100%;
	display: block;
	color: #FFFFFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background-color: #754842;
	background-repeat: repeat;
}


et ceci 

#menuDeroulant .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited
{
	width:100px;
	display: block;
	color: #FFFFFF;
	margin: 0;
	border: 0;
	text-decoration: none;
	background-color: #754842;
	background-repeat: repeat;
}


Mais ca ne semble pas fonctionner.
Modifié par adrien334 (13 Oct 2007 - 13:06)
Salut,

Ça provient surement d'un bug d'ie6, même si tu fixes le height d'un bloc, si la taille du contenu augmente ben le height du bloc aussi Smiley cligne
Donc pour ie6 le height de ton bloc menu augmente à chaque survol d'item!
Pour palier à ça passer tes sous menus en absolute, ça les sortira du flux et ils ne seront plus pris en compte dans le calcul du height de ton bloc menu.
Essaye:

#menuDeroulant li
{
	float: right;
	width: 100px;
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;/* bloc référent pour l'absolute*/

#menuDeroulant li:hover .sousMenu { 
display: block; 
position: absolute; 
left: 0; 
top: 0;
}

}
Sujet clos
Aller à