Problème de superposition d'éléments sur Firefox et IE [Résolu/Fermé]

Signaler
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
-
 Utilisateur anonyme -
Bonjour à toutes et à tous,

Cela fait bien une semaine que je cherche et tente de réparer un problème d'affichage de superposition d'élément en CSS. Je m'explique : J'affiche sur 'une de mes pages une liste d'affiche de film. Jusque là tout va bien mais, le fait est que je souhaite qu'au survol d'une affiche, le synopsis s'affiche en surimpression sur l'affiche. J'ai codé ce ci :

<li>
	<div class="item">

	<a href="<?php echo $donnees['lien']; ?>"><img class="img" src="<?php echo $donnees['affiche']; ?>" width="185" height="247" /></a>

	<div class="caption" id=<?php echo $id;?>>

   <a  href = "<?php echo $donnees['lien']; ?>" > <?php echo $donnees['Titre'];?> </a>

	<a  href = "<?php echo $donnees['lien']; ?>" ><p> <?php echo $donnees['Synopsis'];?> </p></a>

			</div>
	</div>
</li>


.item {
    width:185px;
    height:247px;       
    margin:5px 5px 5px 0;
   /*overflow:hidden;*/
    /* for child absolute position */
    position:relative;
	z-index: 5;
}

.img {
	
    width:185px;
    height:247px; 
    border:0;
   position:absolute;
	z-index: 5;
}

.caption{
		width:185px;
		height:247px; 
		border:0;
		/*margin:0;*/
		background-color: rgba(240, 239, 232, 0.68);
		color:#fff;
		overflow: hidden;
		font-weight:bold;  
		font-family:arial; 	
		/*text-align: left;*/
		position:absolute;
		display:none;
		filter:alpha(opacity=90);
		-moz-opacity:0.9; 
		-khtml-opacity: 0.9;
		opacity: 0.9;
		z-index: 5;
		}

	.caption a {
		opacity: 1;
		text-align: left;	
		text-decoration:none;
		/* color:#0cc7dd;*/
		color:black;
		font-weight: bold;
		font-size:16px;    
		padding:2px;
		padding-top: 3px;
		display: inherit;
		z-index: 6;
		}

	.caption a:hover{
		opacity: 1;
		text-align: left;
		text-decoration:none;
		/* color:#0cc7dd;*/
		color:black;
		font-weight: bold;
		font-size:16px;    
		padding:2px;
		padding-top: 3px;
		display: inherit;
                z-index: 6;
	}

	.caption p {
		opacity: 1;
		padding:5px;    
		margin:0;
                font-size:13px;
		color: black;
		text-shadow: #FEFEFE 1px 1px, #FEFEFE -1px 1px, #FEFEFE -1px -1px, #FEFEFE 1px -1px;
		font-weight: normal;   
		text-align: left;
		z-index: 6;
		}
		
		.item:hover .caption
		{
			display: inline;
		}


Ce qui marche tout à fait comme il se doit sur google chrome. Sous Mozilla Firefox, il y a un petit bug : en plaçant le curseur de la souris sur la droite d'une affiche, c'est le synopsis de l'affiche de droite qui s'affiche.
Sous IE il y a un bug similaire mais bien plus prononcé et les éléments se déplacent au survol. (lien pour voir de vous même : http://lecinephie.byethost7.com/fantastiques.php )

Je m'en remets donc à vous pour trouver l'origine du problème et le corriger.

Merci de m'avoir lu et de m'avoir consacré de votre temps,

Cordialement,

hharchi9.

2 réponses


Bonjour,

Tu dois respecter les normes W3C.

http://validator.w3.org/

Amicalement
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
Bonjour, tout d'abord merci de votre réponse.

Même en respectant les norme W3C j'ai les mêmes problèmes comme vous pouvez le constatez ici https://lecinephie.byethost7.com/testing.php
Utilisateur anonyme
Le problème de certificat est-il normal ?
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
ah oui j'ai oublié d'enlever le 's' de l'url essayez avec ceci

http://lecinephie.byethost7.com/testing.php

Le problème est-il présent avec une affiche ?
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
Je pense que je vais en rester là pour aujourd'hui et me préparer à une nouvelle journée de cours ! Vive la prépa ^^

Tous les liens que je trouve, ou presque, sur la superposition de div utilisent les attributs position mais ici, on ne peut pas les utiliser sous la menace d'un grand souci de compatibilité... Je reprendrai mes investigations demain, sur ce merci pour tout le temps que vus m'avez accordé ! Bonne nuit !
Utilisateur anonyme
sinon pour moi c'est plus un problème de position absolute relative....
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
Le problème de position est désormais réglé. J'appliquait la propriété position à l'image directement alors qu'il fallait le faire à un div englobant l'image.

Merci encore pour le temps accordé chrissou et bonne continuation !
Utilisateur anonyme
génial ^^ le CSS c'est chiant quand ça fonctionne pas comme on veut....
je me pensais bien à la position ^^

à bientôt