Liste d'images coupées sur IE et Firefox

Résolu

hharchi9 Messages postés 567 Date d'inscription Statut Membre Dernière intervention -
hharchi9 Messages postés 567 Date d'inscription Statut Membre Dernière intervention - 2 avril 2015 à 18:18

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.

Afficher la suite

A voir également:

Liste d'images coupées sur IE et Firefox
Liste déroulante excel - Guide
Video downloadhelper firefox - Télécharger - Outils pour navigateurs
Telecharger firefox - Télécharger - Navigateurs
Liste déroulante en cascade - Guide
Liste code ascii - Guide

2 réponses

Réponse 1 / 2

Mirzo Messages postés 75 Date d'inscription Statut Membre Dernière intervention 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... ^^

--

hharchi9 Messages postés 567 Date d'inscription Statut Membre Dernière intervention 24

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

Réponse 2 / 2

hharchi9 Messages postés 567 Date d'inscription Statut Membre Dernière intervention 24

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

hharchi9 Messages postés 567 Date d'inscription Statut Membre Dernière intervention 24

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

Discussions similaires

PIX

Méssage Firefox ''Couldn't load XPCOM''

Votre réponse

Discussions similaires