Bonjour à tous!

J'ai un gros problème avec IE7. J'ai un div avec une image en background. Souhaitant afficher complètement cette image, je fixe son width à 100% et son height à 300px.

CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
#selecteur-passion{
	background: url(../images/selecteur-passions.jpg) 100% 100% no-repeat;
	background-position:top;
	width : 100%;
	height : 300px;
	color: #CCCCCC;
	margin-top:-30px;
	padding-top: 20px;
	padding-left: 20px;
	position: relative;
}
A l'intérieur de ce div, j'ai deux autre div :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
 
#selecteur-lig1{
	margin-top:10px;
	text-align:right;
	width:100%;
}

Le html est de la sorte :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
 
<div id="selecteur-passion">
     <div id="selecteur-lig1">
         COUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOUCOU
     </div>
     <div id="selecteur-lig1">
        BLABLABLABLABLABLABLABLABLABLABLABLABLABLABLABLA
     </div>
</div>
SI tout marche avec FF3 et IE6, IE7 me superpose COUCOU ET BLABLA, alors que je souhaite qu'ils s'affichent l'un en dessous de l'autre.

Cela semble donc venir de la propriété height fixée à 300px (si j'enlève cette ligne, ça marche). Mais alors l'image ne s'affiche plus entièrement...

UNE SOLUTION?

Merci d'avance!