Bande blanche au dessus et en dessous de la photo sous ie

RegisG

14 Aug 2006 à 11:28

Bonjour,

Voici le code source :

J'ai un problème avec une photo sous IE.

body {
font: 1em "Trebuchet MS", helvetica, sans-serif ;
line-height: 2.1em ;
/*font-size: 0.8em;*/
margin: 0;
padding: 0;
}


#conteneur {
position: absolute;
width: 1024px;
height: 1353px;
left: 50%;
margin-left: -510px;
background-color:#CCCCFF;
}


div#photo
{
float: left;
margin-left: 45px;
width: 303px;
height: 283px;
background: url(images/photo1.png) no-repeat left top;
}

div#texte
{
float: left;
margin-left: 18px;
text-align: center;
border-style: solid;
border-color: #c9cac3;
border-width: 8px;
height: 283px;
width: 324px;
line-height: 2em ;
vertical-align: center;
}

</style>
</head>

<body>

<div id="conteneur">
		
		<div id="photo"></div>
		<div id="texte">
			blablablablablablablabla, <br />
			blablablablablablablabla,<br />
			blablablablablablablabla,<br />
			
			blablablablablablablabla,<br />
			
			blablablablablablablabla,<br />
			blablablablablablablabla,<br />
		</div>

</div>
	  

</body>

Première bizarerie : lorsque j'inspecte les block avec l'outil "Outline blocks" de la webdevelopper toolbar defirefox, le bloc est plus haut que l'image. Pourtant j'ai déclaré un bloc de la même taille que la photo ( photo1 height: 283px).

Internet Explorer rempli cet interstice par du blanc Smiley decu

Deuxième bizarerie : le bloc photo et le bloc texte sont déclarés avec une hauteur identique. La taille du texte ne provoque pas l'agrandissement du bloc vers le bas, et pourtant ces deux blocs ne sont pas de la même hauteur Smiley eek

Merci pour votre aide