Site boeug sur firefox

mett -  
 reali12 -
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.
A voir également:

19 réponses

Réponse 1 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
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
mett
 
<!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
Réponse 2 / 19
mett
 
<!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
Réponse 3 / 19
elay
 
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
Réponse 4 / 19
mett
 
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
Réponse 5 / 19
mett
 
je doit le rajouté a quel endroit ???
0
Réponse 6 / 19
elay
 
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
Réponse 7 / 19
mett
 
en le metant n importe j'ai essayer sans grande conviction et efectivement sa marche pas
0
Réponse 8 / 19
elay
 
oui mais tu l'as bien mis dans le code CSS?
0
Réponse 9 / 19
mett
 
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
Réponse 10 / 19
mett
 
je desespere la.... j'ai essayer de le mettre comme remplacement du " border d'avant et sa a pas marcher
0
Réponse 11 / 19
mett
 
help me please .........
0
Réponse 12 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
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
Réponse 13 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
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
mett
 
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
mett
 
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
Réponse 14 / 19
mett
 
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
Réponse 15 / 19
mett
 
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
Réponse 16 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
A quel moment vois-tu ces pointillé ? Au survol, au clic, tout le temps ?
Pourrais-tu nous fournir un screenshot ?

Merci !
0
Réponse 17 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
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
mett
 
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
Réponse 18 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
Si c'est au bon endroit ! ;)

Ca ne fonctionne toujours pas ?
0
mett
 
non sa marche toujour pas decidement c resistant mdr
0
reali12 > mett
 
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
Réponse 19 / 19
monkey_monk Messages postés 641 Date d'inscription   Statut Membre Dernière intervention   131
 
Mmmm... bon essaye plutot ça alors :

* { outline:0; }

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

Discussions similaires

C'est quoi le site qui remplace coco chat
TP3 -
bazfile -

2 réponses
Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse