[débutante] problème affichage sous Firefox

**silversky** · 16/09/2005, 13h14

Bonjour à tous,

Je rencontre un problème avec un code javascript qui me permet d'ouvrir une petite fenêtre en guise de sous menu.

Je m'explique:

J'ai crée ma page xhtml et tout se passait très bien à l'affichage sur IE et Firefox mais lorsque j'ai rajouté les méta-tags pour terminer cette page,mon code javascript (pour le sous menu) ne fonctionnait plus sous Firefox alors qu'avant tout était parfait.

Je ne comprends pas d'où peut venir cette erreur ,alors si une âme charitable pouvait m'aider,ce serait sympa car je m'y perd d'autant que je n'y comprends rien en Javascript.

Je ne sais pas si le problème provient des méta-tags que j'ai rajouté car c'est le seul élément que j'ai modifié avant de voir ce problème surgir !

voici l'adresse de la page:
http://nickelback.freezee.org/site.htm

voici la page xhtml:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Accueil</title>
<META NAME="description" CONTENT="Tout savoir sur le groupe rock canadien Nickelback.C'est un quatuor composé de Chad Kroeger (chant,guitare),Mike Kroeger (basse),Ryan Peake (guitare,chant) et Ryan Vikedal (batterie).">
<META NAME="keywords" CONTENT="Nickelback,nickelback,chad kroeger,mike kroeger,ryan peake,ryan vikedal,daniel adair,biographie,photos,wallpapers,avatars,vidéos,audios,paroles,traductions,partitions,carte de fans,fanlisting,forum,tournée,discographie,the long road,silver side up,the state,curb,hesher,someday,hero,how you remind me,leader of men,breathe,never again,date de concerts">
<META NAME="dc.keywords" CONTENT="Nickelback,nickelback,chad kroeger,mike kroeger,ryan peake,ryan vikedal,daniel adair,biographie,photos,wallpapers,avatars,vidéos,audios,paroles,traductions,partitions,carte de fans,fanlisting,forum,tournée,discographie,the long road,silver side up,the state,curb,hesher,someday,hero,how you remind me,leader of men,breathe,never again,date de concerts">
<META NAME="subject" CONTENT="Site consacré au groupe canadien Nickelback">
<META NAME="author" CONTENT="Silversky">
<META NAME="copyright" CONTENT="©Silversky">
<META NAME="revisit-after" CONTENT="30 days">
<META NAME="identifier-url" CONTENT="http://nickelback.freezee.org">
<META NAME="reply-to" CONTENT="silversky_1@msn.com">
<META NAME="Robots" CONTENT="index, follow">
<META NAME="Rating" CONTENT="General">
<META NAME="Category" CONTENT="Musique rock">
<META NAME="Page-topic" CONTENT="Homepage">
<META NAME="Generator" CONTENT="notepad">
<META http-equiv="Content-Language" CONTENT="fr">
<META http-equiv="Content-type" CONTENT="text/html;charset=iso-8859-1">
<META NAME="location" CONTENT="France, FRANCE">
<META NAME="expires" CONTENT="never">
<META NAME="Date-Creation-yyyymmdd" CONTENT="20050510">
<META NAME="date-revision-yyyymmdd" CONTENT="20050510">
<META NAME="Distribution" CONTENT="Global">
<META NAME="Audience" CONTENT="General">
<META http-equiv="Content-Script-Type" CONTENT="text/javascript">
<META http-equiv="Content-Style-Type" CONTENT="text/ccs">

<link rel="stylesheet"media="screen"type="text/css"title="Accueil"href="site.css">

<meta http-equiv="Page-Exit" content="revealTrans(duration=2,transition=14)">



<style type="text/css">
.navtext {
width:235px;
font-size:8pt;
font-family:verdana;
border-width:2px;
border-style:outset;
border-color:white;
layer-background-color:black;
background-image:url("images/blue.jpg");
color:black;
}
</style>


