Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1394 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  soucis avec firefox

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

soucis avec firefox

n°1330131
Seiyar314
Posté le 22-03-2006 à 12:54:56  profilanswer
 

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 :
  1. function ouverture(num) {
  3. // Booleen reconnaissant le navigateur
  4. isIE = (document.all);
  5. isNN6 = (!isIE) && (document.getElementById);
  7. // Compatibilité : l'objet menu est detecté selon le navigateur
  8. if (isIE) menu =  document.all['menu' + num];
  9. if (isNN6) menu = document.getElementById('menu' + num);
  11. // On ferme tout les menus déjà ouvert
  12. for (i=1;i<=nbTotalMenu;i++) {
  13.  if (i != num) {
  14.   if (isIE) menuDiff =  document.all['menu'+i];
  15.   if (isNN6) menuDiff = document.getElementById('menu'+i);
  16.   if (menuDiff.style.display != "none" ) {
  17.    menuDiff.style.display = "none";
  18.   }
  19.  }
  20. }
  22. // On ouvre ou ferme celui qui vient d'être cliqué
  23. if (menu.style.display == "none" ){
  24.  // Cas ou le tableau est caché
  25.  menu.style.display = "";
  27. } else {
  28.  // On le cache
  29.  menu.style.display = "none";
  31. }
  32. }


 
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 :
  1. function change(cellule,couleurFond,img) {
  2. // Cette fonction modifie la couleur de fond et ajoute une image devant le titre  
  3. cellule.style.backgroundColor = couleurFond;
  4. cellule.style.listStyleImage = img;
  5. }


 
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 :
  1. <table class="sommaire">
  2.                <tr>
  3.        <td class="titre" onclick="ouverture('1')" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">
  4.     <ul>
  5.      <li>
  6.      JEUX VIDEOS
  7.      </li>
  8.     </ul>
  9.    </td>
  10.       </tr>
  11.       <tr class="sousmenu" id="menu1" style="display:none">
  12.        <td>
  13.     <table>
  14.      <tr>
  15.       <td>
  16.        <img src="./imgssite/decoration/sonicboring.gif" alt="alors?">
  17.        </img>
  18.       </td>
  19.      </tr>
  20.          <tr>
  21.           <a href="./jeux_videos.html#sega">
  22.        <td class="soustitre">
  23.        SEGA OLD SCHOOL
  24.        </td>
  25.       </a>   
  26.          </tr>
  27.          <tr>   
  28.       <a href="./jeux_videos.html#videos">
  29.            <td class="soustitre">
  30.        VIDEOS
  31.        </td>
  32.       </a>
  33.          </tr>
  34.      <tr>
  35.       <a href="./jeux_videos.html#musiques">
  36.            <td class="soustitre">
  37.        MUSIQUES
  38.        </td>
  39.       </a>  
  40.          </tr>
  41.          </table>
  42.    </td>
  43.       </tr>
  44. </table>


 
Et maintenant le CSS...

Code :
  1. body {
  2. background-color:#000000;
  3. font-family:"comic sans ms",sans-serif;
  4. font-size: 14px;
  5. color:white;
  6. margin: 0;
  7. padding: 0;
  8. }     
  10. #header {
  11. height: 125px;
  12. background-color: #000000;
  13. text-align:center;
  14. }
  15. #conteneur {
  16. position: absolute;
  17. width: 100%;
  18. background-color:#000000;
  19. }
  20. #centre {
  21. background-color:#000000;
  22. margin-left:20%;
  23. margin-top:1.8%;
  24. }
  25. #gauche {
  26. position: absolute;
  27. left:0;
  28. margin-top:1.5%; 
  29. width: 18%;
  30. }
  31. table.sommaire{
  32. width:180px;
  33. }
  34. td.titre {
  35. font-family: "comic sans ms",sans-serif;
  36. font-size: 12px;
  37. color: white;
  38. background-color: black;
  39. border:2px solid #000085;
  40. cursor: pointer; 
  41. height:48px;
  44. }
  46. td.soustitre {
  47. width:150px;
  48. font-family: "comic sans ms",sans-serif;
  49. font-size:11px;
  50. border:2px solid blue;
  51. color: blue;
  52. background-color: silver;
  53. cursor: pointer;
  54. }
  56. tr.sousmenu{
  57. float:left;
  58. position:absolute;
  59. width:150px;
  60. margin-left:95%;
  61. margin-top:-50%;
  62. z-index:1;
  64. }


 
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.

mood
Publicité
Posté le 22-03-2006 à 12:54:56  profilanswer
 

n°1330140
Shinuza
This is unexecpected
Posté le 22-03-2006 à 13:03:49  profilanswer
 

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.
n°1330150
Seiyar314
Posté le 22-03-2006 à 13:13:41  profilanswer
 

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

n°1330153
Shinuza
This is unexecpected
Posté le 22-03-2006 à 13:18:00  profilanswer
 

Ca t'aiderait toi également hein, tu verrais plus clair dans ton code,et firefox peterait moins son cable. :D
 
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.
n°1330189
Seiyar314
Posté le 22-03-2006 à 13:59:49  profilanswer
 

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 ;)

n°1330481
Shinuza
This is unexecpected
Posté le 22-03-2006 à 19:14:39  profilanswer
 

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.
n°1330878
Seiyar314
Posté le 23-03-2006 à 11:20:06  profilanswer
 

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 :
  1. <ul class="sommaire">
  2. <a href="./accueil.html">
  3. <li class="sommaire" onmouseover="change(this,'BLUE','url(./imgssite/decoration/sonicgo.gif)')" onmouseout="change(this,'BLACK','none')">ACCUEIL</li>
  4. </a>
  5. </ul>

n°1330891
Shinuza
This is unexecpected
Posté le 23-03-2006 à 11:32:14  profilanswer
 

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.
n°1330898
Seiyar314
Posté le 23-03-2006 à 11:36:34  profilanswer
 

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

n°1330914
Shinuza
This is unexecpected
Posté le 23-03-2006 à 11:51:19  profilanswer
 

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.
mood
Publicité
Posté le 23-03-2006 à 11:51:19  profilanswer
 

n°1330928
Seiyar314
Posté le 23-03-2006 à 12:01:41  profilanswer
 

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

Code :
  1. <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.

n°1330938
Shinuza
This is unexecpected
Posté le 23-03-2006 à 12:08:51  profilanswer
 

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.
n°1330944
Seiyar314
Posté le 23-03-2006 à 12:13:31  profilanswer
 

Code :
  1. <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

n°1331674
Seiyar314
Posté le 24-03-2006 à 13:19:51  profilanswer
 

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

n°1332415
cerel
Posté le 26-03-2006 à 12:35:35  profilanswer
 

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 :
  1. <ul class="sommaire">
  2.  <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>
  3.  </ul>


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

Code :
  1. <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
n°1334524
Seiyar314
Posté le 29-03-2006 à 12:28:18  profilanswer
 

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 ;)


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  soucis avec firefox

 

Sujets relatifs
pb de redimensionnement anim flash sous firefox[Bug Firefox]renvoyer un mess d'erreur
css marche sous IE, pas sous firefox, que faire?Petit soucis d'un débutant ...
Icone dans la barre des taches pour IE ou dans l'onglet pour firefoxProblème d'affichage entre Firefox et IE
pb avec dreamweaver MX 2004 et les boutons radio sous firefoxFermer Internet Explorer ou Firefox
Pb Infobulle js seulement sur firefoxPetit soucis de redirection sous Firefox et Opéra
Plus de sujets relatifs à : soucis avec firefox

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.115 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR