28173 sujets

CSS et mise en forme, CSS3

Salut à tous!

Je fait un gabarit en css pour un CMS.

Voici le code de mon gabarit :


<html>
	<head>
		<title></title>
		<style>
			#page
			{
				border: 1px solid black;
				width: 800px;
				height: 550px;
			}
			#entete
			{
				border: 1px solid orange;
				width: 798px;
			}
			#bandeIcone,#bandeNoire,#bandeMenu1,#bandeAriane
			{
				position: relative;
				left: 32px;
				width: 764px;
			}
			#bandeIcone
			{
				border: 1px solid red;
				height: 55px; 
			}
			#bandeNoire
			{
				border: 1px solid blue;
				height: 14px;
			}
			#bandeMenu1
			{
				border: 1px solid yellow;
				height: 23px;
			}
			#bandeAriane
			{
				border: 1px solid green;
				height: 23px;
			}
		</style>
	</head>
	<body>
		<div id="page">
			<div id="entete">
				<div id="bandeIcone">
				</div>
				<div id="bandeNoire">
				</div>
				<div id="bandeMenu1">
				</div>
				<div id="bandeAriane">
				</div>
			</div>
		</div>
	</body>
</html>


Le problème c'est que le div «id="bandeNoire"» doit être de 14px mais après vérifications, IE7 n'accepte pas de réduire la hauteure de cette bande à moins de 21px. Dans FF2 ça fonctionne parfaitement.

Des idées là dessus?

Merci!

Jonathan
Modérateur
bonjour,

pas de doctype , IE restera en mode quirk avec toutes les differences d'affichage et regle css non prise en compte qui en decoule. (faire usage d'un doctype valide avant tout , ça ne fait auccun mal Smiley smile )

IE applique au minimum 1em de hauteur aux elements vides ou de dimension inferieurs (augmente/diminue la taille d'affichage dans IE et tu verra cette element se redimensionné).

Pour contrer ça :

betement un overflow:hidden; a l'elements concerné ou un line-height:14px;

gc
Merci beaucoup!

Habituellement je met toujours un DOCTYPE mais comme je faisait des tests, j'ai négligé ce point.

Merci pour le truc overflow:hidden, je ne connaissait pas ça!

Bonne fin de journée!