<script src="alttxt.js" type="text/javascript"></script>

</head>

<body>



<div id="en_tete">

</div>

<div id="en_tete2">

</div>

<div id="en_tete3">

<p class="liens_haut">
<a href="siteangl.htm"><img src="images/english.jpg"alt="english"title="English Version"class="english"/></a>
<a href="site.htm">Accueil ~</a>
<a href="News.htm">News ~</a>
<a href="Contact.htm">Contact ~</a>
<a href="Liens.htm">Liens ~</a>
<a href="http://www.maxiservices.net/livre/livre-17433-0.html">Guestbook ~</a>
<a href="http://nickelback-belgium.forumactif.com">Forum</a>
<a href="site.htm"><img src="images/french.jpg"alt="french"title="French Version"class="french"/></a>
</p>

</div>

<div id="en_tete4">

</div>



<div id="menu">
<div class="element_menu">
<ul>
<li><a
onmouseover="writetxt('<a href=ChadKroeger.htm>Chad Kroeger</a><br><a href=MikeKroeger.htm>Mike Kroeger</a><br><a href=RyanPeake.htm>Ryan Peake</a><br><a href=RyanVikedal.htm>Ryan Vikedal</a><br><a href=DanielAdair.htm>Daniel Adair (New)</a>');"
onmouseout="writetxt(0)" href="javascript:void(0)">Les membres</a>
</li>
<li><a href="Biographie.htm">Biographie</a></li>
<li><a href="Albums.htm">Albums</a></li>
<li><a href="Singles.htm">Singles</a></li>
<li><a href="Partitions.htm">Partitions</a></li>
<li><a href="DVD.htm">DVD</a></li>
<li><a href="Autres.htm">Autres</a></li>
<li><a
onmouseover="writetxt('<a href=albums/index.html>Photos diverses</a><br><a href=Wallpapers/index.html>Wallpapers divers</a><br><a href=Wallpaperssilversky.htm>Wallpapers personnels</a><br><a href=Avatars/index.html>Avatars</a><br><a href=Maison.htm>La maison de Chad</a>');"
onmouseout="writetxt(0)" href="javascript:void(0)">Galerie</a></li>
<li><a href="Tour.htm">Tour</a></li>
<li><a href="Audios.htm">Audios et vidéos</a></li>
<li><a
onmouseover="writetxt('<a href=Articles.htm>Articles de presse</a><br><a href=Interview.htm>Interviews</a><br>');"
onmouseout="writetxt(0)" href="javascript:void(0)">Média</a></li>
<li><a
onmouseover="writetxt('<a href=Carteindex.htm>Carte de fans</a><br><a href=Sondage.htm>Sondage</a><br><a href=Quizz.htm>Quizz</a><br><a href=Puzzle.htm>Puzzles</a><br><a href=Banniere.htm>Bannières</a><br><a href=Bouton.htm>Boutons</a><br><a href=http://www.ecarteweb.com/carte/selection.php?n=7750&nc=AFbvaoZrK05M6>E-card</a><br><');"
onmouseout="writetxt(0)" href="javascript:void(0)">Fanzone</a></li>
</ul>
<img src="images/guitare3.jpg"alt="guitare"title="guitare"class="guitare"/>

</div>

</div>



<div id="corps">

<object
type="application/x-shockwave-flash" data="Movie1.swf"
class="flash">
<param name="movie" value="Movie1.swf"/>
</object>

<br/><br/><br/>

</div>



<div id="pied_de_page">

</div>
<div id="pied_de_page2">
<p class="fin">Tous les documents du site sont la propriété exclusive de Nickelback ou de leurs créateurs .
</p>

</div>

<div id="navtxt" class="navtext" style="visibility:hidden; position:absolute; top:0px; left:-400px; z-index:10000; padding:10px"></div>



</body>
</html>

Ma page css:

body
{
width:760px;
margin:auto;
background-color:black;
}

