28127 sujets

CSS et mise en forme, CSS3

[résolu] A propos d'overflow

Bonjour a tous.
En appliquant la propriété overflow sur un element, la taille de l'élement est modifié.
Ici, l'élément li du menu occupe toute la hauteur de ul lorsque la propriéte overflow: hidden; n'est pas specifiée.
Dés que la propriété est appliquée, li ne prends plus tout la hauteur de ul, la couleur de fond de ul est visible sous la couleur de fond de il sur quelques px, 4 plus précisement selon 'firebug'.
Quelqu'un saurait-il ce qui génère cet effet?
Je cherche a comprendre et suis donc plus intéressé par le diagnostic que le remède.
Merci d'avance
<html>
	<head>
		<meta charset="UTF-8" /> 

			<style type="text/css">
			#menu {
				width: 60%;			
				margin: auto;
				
				}

			#menu ul {
				background-color: green;
				}
								
			#menu li {
				list-style: none;
				display: inline-block;
								overflow: hidden;
				width: 20%;
				height: 50px;
				line-height: 50px;
				background-color: red;
				text-align: center;
			}					
			</style>	

 	</head>
	<body>		
<div id='menu'>
	<ul>
		<li> item1 </li>
		<li> item2 </li>
		<li> item3 </li>
	</ul>
</div>						
 	</body>
</html>

Modifié par infini (06 Jan 2012 - 14:00)
salut,

pour le diagnostique, rien trouver de vraiment concret, mais apparemment la propriété owerflow pose des soucis vu le nombre de résultats avec une requête "owerflow firefox" dans google.
je pense que tu as du régler le problème, sinon en rajoutant un max-height ça rentre dans l'ordre.


#menu ul {
max-height:50px;
background-color: green; 
}


bonne continuation
olivier.
slt Oliviier
Merci pour la réponse, et oui de toute façon j'avais contourné le problême mais c'est vrai que j'aurais aimé comprendre le pourquoi du comment. En fait, il n'y a peut-être rien a comprendre mais seulement constater une petite défection du 'renard flamboyant'.
Meilleurs voeux a tous.
Modifié par infini (06 Jan 2012 - 14:01)
Sujet clos
Aller à