Site boeug sur firefox

Fermé
mett - 6 nov. 2009 à 21:20
 reali12 - 8 nov. 2009 à 22:12
Bonjour,
g un probleme le site que j'ai créer, le souci est que lorsque j'i vais sous firefos les " images survolé " qu'il i a sur le site aparaisse avec un tretiller tout autour alors que sur safari ou internet explorer sa ne le faisai pas.
pour info ces image sous sous format png, peut etre firefox n'aime t'il pas ce format ???

quelqu'un saurai comment resoudre le probleme? , merci d'avance.

19 réponses

monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
6 nov. 2009 à 21:25
C'est très étrange que Firefox te pose des problèmes pour ça... et non, pas de mauvaise gestion du png pour FF.

Pourrais-tu nous montrer ta page ou au moins le css/html ?
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url(pageaccueil.png);
background-repeat:no-repeat;
background-position:top center
}
</style></head>

<body onload="MM_preloadImages('Accueil B.jpg','Projet B.jpg','Location B.jpg','Vente B.jpg','contact B.jpg','Ventes A.jpg','MorceauA.png','ProjetB.png','locations B.jpg','ventes B.jpg','ContactB.png','morceau B.png','accueil B.jpg')">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','MorceauA.png',1)"><img src="MorceauA.png" name="Image1" width="68" height="35" border="0" id="Image1" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','accueil B.jpg',1)"><img src="accueil B.jpg" name="Image8" width="98" height="35" border="0" id="Image8" /></a><a href="projets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','ProjetB.png',1)"><img src="Projet A.jpg" name="Image3" width="98" height="35" border="0" id="Image3" /></a><a href="locations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','locations B.jpg',1)"><img src="Location A.jpg" name="Image4" width="97" height="35" border="0" id="Image4" /></a><a href="ventes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','ventes B.jpg',1)"><img src="Ventes A.jpg" name="Image5" width="97" height="35" border="0" id="Image5" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','ContactB.png',1)"><img src="contact A.jpg" name="Image6" width="97" height="35" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','morceau B.png',1)"><img src="morceau B.png" name="Image7" width="410" height="35" border="0" id="Image7" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</body>
</html>
0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url(pageaccueil.png);
background-repeat:no-repeat;
background-position:top center
}
</style></head>

<body onload="MM_preloadImages('Accueil B.jpg','Projet B.jpg','Location B.jpg','Vente B.jpg','contact B.jpg','Ventes A.jpg','MorceauA.png','ProjetB.png','locations B.jpg','ventes B.jpg','ContactB.png','morceau B.png','accueil B.jpg')">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','MorceauA.png',1)"><img src="MorceauA.png" name="Image1" width="68" height="35" border="0" id="Image1" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','accueil B.jpg',1)"><img src="accueil B.jpg" name="Image8" width="98" height="35" border="0" id="Image8" /></a><a href="projets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','ProjetB.png',1)"><img src="Projet A.jpg" name="Image3" width="98" height="35" border="0" id="Image3" /></a><a href="locations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','locations B.jpg',1)"><img src="Location A.jpg" name="Image4" width="97" height="35" border="0" id="Image4" /></a><a href="ventes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','ventes B.jpg',1)"><img src="Ventes A.jpg" name="Image5" width="97" height="35" border="0" id="Image5" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','ContactB.png',1)"><img src="contact A.jpg" name="Image6" width="97" height="35" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','morceau B.png',1)"><img src="morceau B.png" name="Image7" width="410" height="35" border="0" id="Image7" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</body>
</html>
0
il sufit simplement de rajouter un petit: border:0;
et je crois que le tour et joué. Je te donne le fichier CSS pour que tu comprenne bien:

img
{
border: 0px;
}


