Discussion :

[Becafuel]

Bonjour,

Je suis en train de passer mon site en xhtml1.0 Transitionnal et je viens de découvrir un souci avec Firefox.
Voici la page qui me pose problème : http://www.lsp-fr.com/loc_membres.php

Sous IE, le positionnement du petit cadre est bon (il suit la souris), alors qu'avec FF, il reste bloqué dans le coin droit de ma table
Or, tout cela fonctionne bien si je mets une DTD HTML 4.01

Voici le source du Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
    Xoffset= 20;    // modify these values to ...
	Yoffset= -70;    // change the popup position.
 
	var old,skn,iex=(document.all),yyy=-1000;
 
	var ns4=document.layers
	var ns6=document.getElementById&&!document.all
	var ie4=document.all
 
	if (ns4)
		skn=document.dek
	else if (ns6)
		skn=document.getElementById("dek").style
	else if (ie4)
		skn=document.all.dek.style
	if(ns4)document.captureEvents(Event.MOUSEMOVE);
	else{
		skn.visibility="visible"
		skn.display="none"
	}
	document.onmousemove=get_mouse;
 
	function popup(title,msg,bak){
 
        var content="<div id='dek_titre'>"+title+"</div>"+
					"<div id='dek_corps'>"+msg+"</div>";
		var content2="<table width=180 cellpadding=2 cellspacing=1 bgcolor=#3F6391>"+
					 "<tr bgcolor=#A7BED7><td height=10 align=center><b><font face=\"arial\" size=2 color=#FFFFFF>"+title+"</font></b></font></td></tr>"+
					 "<tr bgcolor=#F4F4F4><td valign=top style='text-align:center;'><FONT face=Verdana,Helvetica COLOR=black><b>"+msg+"</b></FONT><br><br></td></tr>"+
				 "</table>";
 
		yyy=Yoffset;
		if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible"}
		if(ns6){document.getElementById("dek").innerHTML=content;skn.display=''}
		if(ie4){document.all("dek").innerHTML=content;skn.display=''}
	}
 
	function get_mouse(e){
		var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
		skn.left=x+Xoffset;
		var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
		skn.top=y+yyy;
	}
 
	function kill(){
		yyy=-1000;
		if(ns4){skn.visibility="hidden";}
		else if (ns6||ie4)
		skn.display="none"
	}

Le morceau de feuille de style concerné :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#dek{
width:180px;
POSITION:absolute;
VISIBILITY:hidden;
Z-INDEX:1;
}
 
#dek_titre{
background:#A7BED7;
text-align:center;
font-weight:bold;
font-family:Arial;
font-size:12px;
color:#FFFFFF;
}
 
#dek_corps{
padding:10px 2px 10px 2px;
background:#F4F4F4;
text-align:center;
font-weight:bold;
font-family:Verdana,Helvetica;
font-size:10px;
color:#000000;
}

et une ligne php qui appelle le tout :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "<AREA SHAPE=\"polygon\" COORDS=\"330,138,330,138,337,120,338,119,348,125,348,142,349,146,346,152,341,153,338,151,338,149,334,147,334,142,330,138\" target=\"_self\" HREF=\"num_departement.php?num_dept=68\" ONMOUSEOVER=\"popup('Haut-Rhin (68)','".compte('68')."<br />".comptemagFR('68')."<br />".compteclubFR('68')."','#04307b');\" ONMOUSEOUT=\"kill();\">\n";

J'ai posté ici car la différence de comportement est liée (visiblement, mais je peux me tromper) au changement HTML->XHTML. Désolé si ce n'est pas le bon endroit.
Egalement, comme je suis un brin "militant", le fait que la page s'affiche mal sous IE ne me gêne pas

[siddh]

essayes avec document.documentElement au lieu de document.body pour tes scrolls

[Becafuel]

essayes avec document.documentElement au lieu de document.body pour tes scrolls

Idem

[siddh]

et avec event.clientX au lieu de event.x (pareil pour les y)

[javatwister]

dacodac!

[Becafuel]

Hélas non

Mais j'avais déjà modifié le .js auparavant, en testant d'autres méthodes, d'ailleurs. La récupération des coordonnées de la souris n'est pas le souci, visiblement, d'autant que si je change la DTD pour passer en HTML 4.01, tout fonctionne sans modif.

Il y a deux éventualités :
- soit un mauvais passage des coordonnées au style, mais je ne pense pas vu que ça fonctionne avec IE
- soit une différence d'interprétation du style à cause de la DTD xhtml. Et uniquement sous FF. Serait-ce FF qui respecte "strictement" quelque chose que j'ai mal codé ou IE qui fait "comme ça devrait faire même si c'est mal écrit" ?

Je suis un peu à court d'idées, là

Pour info et exemple, la page suivante est correcte : http://www.lsp-fr.com/loc_membres_bis.php
J'ai simplement mis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tout le reste du code est strictement identique. On peut malgré tout constater quelques différences d'interprétation car l'affichage n'est pas strictement identique, lui

[siddh]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

skn.left=x+Xoffset+"px";

si tu ne met pas px firefox ne comprendra pas

[Becafuel]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

skn.left=x+Xoffset+"px";

si tu ne met pas px firefox ne comprendra pas

Damned

Ca fonctionne très bien ! Et maintenant que tu me le dis, je me souviens avoir fait des modifs dans ce sens sur la feuille de style pour la même raison Trop nul. Je vais aller sucer quelques allumettes

Au moins on tombe dans la deuxième éventualité Mais c'est curieux que ce comportement se révèle à ce moment-là... pourquoi en html il comprend et pas en xhtml ?

En tout cas, merci beaucoup !

[siddh]

de rien, penses juste a mettre