[Résolu] Position absolute et IE6-IE7

Bonsoir tous le monde,

Bon voilà le problème de ce soir

Ce que je recherche c'est affiché 5 photos les unes en dessous des autres avec par dessus le titre de la photo

Côté HTML j'ai ceci

<ul class="lien">
	<li class="sidebarPost">
		<a href="mapage.html"><img class="sidebarThumb" src="images/image1.jpg" width="100%" alt="image1" border="0" /></a>
		<h3 class="sidebarTitle">
			<a href="mapage.html"><span>Titre image</span></a>
		</h3>
	</li>
</ul>

Rien d'extraordinaire. Côté CSS j'ai ceci :

ul.lien {list-style-type: none ; margin: 0  ; padding: 0 ;}
li.sidebarPost{overflow: hidden; position: relative; margin-bottom: 10px;}
li.sidebarPost img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
li.sidebarPost:hover img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}			
h3.sidebarTitle{position: absolute; display: block; width: 100%; background: url(images/overlay.png) 0 0 repeat; bottom: 4px;}				
h3.sidebarTitle span{display: block; padding: 5px; color: #fff;}

Sous IE6 les titres des photos vient s'afficher après la zone d'affichage.
Sous IE7, les titres ne sont pas visibles.

J'ai donc rajouté ceci sur mes CSS spécifiques IE6 et 7 :

li.sidebarPost{overflow: visible; width: 100%;height:1%;}

Là les titres des photos sont positionnées à côté des images comme ceci


Et là je sèche pour le moment ! Donc je suis preneur de toutes idées !
Modifié par Babali (08 Jun 2010 - 09:02)

bonsoir

sans exemple en ligne difficille de bien visualisé ton probleme.

Je dirais simplement que pour IE , il te faut placé ton h3 en absolute en left:0; sinon il se positionne en absolue a partir de l'endroit ou il apparaitrait dans le flux ... juste a droite de l'image justement .

J'imagine que tu fais usage d'un doctype valide .

GC

Super ! ça fonctionne. J'avais tout essayé, mais je n'avais pas pensé à cela.

Effectivement avec le left à zéro, j'ai bien le texte sur l'image.
Problème résolu. merci pour la réponse rapide et précise