soucis avec firefox

Marsh Posté le 22-03-2006 à 12:54:56

Bonjour!

J'ai plein de problemes d'affichage avec firefox alors que sous IE tout passe bien... En fait, cela concerne un menu utilisant du javascript ainsi que du CSS.
Le plus gros soucis c'est que sous firefox, à chaque fous qu'on clique sur un element du menu, les autres elements descendent d'un cran...
Ci-joint les différents codes, et pour voir de quoi il retourne exactement :
http://pierrestory.free.fr/

Code :

function ouverture(num) {
// Booleen reconnaissant le navigateur
isIE = (document.all);
isNN6 = (!isIE) && (document.getElementById);
// Compatibilité : l'objet menu est detecté selon le navigateur
if (isIE) menu = document.all['menu' + num];
if (isNN6) menu = document.getElementById('menu' + num);
// On ferme tout les menus déjà ouvert
for (i=1;i<=nbTotalMenu;i++) {
if (i != num) {
if (isIE) menuDiff = document.all['menu'+i];
if (isNN6) menuDiff = document.getElementById('menu'+i);
if (menuDiff.style.display != "none" ) {
menuDiff.style.display = "none";
}
}
}
// On ouvre ou ferme celui qui vient d'être cliqué
if (menu.style.display == "none" ){
// Cas ou le tableau est caché
menu.style.display = "";
} else {
// On le cache
menu.style.display = "none";
}
}

Ce code c'est pour un autre probléme, sous IE en passant la souris sur les elements du menu il y a une une image qui apparait à côté de l'élément, mais pas sour firefox...

Code :

function change(cellule,couleurFond,img) {
// Cette fonction modifie la couleur de fond et ajoute une image devant le titre
cellule.style.backgroundColor = couleurFond;
cellule.style.listStyleImage = img;
}

Une partie du code HTML, d'ailleurs un autre probléme lol, apparament firefox n'accepte pas les ancres sur les balises <td>, parce que sur IE le lien se fait mais pas sous firefox...

Code :

<table class="sommaire">
<tr>
<td class="titre" onclick="ouverture('1')" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">
<ul>
<li>
JEUX VIDEOS
</li>
</ul>
</td>
</tr>
<tr class="sousmenu" id="menu1" style="display:none">
<td>
<table>
<tr>
<td>
<img src="./imgssite/decoration/sonicboring.gif" alt="alors?">
</img>
</td>
</tr>
<tr>
<a href="./jeux_videos.html#sega">
<td class="soustitre">
SEGA OLD SCHOOL
</td>
</a>
</tr>
<tr>
<a href="./jeux_videos.html#videos">
<td class="soustitre">
VIDEOS
</td>
</a>
</tr>
<tr>
<a href="./jeux_videos.html#musiques">
<td class="soustitre">
MUSIQUES
</td>
</a>
</tr>
</table>
</td>
</tr>
</table>

Et maintenant le CSS...

Code :

body {
background-color:#000000;
font-family:"comic sans ms",sans-serif;
font-size: 14px;
color:white;
margin: 0;
padding: 0;
}
#header {
height: 125px;
background-color: #000000;
text-align:center;
}
#conteneur {
position: absolute;
width: 100%;
background-color:#000000;
}
#centre {
background-color:#000000;
margin-left:20%;
margin-top:1.8%;
}
#gauche {
position: absolute;
left:0;
margin-top:1.5%;
width: 18%;
}
table.sommaire{
width:180px;
}
td.titre {
font-family: "comic sans ms",sans-serif;
font-size: 12px;
color: white;
background-color: black;
border:2px solid #000085;
cursor: pointer;
height:48px;
}
td.soustitre {
width:150px;
font-family: "comic sans ms",sans-serif;
font-size:11px;
border:2px solid blue;
color: blue;
background-color: silver;
cursor: pointer;
}
tr.sousmenu{
float:left;
position:absolute;
width:150px;
margin-left:95%;
margin-top:-50%;
z-index:1;
}

Si quelqu'un pouvait m'aider à comprendre ce qu'il se passe, dsl pour le code, j'ai l'impression que c'est un gros bordel :sweat: ...
Merci pour votre aide.

Reply

Marsh Posté le 22-03-2006 à 12:54:56

Reply

Marsh Posté le 22-03-2006 à 13:03:49

La conception de ta page est préhistorique, tu pourrais faire plus simple et plus compatible en retapant un peu ton code.

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 22-03-2006 à 13:13:41

Lol merci, c'est clair comme réponse.

Reply

Marsh Posté le 22-03-2006 à 13:18:00

Ca t'aiderait toi également hein, tu verrais plus clair dans ton code,et firefox peterait moins son cable.

Mais fais comme tu veux, c'est pas un problème pour moi :jap:

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 22-03-2006 à 13:59:49