voilà!
0
j'ai mit ces image en prechargement c'est peut etre sa ???
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
je doit le rajouté a quel endroit ???
0
tu dois le rajouter dans ton code CSS n'import où (je prend en compte le fait que tu insert tes images dans le code html...).
0
en le metant n importe j'ai essayer sans grande conviction et efectivement sa marche pas
0
oui mais tu l'as bien mis dans le code CSS?
0
oui je l ai mit dans le code css mais il me l'a mit en noir ( je fai sa sur dreamwever ) ce qui veut dire qu'il ne l a pas pris comme une commande
0
je desespere la.... j'ai essayer de le mettre comme remplacement du " border d'avant et sa a pas marcher
0
help me please .........
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
6 nov. 2009 à 23:29
Bon bon... alors on va se lancer dans une bonne petite réforme de ton code...
Première chose à faire, télécharger Notepad++ (par exemple) qui te servira à éditer "en bonne et due forme" tes fichiers. (clic droit sur le fichier html et ouvrir avec... Notepad++)

Ensuite, renommer tout tes fichiers pour qu'il n'y ait pas de caractères spéciaux ni d'espace (donc que des minuscules et des "underscore" (le caractère "_").

Ceci fait, on pourras s'attaquer à l'html/css/javascript.

Tout dabord, tu vires les function MM_swapImgRestore et MM_swapImage et tu corriges tes appels à cette fonction comme ceci :
- au lieu de :
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','MorceauA.png',1)"><img src="MorceauA.png" name="Image1" width="68" height="35" border="0" id="Image1" /></a>

- tu mets :
<a href="#" title=""><img src="MorceauA.png" onmouseout="this.src='MorceauA.png'" onmouseover="this.src='MorceauB.png" width="68" height="35" border="0" /></a>


Bon... fait déjà ça, le reste on verra plus tard ! :D
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
6 nov. 2009 à 23:47
Bon pour que tu aies un exemple j'ai corrigé ta première page :

ancienne version :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body {
background-color: #000000;
background-image: url(pageaccueil.png);
background-repeat:no-repeat;
background-position:top center
}
</style></head>

<body onload="MM_preloadImages('Accueil B.jpg','Projet B.jpg','Location B.jpg','Vente B.jpg','contact B.jpg','Ventes A.jpg','MorceauA.png','ProjetB.png','locations B.jpg','ventes B.jpg','ContactB.png','morceau B.png','accueil B.jpg')">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','MorceauA.png',1)"><img src="MorceauA.png" name="Image1" width="68" height="35" border="0" id="Image1" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','accueil B.jpg',1)"><img src="accueil B.jpg" name="Image8" width="98" height="35" border="0" id="Image8" /></a><a href="projets.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','ProjetB.png',1)"><img src="Projet A.jpg" name="Image3" width="98" height="35" border="0" id="Image3" /></a><a href="locations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','locations B.jpg',1)"><img src="Location A.jpg" name="Image4" width="97" height="35" border="0" id="Image4" /></a><a href="ventes.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','ventes B.jpg',1)"><img src="Ventes A.jpg" name="Image5" width="97" height="35" border="0" id="Image5" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','ContactB.png',1)"><img src="contact A.jpg" name="Image6" width="97" height="35" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','morceau B.png',1)"><img src="morceau B.png" name="Image7" width="410" height="35" border="0" id="Image7" /></a></p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
<p align="center"> </p>
</body>
</html>


nouvelle version :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>index</title>
		<style type="text/css">
		<!--
		body {
		background-color: #000000;
		background-image: url(pageaccueil.png);
		background-repeat:no-repeat;
		background-position:top center
		}
		#main { margin-top:150px; margin-bottom:400px; }
		img { border:0; }
		.center { text-align:center; }
		</style>
	</head>
	<body>
		<div id="main">
			<p class="center">
				<a href="#" title=""><img src="Mmorceau_a.png" width="68" height="35" onmouseover="this.src='morceau_b.png';" onmouseout="this.src='morceau_a.png';" /></a>
				<a href="#" title=""><img src="accueil_a.jpg" width="98" height="35" onmouseover="this.src='accueil_b.png';" onmouseout="this.src='accueil_a.png';" /></a>
				<a href="projets.html" title=""><img src="projet_a.jpg" width="98" height="35" onmouseover="this.src='projet_b.png';" onmouseout="this.src='projet_a.png';" /></a>
				<a href="locations.html" title=""><img src="location_a.jpg" width="97" height="35" onmouseover="this.src='location_b.png';" onmouseout="this.src='location_a.png';" /></a>
				<a href="ventes.html" title=""><img src="ventes_a.jpg" width="97" height="35" onmouseover="this.src='ventes_b.png';" onmouseout="this.src='ventes_a.png';" /></a>
				<a href="contact.html" title=""><img src="contact_a.jpg" width="97" height="35" onmouseover="this.src='contact_b.png';" onmouseout="this.src='contact_a.png';" /></a>
				<a href="#"title=""><img src="morceau_b.png" width="410" height="35" onmouseover="this.src='morceau_a.png';" onmouseout="this.src='morceau_b.png';" /></a>
			</p>
		</div>
	</body>
