Sujet Précédent Sujet Suivant

Liste d'images coupées sur IE et Firefox

Résolu/Fermé
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 - 23 mars 2015 à 17:03
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 - 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.
A voir également:

2 réponses

Réponse 1 / 2
Mirzo Messages postés 75 Date d'inscription mercredi 15 décembre 2010 Statut Membre Dernière intervention 14 octobre 2015 16
Modifié par Mirzo le 23/03/2015 à 21:53
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... ^^

--
0
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
Modifié par hharchi9 le 23/03/2015 à 23:02
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
0
Réponse 2 / 2
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
26 mars 2015 à 17:54
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;
		}
0
hharchi9 Messages postés 567 Date d'inscription mercredi 18 décembre 2013 Statut Membre Dernière intervention 1 juillet 2015 24
2 avril 2015 à 18:18
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
0

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?
Raven -
bonjou -

9 réponses
Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Annuaire inversé liste rouge
caro2lille -
gwendolyne72 -

13 réponses
Formule magique excel??????
sexy_miss -
Raymond PENTIER -

13 réponses