Je veux bien te croire, mais tu pourrais me donner des conseils au moins...
C'est la page html qui est préhistorique lol?
Je ne dois pas me servir des tableaux?
Merci pour ton aide

Reply

Marsh Posté le 22-03-2006 à 19:14:39

Les tableaux sont normalement utilisés pour la mise en forme de données tabulaires.
Donc un tableau a entrées avec données pouvant être lu par ciblage.

Ici tu t'en sers pour la mise en page, et :

-Ca alourdit ton code
-Ca le rends difficilement accessible
-Ca peut créer des problèmes

Tu dois pouvoir trouver une méthode pour nettoyer ton code, voici quelques sites à lire :

http://openweb.eu.org/articles/problemes_tableaux/

Tu as d'autres articles sur la mise en page et le code dans CSS et XHTML.

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 23-03-2006 à 11:20:06

Salut!

Suivant tes conseils, je refais le menu sans tableaux.
Est-ce que tu sais pourquoi firefox ne prend que le texte comme lien alors que IE prend tout l'élément même le cadre qui est autour :??:

Code :

<ul class="sommaire">
<a href="./accueil.html">
<li class="sommaire" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">ACCUEIL</li>
</a>
</ul>

Reply

Marsh Posté le 23-03-2006 à 11:32:14

Oui, c'est parce que la bonne syntaxe est <li><a></a></li> :jap:

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 23-03-2006 à 11:36:34

Donc il n'est pas possible que le lien soit l'élément <li> en entier (avec le cadre)?

Reply

Marsh Posté le 23-03-2006 à 11:51:19

Si tu veux faire réagir tout le cadre ta méthode fonctionnera de toute manière dès que le pointeur sera dans la zone du cadre.

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 23-03-2006 à 11:51:19

Reply

Marsh Posté le 23-03-2006 à 12:01:41

Tu veux dire que ce que j'ai écrit :

Code :

<li class="sommaire" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">ACCUEIL</li>

devrait marcher?
Parce que avec firefox ça ne marche pas...
Merci pour ton aide.

Reply

Marsh Posté le 23-03-2006 à 12:08:51

Oui, mais il faut quand même que tu mettes un lien sur accueil.

C'est le passage dans la zone <li> qui déclenche le changement de couleur, mais le clique sur le lien qui dirige l'utilisateur

---------------
Mains power can kill, and it will hurt the entire time you’re dying from it.

Reply

Marsh Posté le 23-03-2006 à 12:13:31

Code :

<a href="./accueil.html"><li class="sommaire" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">ACCUEIL</li></a>

Cela ne fonctionne pas avec firefox, avec IE je peux cliquer sur tout l'élément mais avec firefox il faut absolument cliquer sur les caractères...
Là j'ai mis un lien bidon si tu veux voir.
http://pierrestory.free.fr

Reply

Marsh Posté le 24-03-2006 à 13:19:51

Quelqu'un aurait t'il une idée?

Reply

Marsh Posté le 26-03-2006 à 12:35:35

Je constate que tu declares ta page xhtml 1.1, mais cette derniere n'est meme pas valide.
La rendre valide serait deja un premier pas (mais qui risque de ne pas corriger les problemes de ton menu).

Ensuite concernant ton menu, la syntaxe du premiere element est fausse.
Tu as mis :

Code :

<ul class="sommaire">
<a href="http://teamathena.free.fr"><li class="sommaire" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">ACCUEIL</li></a>
</ul>

Comme te l'a deja dit Shinuza, la bonne syntaxe est :

Code :

<ul><li><a></a></li></ul>

Edit : Tu sais, tu n'es pas oblige de fermer la liste en plein milieu du menu, tu peux tres bien n'utiliser qu'une seule liste pour tout le menu. Donc qu'un seul "ul" avec plein de "li" dedans.

Enfin, ton probleme de "lien ne prennant pas toute la place" est facilement resolvable grace aux css.
Le lien ne prends pas toute la place, car "a" est un element inline. Par consequent sa largeur depends du texte.
Si tu veux qu'il prenne toute la place disponible, tu dois le transformer en element block.
Pour cela, un simple "display : block" place au bon endroit devrait suffire pour resoudre ton probleme.

Message édité par cerel le 26-03-2006 à 12:37:01

Reply

Marsh Posté le 29-03-2006 à 12:28:18

Merci Cerel pour ta réponse

Si j'ai fermé la liste <ul></ul> dans le menu c'est pour pouvoir séparer d'un espace certaines rubriques.
Sinon même en se servant du css pour mettre l'élément <a> en type block cela ne régle pas mon problème...

Dis moi ce que je dois corriger pour rendre la page valide en xhtml...
je mettais servi du validateur w3 quand c'était mon ancien menu, et le résultat était que la page était valide...

Merci de ton aide

Reply

soucis avec firefox

Sujets relatifs:

Leave a Replay