</html>


...tu vois que c'est beaucoup plus clair et concis !
Si tu veux vraiment, tu peux remettre la fonction de preload... mais si tes images sont bien optimisées ce n'est pas vraiment nécessaire... enfin c'est comme tu veux !

J'ai remplacer tes balises <p> par une <div id="main">, pour retrouver les espaces que te donnaient les <p> il te suffit de jouer avec les valeurs de margin-top et margin-bottom ! Ah oui et j'ai changé le nom de tes images dans une forme plus pratique !

Suis donc cet exemple... et dis nous si tu as encore le même problème !

Remarque : en éditant ton code je me suis aperçu que certaines balises n'étaient pas bien fermée (ou plutot fermée mais pas ouverte => </style> ) ...si ça se trouve ton problème vient de là ! ^^

Voilà, et maintenant tu comprends pourquoi, lorsqu'on a un peu d'expérience dans le sujet, on déteste les éditeur WYSIWYG du type Dreamweaver ! Il génère un code absolument impropre et sur-volumineux ! :D

Bon travail !
0
Comme je disai merci beaucoup j'ai pu reorganiser tout sa un peut mieu mais malheureusement le souci de detourage en pointiller qui se produit sur firefox est toujour present.......
0
au moment du survole i a pas de probleme mais au moment ou je clique dessus les pointiller aparaisse juste avant que le lien ne s'efectue.
pour se qui est de te montrer je sais pas comment on fait pour joindre une image sur se site
0
c vrai que dreamwever est bien pratique quand on debute mais sa fou vite la merde dans le code.
je vai recoriger tout sa et regarder si sa boeug encore.

en tout cas merci beaucoup pour tout sa :-)
0
comme je disai merci beaucoup j'ai pu reorganiser tout sa un peut mieu mais malheureusement le souci de detourage en pointiller qui se produit sur firefox est toujour present.......
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
7 nov. 2009 à 11:29
A quel moment vois-tu ces pointillé ? Au survol, au clic, tout le temps ?
Pourrais-tu nous fournir un screenshot ?

Merci !
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
7 nov. 2009 à 12:12
Pour joindre une image il faut utiliser un site du genre imageshark et placer le lien ici...

Mais pour ton problème, essaye de rajouter ça dans ton style :
a { outline:0; }

0
je suis pas sur de l avoir mit au bon endroit

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index</title>
<style type="text/css">
a { outline:0; }
<!--
body {
background-color: #000000;
background-image: url(pageaccueil.png);
background-repeat:no-repeat;
background-position:top center
}
#main { margin-top:150px; margin-bottom:400px; }
img { border:0; }
.center { text-align:center; }
</style>
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
7 nov. 2009 à 22:39
Si c'est au bon endroit ! ;)

Ca ne fonctionne toujours pas ?
0
non sa marche toujour pas decidement c resistant mdr
0
reali12 > mett
8 nov. 2009 à 22:12
mett , ta solution est simple , au lieu de laisser le dreamweaver faire le lienhypertext du bouton, fais le toi dans le code , a l'ancienne koi, n'oublie pas que dreamwaver doit laisser sa trace sur une page web pour montrer qu'elle a ete faite par ce logiciel, ""pour les controleur koi !!"
donc aprés ke tu place ton image , fais le codage toi meme
et au passage, un pti conseil, tant que t debutant, evite dreamweaver, utilise plutôt notepad++, quand tu metrise , la passe au dreamweaver, pas avant !!
bne chance
0
monkey_monk Messages postés 641 Date d'inscription mercredi 1 juillet 2009 Statut Membre Dernière intervention 10 août 2012 127
8 nov. 2009 à 00:14
Mmmm... bon essaye plutot ça alors :

* { outline:0; }

...et retire l'autre. ;)
0