Liste d'images coupées sur IE et Firefox [Résolu/Fermé]

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

J'ai réalisé une liste d'affiches de films qui affichent le synopsis au survol. Cela marche sans aucun problème sur Google chrome, mais je rencontre un souci sur firefox et IE : les affiches sont coupées (seules la partie gauche est visible et décalée. Je pense qu'une image vaut mieux que mille explications, voici ce que j'obtiens : http://www.noelshack.com/2015-13-1427126268-sans-titre.jpg

J'ai essayé de changer des paramètres mais cela ne m'a pas permis d'endiguer le phénomène...

Voici les codes utilisés :

HTML

<div class="item">
<a href="<?php echo $donnees['lien']; ?>"><img class="img" src="<?php echo $donnees['affiche']; ?>" width="185" height="247" onMouseOver="shows(<?php echo $id1;?>)"/></a></a>

<div class="caption" id=<?php echo $id;?> onMouseOut="hides(<?php echo $id1;?>)">

<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>


CSS

.item {

    width:185px;

    height:247px;       

    margin:5px 5px 5px 0;

    /* required to hide the image after resized */

   overflow:hidden;

    /* for child absolute position */

    position:relative;

	z-index: 10;

}

.img {

    border:0;

    /* allow javascript moves the img position*/

   position:absolute;

	z-index: 10;

}

.caption{

	width:185px;

	height:247px;

	background-color: rgba(240, 239, 232, 0.68);

	color:#fff;

	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: 10;

	}

	.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: inherit;

	}

.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: inherit;

}

.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: inherit;

	}


Merci d'avance pour vos réponses,

Cordialement,

hharchi9.

2 réponses

Messages postés
75
Date d'inscription
mercredi 15 décembre 2010
Statut
Membre
Dernière intervention
14 octobre 2015
16
Bonsoir hharchi9,

Il me semble d'après ton code que ton image soit positionnée via du Javascript. Il n'est donc pas possible de vérifier le positionnement de celle-ci sans la partie de code Javascript correspondante.

En revanche tu peux déjà essayer d'enlever la fermeture de ta première balise "a" qui est en double après ton image. Chrome permet se genre d'erreur en les ignorant mais cela ne passe pas partout loin de là ;) Peut-être que cela résoudra ton problème... ^^

--
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
Bonsoir Mirzo,

Tout d'abord un grand merci pour ta réponse. J'ai corrigé le </a> en trop mais le problème est toujours présent. J'avais effectivement oublié de poster le code JS, toutes mes excuses ! Le voici :

// Pour les "vieux" Navigateurs < IE9
if (typeof document.getElementsByClassName!='function') {
    document.getElementsByClassName = function() {
        var elms = document.getElementsByTagName('*');
        var ei = new Array();
        for (i=0;i<elms.length;i++) {
            if (elms[i].getAttribute('class')) {
                ecl = elms[i].getAttribute('class').split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            } else if (elms[i].className) {
                ecl = elms[i].className.split(' ');
                for (j=0;j<ecl.length;j++) {
                    if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
                        ei.push(elms[i]);
                    }
                }
            }
        }
        return ei;
    }
}  

// Masque tous les élements d'une CLASS

function HideAllElemByCLassName(class_name){

  var ArrElem = document.getElementsByClassName(class_name);

   for ( x=0;x<ArrElem.length;x++){

   //console.log(ArrElem[x].id);

   ArrElem[x].style.display = "none";  

   }
}

function shows(id) {

HideAllElemByCLassName("caption");

var objet = document.getElementById(id);

objet.style.display = 'block';

}

function hides(id) {

var objet = document.getElementById(id);

objet.style.display = 'none';

}


Si besoin voici le lien vers l'une de mes listes : http://www.lecinephie.byethost7.com/fantastiques.php
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
J'ai changé de méthode d'affichage des légendes sur les listes ais j'ai un nouveau problème qui apparaît : la légende apparaît décalée sous firefox et ie 11

Voici mon nouveau CSS

.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: 10;*/

		}

	

	.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: inherit;

		}

	.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: inherit;

	}

	.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: inherit;

		}
		
		.item:hover .caption
		{
			display: block;
		}
Messages postés
581
Date d'inscription
mercredi 18 décembre 2013
Statut
Membre
Dernière intervention
2 septembre 2015
19
Le problème est désormais résolu.

La solution est disponible à ce lien : https://forums.commentcamarche.net/forum/affich-31782275-probleme-de-superposition-d-elements-sur-firefox-et-ie