Jump to content

[résolu] pb DOCTYPE, Firefox et DHTML

la_poisse

Recommended Posts

la_poisse Débutant

la_poisse

Posted
Posted

Bonjour à tous !

Je suis en train de m'éverver sur une particularité du fonctionnement de Firefox... J'utilise un script qui s'occupe d'afficher une bulle contenant du texte au passage de la souris au dessus d'un élément (DHTML classique).

Tant que je ne mets pas de DOCTYPE sur ma page, tout fonctionne correctement (aussi bien sur FF qu'IE).

Par contre, dès que je mets un DOCTYPE (que ce soit pour du HTML 4.1 ou du XHTML 1.0) le script ne fonctionne plus de la même façon : ma bulle (qui est un bloc de type <div>) ne veut plus s'afficher ailleurs qu'en haut à gauche de l'écran.

Voici le code HTML, que j'ai simplifié pour l'exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Ma page de tests</title>
<script type="text/javascript" src="./messcripts.js"></script>
<style type="text/css">
body {
font-family: tahoma;
font-size: 11px;
}
a.pic {
color: black;
text-decoration: none;
}
a.pic:hover {
color: #648bcb;
text-decoration: underline;
}
</style>	
</head>

<body>
<script type="text/javascript">InitBulle("white","#316ac5","black",2);</script>
<p><a href="#" class="pic" onmouseover="AffBulle('Information affichée dans une bulle au passage de la souris'); return true;" onmouseout="HideBulle(); return true;">Test d'affichage info-bulle</a></p>
</body>

</html>

... et voici la source : messcripts.js :

//=====================
// Affichage des info-bulles
//=====================
var IB=new Object;
var posX=0;posY=0;
var xOffset=10;yOffset=20;

function AffBulle(texte) {
contenu="<div style=\"border: 1px solid navy; padding: "+IB.NbPixel+"; border-color: "+IB.ColContour+"; background-color: "+IB.ColFond+"; color: "+IB.ColTexte+"; font-family: tahoma; font-size: 11px; font-weight: bold\">"+texte+"</div>";
var finalPosX=posX-xOffset;
if (finalPosX<0) finalPosX=0;
if (document.layers) {
	document.layers["bulle"].document.write(contenu);
	document.layers["bulle"].document.close();
	document.layers["bulle"].top=posY+yOffset;
	document.layers["bulle"].left=finalPosX;
	document.layers["bulle"].visibility="show";}
if (document.all) {
	//var f=window.event;
	//doc=document.body.scrollTop;
	bulle.innerHTML=contenu;
	document.all["bulle"].style.top=posY+yOffset;
	document.all["bulle"].style.left=finalPosX;//f.x-xOffset;
	document.all["bulle"].style.visibility="visible";
}
else if (document.getElementById) {
	document.getElementById("bulle").innerHTML=contenu;
	document.getElementById("bulle").style.top=posY+yOffset;
	document.getElementById("bulle").style.left=finalPosX;
	document.getElementById("bulle").style.visibility="visible";
}
var reg=new RegExp("(<br>)","g");
window.status=texte.replace(reg, " | ");
}

function getMousePos(e) {
if (document.all) {
	posX=event.x+document.body.scrollLeft; //modifs CL 09/2001 - IE : regrouper l'évènement
	posY=event.y+document.body.scrollTop;
}
else {
	posX=e.pageX; //modifs CL 09/2001 - NS6 : celui-ci ne supporte pas e.x et e.y
	posY=e.pageY; 
}
}

function HideBulle() {
if (document.layers) {document.layers["bulle"].visibility="hide";}
if (document.all) {document.all["bulle"].style.visibility="hidden";}
else if (document.getElementById){document.getElementById("bulle").style.visibility="hidden";}
window.status="";
}

function InitBulle(ColTexte,ColFond,ColContour,NbPixel) {
IB.ColTexte=ColTexte;IB.ColFond=ColFond;IB.ColContour=ColContour;IB.NbPixel=NbPixel;
if (document.layers) {
	window.captureEvents(Event.MOUSEMOVE);window.onMouseMove=getMousePos;
	document.write("<layer name='bulle' top=0 left=0 visibility=\"hide\"></layer>");
}
if (document.all) {
	document.write("<div id=\"bulle\" style=\"position:absolute;top:0;left:0;visibility:hidden\"></div>");
	document.onmousemove=getMousePos;
}
else if (document.getElementById) {
	document.onmousemove=getMousePos;
	document.write("<div id=\"bulle\" style=\"position:absolute;top:0;left:0;visibility:hidden\"></div>");
}
}

J'aimerais franchement respecter la norme XHTML. Le code HTML ci-dessus est conforme XHTML 1.0 Strict. Si j'enlève la déclaration du DOCTYPE, ça marche correctement mais le validator me renvoie 1 erreur : il manque la déclaration du type de document.

En utilisant DOCTYPE, le moteur Gecko semble switcher dans un nouveau mode (?) et n'interprète plus le script de la même façon...

Si quelqu'un a déjà eu un antécedent de ce type, ou connaît cette particularité de fonctionnement, je suis preneur !!!

D'avance merci :chinois:

EDIT:

En cherchant un peu, j'ai trouvé quelques éléments de réponse. Apparemment, selon le DOCTYPE, Firefox fonctionne en mode Quirks, Standard ou Almost standard... En gros, si mon DOCTYPE correspond au mode Quirks, la page s'affiche correctement (c'est le cas pour : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">).

Cela dit, j'aimerais bien être compatible XHTML 1.0 Strict, donc si quelqu'un sait comment adapter tout cela au mode Standard, ça m'aiderait bien !

J'ai trouvé cette ressource pour connaître le mode de fonctionnement des navigateurs selon le doctype.

RESOLUTION:

cf. dernier post : il me suffisait de rajouter le "px" pour les mesures de taille des boîtes. Ainsi j'ai pu mettre en haut de ma page mon doctype xhtml1.0 !!!

Link to comment
Share on other sites
la_poisse Débutant

la_poisse

Posted
  • Author
Posted

Bon, j'ai finalement trouvé la réponse à mon problème tout seul, après de longues recherches... comme quoi :zarb:

Pour information (si ça peut aider quelqu'un), le problème venait tout simplement du fait que dans mon fichier messcripts.js, les coordonnées "top" et "left" ne mentionnaient pas les "px".

J'ai donc remplacé les lignes du type :

document.getElementById("bulle").style.top=posY+yOffset;

par :

document.getElementById("bulle").style.top=posY+yOffset+"px";

Bingo ! Me revoilà dans les standards :D

A bon entendeur...

Link to comment
Share on other sites
  • 7 months later...

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...