[Résolu] Problème de background avec IE 6

Bonjour à tous.

Mon problème est le suivant. J'ai créé une colonne gauche avec une image de fond, une image en haut et une image en bas. Sous IE, j'ai une bande de 2 pixels qui s'affichent en dessous de l'image du bas. Sous Firefox et Opera, pas de problème.

Pour voir le résultat :

http://www.ping-web.com/test/test.html

Voici mon code Html :

<div class="left">

<img src="/images/blue/top_left.gif" alt="Top">
<h2>Titre 1</h2>
<p>blablabla.</p>

<h2>Titre 2</h2>
<p>blablabla.</p>

<h2>Titre 3</h2>
<p>blablabla.</p>
<img src="/images/blue/bottom_left.gif" alt="Bottom" />
</div>

et le css :

.left {
	float: left;
	width: 200px;
	font-size: 0.8em;
	color: #086484;
	background-image: url(/images/blue/left.gif);
	}

.left h2 {
	margin-top: 10px;
	font-size: 1.3em;
	text-align: left;
	color: #0C88B4;
	font-weight: bold;
	padding-bottom: 5px;
	padding-left: 20px;
	padding-right: 10px;
	background-image: url(/images/blue/h2_left.gif);
	background-repeat: no-repeat;
	}

Merci pour votre aide.
Modifié par Otto Didact (17 May 2006 - 15:29)

Salut. Et en mettant les coins du div left en background dans les css plutot qu'en image via le html, ça ne marche pas mieux?

bonjour,

il me semble qu'un

div.left img {vertical-align:top;}

devrait faire disparaitre cette marge disgracieuse sous l'image dans IE.

++

Merci beaucoup pour vos réponses rapides.

div.left img {vertical-align:top;}

Effectivement en rajoutant cette ligne plus de problèmes. Je vois que j'ai encore beaucoup de choses à apprendre.

Merci encore.