28220 sujets

CSS et mise en forme, CSS3

[toujours pas résolu] Mauvaise hauteur de bloc sous IE

Hello,

J'ai un pb de hauteur de bloc avec IE en relation avec les bordures d'une image.

N'ayant pas trouvé mon bonheur dans la FAQ ni dans la recherche, j'ai décidé de publier cette petite page exemple (juste 4 fichiers copiables en local).

http://turbinus.free.fr/css-lab/pb-height.html

Description du problème:

Tout va bien sous Firefox, sous IE la hauteur du bloc est augmentée de la hauteur des bordures de l'image (il semble).

En détail :

Un div possède une image de fond de 498px de haut.
Des paddings haut et bas respectivement de 43 et 55 pixels.
Une hauteur de 400 pixels (notez que 400+43+55 = 498)
Au milieu il y a une image de 390 pixels de haut avec un border de 10px.

Sous Firefox, le div fait exactement la hauteur de l'image de fond, soit 498px. Parfait !

Sous IE, il y a en plus une bande blanche en bas de 20 pixels.

Je ne sais pas d'où vient cette bande, ni comment la supprimer.

Si je supprime height: 400px; alors Firefox et IE affiche tous les 2 une bande blanche.

Le code HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Language" content="fr" />
<title>Test</title>

<link rel="stylesheet" type="text/css" href="mini.css" media="screen" />
</head>

<body>
<div id="header"><h1>Test</h1></div>

<div id="photo">
<a href="#"><img src="fruits.jpg" alt="Image 1" /></a>
<p>Image 1</p>
</div>

<div id="reglette"><a href="#">&nbsp;Réglette</a></div>

<div id="footer">footer&nbsp;</div>

</body>
</html>


Le CSS


* {
	margin: 0;
	padding: 0;
}

html {
	background-color: #003;
}

body {
	width: 100%;
	margin: auto;
	background-color: #FFF;
	font-family: "Trebuchet ms", helvetica, arial, sans-serif;
	font-size: x-small;
}

/* * * * * * * LE HAUT DE PAGE */

div#header {
	height: 60px;
	color: #000;
}

div#photo {
	height: 400px;
	background: url(img20x498.jpg) repeat-x ;
	
	/* marge haute et basse */
	padding-top: 43px;
	padding-bottom: 55px;
	
	/* ajustement horizontal */
	padding-left: 35%;
}

div#photo img {
	display: block;

	border: 5px solid #fff;
}

div#photo p {
	font-size: small;
	color: #fff;
}	

/* * * * * * * LA REGLETTE */

div#reglette {
	/* hauteur adaptée à l'image de fond */
	height: 40px;
	background-color: #66f;
}

div#footer {
	height: 30px;
}
Smiley decu Smiley decu
Modifié par pat665 (06 Nov 2005 - 10:16)
Salut,

Merci, mais cela ne répond pas à mon problème.

- Mon image a bien la bonne taille (sous FF et sous IE)
- Ma page est bien en mode standard (visible sous FF)
- La bande blanche n'est pas sous l'image mais en bas du DIV.
Hello,

J'ai trouvé un contournement, mais pas une solution. J'ai remplacé le padding du DIV par un margin sur l'image. Résultat visible ici :

http://turbinus.free.fr/css-lab/fix-height.html

Dans ce cas, la hauteur du DIV est respectée. Voilà ce qui a changé dans le CSS :

div#photo {
	height: 498px;
	background: url(img20x498.jpg) repeat-x ;
	
	/* marge haute et basse */
	/* padding-top: 43px;
	padding-bottom: 55px; */
	
	/* ajustement horizontal */
	padding-left: 35%;
}

div#photo img {
	/* display: block; */
	margin-top: 43px;
	border: 10px solid #fff;
}
Sujet clos
Aller à