28172 sujets

CSS et mise en forme, CSS3

Salut à tous,

Je suis confronté a un problème sous IE7 (pas pu tester sous IE6 encore).
J'utilise le diaporama Easy Slider1.5 j'ai rajouté à mon conteneur d'image un div de façon à afficher une légende.
Ce dernier est composé d'un span qui contient un texte placé en haut a gauche et un lien qui est placé en bas à droite du div.

Sous Firefox c'est impeccable par contre sous IE7, j'ai toutes les légendes qui s'affichent les unes a la suite des autres.

Voici la structure HTML

<div id="conteneurGalerie">
<div id="slider">
    <ul>
        <li>
            <img src="images/galerie/photo1.jpg" alt="photo1" />
            <div class="photo-meta-data">
                <span>Photo1.</span><br />
                <a href="" target="_blank" title="photo1">Photo1</a>
            </div>
        </li>
        <li>
            <img src="images/galerie/photo2.jpg" alt="photo2" />
            <div class="photo-meta-data">
                <span>Photo2.</span><br />
                <a href="" target="_blank" title="photo2">Photo2</a>
            </div>
        </li>
    </ul>
</div>
</div>


Et mon code CSS

/* // Slider*/
#conteneurGalerie{
	margin-left:28px;
	position:relative;
}

#slider{
	border:2px solid #ccc;
	
}
#slider ul, #slider li{
	margin:0;
	padding:0;
	list-style:none;
	}
#slider, #slider li{ 
	width:350px;
	height:250px;
	overflow:hidden; 
	
}
/* // Legende*/
.photo-meta-data{
	background: url(./../images/galerie/legende.png) repeat-x;
	height: 47px;
	margin: -47px 0 0 0;
	padding:6px 0 0 5px;
	position: relative;
	z-index: 9999;
	color: white;
	overflow:hidden;
}
.photo-meta-data a{
	position:absolute;
	right:3px;
	bottom:6px;
	padding:0 0 5px 16px;
	background:url(./../images/galerie/loupe12.png) no-repeat 2px 2px;
	
}
.photo-meta-data span{
	color:#CCC;
	font-size: 13px;
	display:block;

}


Si vous pouviez m'aiguiller sur le bug que je rencontre...
Merci
Modifié par yagrasdemonde (06 Apr 2009 - 16:01)
Ok c'est résolu, en fait le problème venait du overflox:hidden;
Il fallait cette propriété à #conteneurGalerie

Merci quand même.
++