/* L'en-tête */

#en_tete
{
width:760px;
height:169px;
background-image:url("images/header.jpg");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}
#en_tete2
{
width:760px;
height:92px;
background-image:url("images/milieu.jpg");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}
#en_tete3
{
width:760px;
height:34px;
background-image:url("images/menuhaut.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
}

#en_tete4
{
width:760px;
height:17px;
background-image:url("images/haut.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}

.lien
{
margin:0px;
padding:0px;
padding-left:220px;
padding-top:5px;
}

/* Le menu */

#menu
{
float:left;
width:120px;
margin:0px;
padding:0px;
}

.element_menu
{
background-image:url("images/fondmenu.gif");
width:154px;
height:768px;
margin:0px;
padding:0px;
}

.liens_haut
{
text-align:center;
margin:0px;
padding:0px;
padding-top:5px;
}

.guitare
{
margin:0px;
padding:0px;
margin-top:30px;
margin-left:30px;

}

/* Quelques effets sur les menus */

a
{
text-decoration:none;
color:white;
font-family:verdana,"Arial Black",Arial,"Comic Sans MS","Trebuchet MS",Serif;
font-size:11px;
}
a:hover
{
text-decoration:none;
color:#6666CC;
font-family:verdana,"Arial Black",Arial,"Comic Sans MS","Trebuchet MS",Serif;
font-size:11px;
}

.element_menu ul
{
list-style-type:none;
padding:10px;
padding-left:40px;
margin:0px;

}

/* Le corps de la page */

#corps
{
margin-left:154px;
color:white;
background-image:url("images/fondsite.gif");
background-repeat:repeat-y;
font-size:14px;
font-family:"Comic Sans Ms",Arial, "Arial Black", "Times New Roman", Times, serif;
}

.flash
{
margin-left:10px;
margin-top:30px;
width:551px;
height:700px;
}

#corps h4
{
color:#6666CC;
text-decoration:underline;
margin:0px;
padding-top:10px;
text-align:center;
font-family:"Comic Sans Ms",Arial, "Arial Black", "Times New Roman", Times, serif;
}

.

#corps p
{
padding-left:30px;
padding-right:50px;
text-align:justify;
}

.lettre:first-letter
{
font-weight:bold;
font-size:1.5em;
}

#pied_de_page
{
width:760px;
height:30px;
background-image:url("images/tampon.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
font-size:0.1em;
}

#pied_de_page2
{
width:760px;
height:50px;
background-image:url("images/footer.gif");
background-repeat:no-repeat;
margin:0px;
padding:0px;
}

.english
{
position:absolute;
top:269px;
left:150px;
border:none;
}

.french
{
position:absolute;
top:269px;
left:745px;
border:none;
}

.fin
{
margin:0px;
padding:0px;
padding-left:80px;
padding-top:15px;
margin:0px;
color:white;
font-family:verdana,"Arial Black",Arial,"Comic Sans MS","Trebuchet MS",Serif;
font-size:12px;
}

Le fameux code javascript:

/**************************************
ALTTXT V1.6
BY: BRIAN GOSSELIN OF SCRIPTASYLUM.COM
***************************************/

var dofade=true; // COMMUTATION DE L'EFFET DE FONDU (POUR IE4+ AND NS6 SEULEMENT)

var centertext=false; // CENTRE LE TEXTE DANS LA BOITE. NE PAS LE MODIFIER DANS "STYLE" A CAUSE DE NS4.
// AUTREMENT LE TEXTE EST JUSTIFIE A GAUCHE.

var xoffset=-250; // NOMBRE DE PIXELS HORIZONTAUX A PARTIR DU CURSEUR

var yoffset=20; // NOMBRE DE PIXELS VERTICAUX A PARTIR DU CURSEUR

var mousefollow=false; // PERMET A LA BOITE DE SUIVRE LE CURSEUR SI " true "SET TO false TO
// METTRE " false " POUR BLOQUER LA BOITE LA OU ELLE APPARAIT INITIALEMENT.

var hideDelay=2000; // DELAIS EN MILLISECONDES ( 1 SECONDE = 1000 MILLISECONDES) ENTRE LE MOMENT OU LE CURSEUR DE LA SOURIS QUITTE LE LIEN
// ET LE MOMENT OU LA BOITE DISPARAIT, SEULEMENT LORSQUE "mousefollow" EST COMMUTE SUR "false".
// CE QUI DONNE LE TEMPS A L'UTILISATEUR DE CLIQUER SUR UN LIEN DANS LA BOITE.

////////////////////////////// NE RIEN EDITER EN DESSOUS DE CETTE LIGNE /////////////////////////////

function altProps(){
this.w3c=(document.getElementById)?true:false;
this.ns4=(document.layers)?true:false;
this.ie4=(document.all && !this.w3c)?true:false;
this.ie5=(document.all && this.w3c)?true:false;
this.ns6=(this.w3c && navigator.appName.indexOf("Netscape")>=0 )?true:false;
this.w_y=0;
this.w_x=0;
this.navtxt=null;
this.boxheight=0;
this.boxwidth=0;
this.ishover=false;
this.ieop=0;
this.op_id=0;
this.oktomove=false;
this.dy=0;
}

var AT=new altProps();

function toggle_centertext(){
centertext=!centertext;
}

function toggle_mousefollow(){
mousefollow=!mousefollow;
}

function toggle_dofade(){
dofade=!dofade;
if(!dofade)AT.ieop=100;
}

function getwindowdims(){
AT.w_y=(AT.ie5||AT.ie4)?document.body.clientHeight:window.innerHeight;
AT.w_x=(AT.ie5||AT.ie4)?document.body.clientWidth:window.innerWidth;
}

function getboxwidth(){
if(AT.ns4)AT.boxwidth=(AT.navtxt.document.width)? AT.navtxt.document.width : AT.navtxt.clip.width;
else if(AT.ie4)AT.boxwidth=(AT.navtxt.style.pixelWidth)? AT.navtxt.style.pixelWidth : AT.navtxt.offsetWidth;
else AT.boxwidth=(AT.navtxt.style.width)? parseInt(AT.navtxt.style.width) : parseInt(AT.navtxt.offsetWidth);
}

function getboxheight(){
if(AT.ns4)AT.boxheight=(AT.navtxt.document.height)? AT.navtxt.document.height : AT.navtxt.clip.height;
else if(AT.ie4)AT.boxheight=(AT.navtxt.style.pixelHeight)? AT.navtxt.style.pixelHeight : AT.navtxt.offsetHeight;
else AT.boxheight=parseInt(AT.navtxt.offsetHeight);
}

function movenavtxt(x,y){
if(AT.ns4)AT.navtxt.moveTo(x,y);
else{
AT.navtxt.style.left=x+'px';
AT.navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(AT.ie5||AT.ie4)return document.body.scrollTop;
else return window.pageYOffset;
}

function getpagescrollx(){
if(AT.ie5||AT.ie4)return document.body.scrollLeft;
else return window.pageXOffset;
}

function writeindiv(text){
if(AT.ns4){
AT.navtxt.document.open();
AT.navtxt.document.write(text);
AT.navtxt.document.close();
}
else AT.navtxt.innerHTML=text;
}

function writetxt(text){
if(dofade && (AT.ie4||AT.w3c))clearInterval(AT.op_id);
if(text!=0){
if(!mousefollow)clearTimeout(AT.dy);
AT.oktomove=true;
AT.ishover=true;
if(AT.ns4)text='<div class="navtext">'+((centertext)?'<center>':'')+text+((centertext)?'</center>':'')+'</div>';
if(AT.w3c||AT.ie4)AT.navtxt.style.textAlign=(centertext)?"center":"left";
writeindiv(text);
if(AT.ns4)AT.navtxt.visibility="show";
else{
AT.navtxt.style.visibility="visible";
AT.navtxt.style.display="block";
}
getboxheight();
if((AT.w3c||AT.ie4) && dofade){
if(AT.ie4||AT.ie5)AT.navtxt.style.filter="alpha(opacity=0)";
if(AT.ns6)AT.navtxt.style.MozOpacity=0;
AT.ieop=0;
AT.op_id=setInterval('incropacity()',50);
}}else{
if(mousefollow)hideAlttxt();
else AT.dy=setTimeout('hideAlttxt()',hideDelay);
}}

function hideAlttxt(){
if(AT.ns4)AT.navtxt.visibility="hide";
else{
AT.navtxt.style.display="none";
AT.navtxt.style.visibility="hidden";
}
movenavtxt(-AT.boxwidth-10,0);
writeindiv('');
}

function incropacity(){
if(AT.ieop<=100){
AT.ieop+=7;
if(AT.ie4||AT.ie5)AT.navtxt.style.filter="alpha(opacity="+AT.ieop+")";
if(AT.ns6)AT.navtxt.style.MozOpacity=AT.ieop/100;
}else clearInterval(AT.op_id);
}

function moveobj(evt){
mx=(AT.ie5||AT.ie4)?event.clientX:evt.pageX;
my=(AT.ie5||AT.ie4)?event.clientY:evt.pageY;
if(AT.ishover && AT.oktomove){
margin=(AT.ie4||AT.ie5)?5:25;
if(AT.ns6)if(document.height+27-window.innerHeight<0)margin=15;
if(AT.ns4)if(document.height-window.innerHeight<0)margin=10;
if(AT.ns4||AT.ns6)mx-=getpagescrollx();
if(AT.ns4)my-=getpagescrolly();
xoff=mx+xoffset;
yoff=(my+AT.boxheight+yoffset-((AT.ns6)?getpagescrolly():0)>=AT.w_y)? -5-AT.boxheight-yoffset: yoffset;
movenavtxt( Math.min(AT.w_x-AT.boxwidth-margin , Math.max(2,xoff))+getpagescrollx(), my+yoff+((!AT.ns6)?getpagescrolly():0));
if(!mousefollow)AT.oktomove=false;
}}

window.onload=function(){
AT.navtxt=(AT.ns4)?document.layers['navtxt']

AT.ie4)?document.all['navtxt']

AT.w3c)?document.getElementById('navtxt'):null;
getboxwidth();
getboxheight();
getwindowdims();
if(AT.ie4||AT.ie5&&dofade)AT.navtxt.style.filter="alpha(opacity=100)";
AT.navtxt.onmouseover=function(){
if(!mousefollow)clearTimeout(AT.dy);
}
AT.navtxt.onmouseout=function(){
if(!mousefollow)AT.dy=setTimeout('hideAlttxt()',hideDelay);
}
if(AT.ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=moveobj;
window.onresize=getwindowdims;
}

Merci pour votre aide

**natah** · 16/09/2005, 13h35

Je me reconnait dans cette sorte de long post. Tu devrais poser simplement ta question sinon, tu risques de ne pas avoir une réponse tout de suite. Enlève les méta tags et réessaie de tester ton code. Si ça marche, c'est certain que le problème vient de là alors

**silversky** · 16/09/2005, 13h58

il est vrai que mon post est un rien trop grand lol surtout qu'il ne m'aura pas fallu beaucoup de réponses pour trouver la solution.
J'ai fait ce que tu m'avais conseillé et ça marche parfaitement maintenant .J'ai simplement enlevé une ou deux lignes de méta-tag qui n'avait guère d'importance.
Merci beaucoup,j'ai tjrs l'habitude de me compliquer l'existence

[débutante] problème affichage sous Firefox

HTML

Discussions similaires

Partager

Partager