28173 sujets

CSS et mise en forme, CSS3

Probleme de hauteur de div

bonjour les gens depuis ce matin je m'enerve sur un gabarit de site qui me fait bien des blague sur IE de #*ù@@_-"-("!ùù

vous pouvez voir ce que ca donne ici http://skalpl.free.fr/test/

et le blem se situe dans la case orange. j'ai décalé le trait vert vers le bas pour que vous voyez le binz. la hauteur du petit trait vert n'est pas bonne sur ie alors que j'ai bien spécifié sa hauteur.

voici le code html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
	<title>Talentis</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Language" content="fr" />
	<meta name="keywords" content="" />
	<meta name="description" content=""/>
	<link rel="stylesheet" type="text/css" href="./style.css" />
</head>

<body>

<div id="conteneur">

	<div id="header">
	
	<div id="head"></div>
	<div id="logo"></div>
	
	</div>
	
	<div id="top">
	
		
	
		<div id="left">

			<div id="head_left"></div>
			
			<div id="middle_left"></div>
			
		</div>

		<div id="picture"></div>
	
	</div>
	
	<div id="page">
	
		<div id="event">
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>	
		</div>
		
		<div id="contenu">
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
			cho<br/>
		</div>
		
		<div id="foot"></div>	
		
	</div>	
	
	
		
</div>

</body>

</html>


et voici le css qui va avec, la balise en question est head_left

/* Style de talentis
********************************************/
body{
		margin:  0;
		padding: 0;
		font: 0.8em Verdana, Geneva, Arial, Helvetica, "Bitstream Vera Sans", sans-serif;
		background: #eee;
	}
	
html>body #conteneur{
		height: auto;
		min-height: 350px;
	}

#conteneur{
		position: absolute;
		width: 770px;
		left: 50%;
		margin-left: -385px;
		height: 100%;
		text-align: left;
		background: #fff;
		padding: 0;
	}
	
#header{
		position: absolute;
		margin: 0;
		width: 770px;
		top: 0;
		background: grey;
}	

#top{
		position: absolute;
		margin: 0;
		width: 770px;
		top: 80px;
		background: grey;
}	
	
#page{
		position: absolute;
		margin: 0;
		width: 770px;
		height: auto;
		top: 280px;
		background: grey;
	}

/* Elements du header
********************************************/	
#head{
		height: 10px;
		background-color: #146090;
}
	
#logo{
		position: absolute;
		top: 10px;
		width: 770px;
		height: 70px;
		background: red; 
		margin:0;
		padding: 0;
	}
	
/* Elements du top
********************************************/
#left{
		position: absolute;
		width: 220px;
		height: 200px;
		left:0;
		padding: 0;
		background: orange;
	}	
	
#head_left{	
		position: absolute;
		width: 220px;
		height: 5px;
		left: 0;
		top: 5px;
		background: url(images/tof.jpg);
		
	}

#middle_left{
		position: absolute;
		left: 0;
		top: 5px;
		height: 185px;
		width: 200px;
		background: yellow;
	}
	
#picture{
		position: absolute;
		width: 550px;
		height: 200px;
		left: 220px;
		background: url(images/tof.jpg);
}	

/* Elements de page
********************************************/
#event{
		position: absolute;
		width: 220px;
		height: auto;
		left: 0;
		margin: 0;
		padding: 0;
		background: blue;
	}	
	
#contenu{
		margin: 0 0 0 220px;
		background: green;
	}	
	
#foot{
		height: 30px;
		background-color: #146090;
	}


Sinon vous pensez que j'ai employé la bonne méthode pour obtenir cette apparence la ou alors ya plus propre?
apparement le probleme viendrait du fait que IE ne veuille pas accepter les balise de moins de 15px de hauteur, et me les mette par défaut avec une hauteur plus grande. Chose invraissemblable Smiley decu
Il y a un échange récent (quelques jours) sur le forum qui parle de ça, tu devrais le trouver facilement... Smiley cligne Je regarde de mon côté si je le retouve Smiley smile
Sk4pis0 a écrit :
apparement le probleme viendrait du fait que IE ne veuille pas accepter les balise de moins de 15px de hauteur, et me les mette par défaut avec une hauteur plus grande.(...)

J'ai moi aussi rencontré ce souci , et j'ai bloqué là-dessus 2 jours Smiley bawling avant de lire ceci. Je sais que le topic ici date un peu mais y a t'il une personne qui sache pourquoi IE réagit comme ça SVP ?
C'est juste quelquechose qu'IE ne pige pas ? Une hauteur de ligne de 12px et hop il est paumé Smiley langue ?
Merci infiniment d'avance.
Modifié par didli (27 Mar 2006 - 23:28)
Salut !

Sachant (que je n'ai pas été voir le problème ni inspecté le code et) qu'IE interprète la propriété height comme min-height, il risque d'augmenter la taille d'un div (par exemple) si on place quelque chose de trop grand à l'intérieur ... même si croyait lui avoir dit de ne pas le faire !

Il n'y a rien à l'intérieur des éléments concernés qui pourrait les obliger à grandir sous IE ?
pour ce probleme la propriete " line-height:1px;" fait plier IE.
S'il doit y avoir un element a l'interieur de ce div c'est a cet elemnt qu'il faut appliquer la regle et non au div
Sujet clos
Aller à