Aller au contenu

[résolu] pb DOCTYPE, Firefox et DHTML

la_poisse

Par la_poisse
dans Programmation et Lignes de code

Messages recommandés

la_poisse Débutant

la_poisse

Posté(e)
Posté(e)

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 !!!

Lien vers le commentaire
Partager sur d’autres sites
la_poisse Débutant

la_poisse

Posté(e)
  • Auteur
Posté(e)

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...

Lien vers le commentaire
Partager sur d’autres sites
  • 7 mois après...

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...