28173 sujets

CSS et mise en forme, CSS3

Problème de rendu sous ie lors de l'utilisation de flottant

Bonjour,

je souhaite réaliser un menu en css, le rendu me satisfait a peu pres sous firefox, mais impossible d'avoir le même rendu sous ie.

Les sous items qui devrait être flottants ne sont pas gérés correctement sous ie.
Je ne sais plus quoi modifier ... Si qqn a une idée, je suis preneuse !

Voici l'aperçu :
http://e.colpaert.free.fr/test_menu/test.html


Code HTML 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
		<div id="container_menu"> 
		<ul class="menu">
			<li class="page_item">
				<a href="#" class="niveau1">Home</a>
			</li>
					
			<li class="page_item">
				<a href="#" class="niveau1">Test </a>
				
				<ul class="sousMenu" style="position:relative;">			      
					<li><a href="#" class="niveau2">pommes</a></li>	
					<li><a href="#" class="niveau2">poire</a></li>

				</ul>
			</li>
			<li class="page_item">
				<a href="#" class="niveau1">Univers</a>
				<ul class="sousMenu" style="">			      
					<li><a href="#" class="niveau2">Carotte</a></li>	
					<li><a href="#" class="niveau2">Radis</a></li>	
					<li><a href="#" class="niveau2">Tomate</a></li>	
				</ul
			</li>
			<li class="page_item">
				<a href="#" class="niveau1">Videos</a>
				<ul class="sousMenu" style="">			      
					<li><a href="#" class="niveau2">Choux Fleur</a></li>	
				</ul>

			</li>
			<li class="page_item"><a href="#" class="niveau1">Design</a></li>

			<li class="page_item"><a href="#" class="niveau1">Contribuer</a></li>
			<li class="page_item"><a href="#" class="niveau1">Poulpe Project</a></li>
			<li class="page_item"><a href="#" class="niveau1">Archives</a></li>
				
			<li class="page_item">			
				<a href="#" class="niveau1">
					Mail				
				</a>	
			</li>
		</ul>
		</div>
</body>
</html>


Code CSS


body {
    margin: 10px;
	behavior : url('css_ie.htc');
    font-size: 8pt;
    background-color: #333;
	color:#fff;
}
.menu {
		list-style-type:none;
		/*background:url(image/menu/menu_bg.gif) 50% 0 #333 repeat-x*/
		margin:0;
		padding:0;
		height:20px;
		width:100%;
		border-top:1px double #666;
		border-bottom:1px double #666;
}
.menu li{
	margin:0px;
	background:none;
	padding:0;
	display:block;
	vertical-align:middle;
	float:left;
}
.menu .page_item{
	height:20px;
}


.menu li a.niveau1 {
	font-size:.8em;
	text-transform:uppercase;
	line-height:normal !important;
	line-height:12px;
	display:inline;
	clear:both;
	vertical-align:middle;
	height:12px;
	padding:0 10px 0 10px;
	background:url(image/menu/menu_triple.gif) top left repeat-x;
}
.menu li a.niveau1:hover,
.menu li a.niveau1:active {
	background-position:center left;
	color:#FFFFFF;
}

.menu li.current_page_item a.niveau1 {
	background-position:bottom left !important;
	color:#1F3700 !important;
}
.menu li a.niveau1 {
	color:white;
	text-decoration:none;
}

.menu li.current_page_item a.niveau1 {
	color:#ffffff !important;
}
.menu .sousMenu
{
	height:0px;
	clear:both;
	float:left;
	margin:0px;
	padding:0px;
	display:none;
	width:auto;
	position:relative;
	top:6px;
}
.menu .sousMenu li
{
		
	margin: 0px;
	padding:0px;
	border: 0;
	width: 80px;
	clear:both;
	height:auto;
	border-top: 1px solid #000;
	border-right: 1px solid #000; 
}
.menu .sousMenu li a:link, .menu .sousMenu li a:visited
{
	display: block;
	padding: 2px;
	color: #000;
	margin: 0;
	border: 0;
	text-decoration: none;
	/*background: transparent url(image/menu/fondTR.png) repeat;*/
	background-color: #eee;
}
.menu .sousMenu li a:hover
{
	background-image: none;
	background-color: #F2462E;
	color:#fff;
}
.menu li:hover .sousMenu {display: inline;}
.menu li:hover a.niveau1 {background-position:center left;}
Salut,

Le problème est que tu utilise la position relative pour tes listes déroulantes, ce qui repousse le bas du conteneur et ainsi ta bordure inférieure. Il faudrait que tes listes déroulantes soient en position absolue, ainsi elle passerait par dessus le contenu au lieu de le faire descendre dans la page.
Merci pour ta réponse.

Malheureusement j'utilisais la position "absolute" au départ mais cela ne me convenait pas car en position absolute, le sous menu sera toujours à la même position quelque soit son item parent ... ce qui ne me convient pas.
Je souhaiterais que l'enfant soit constamment positionné en dessous du parent.
Sujet clos
Aller à