Firefox 1.5 : mon site déconne

[Newtoon]

Bonjour,

Je viens de lancer le site imaginascience qui propose des articles et actualités en sciences + une boutique où je vends différents objets relatifs aux sciences (disque d'euler, Lévitron etc.)

Je l'avais conçu avec l'usage extensif et unique des CSS et sur les différents navigateurs suivants : IE, Opéra et Firefox.

Puis, j'ai découvert il ya quelques mois qu'une nouvelle version de Firefox arrivait : la version béta était Deerpark. Et là, ils avaient beau dire que c'était le même moteur qu'avant, je voyais bien que non.

En effet, pour mes images, j'utilise une astuce CSS qui me permet de grandir les images instantanément en glissant la souris dessus. Tout marchait bien et puis Firefox 1.5 est arrivé.

Lorsque je passe maintenant la souris sur l'image, le cadre qui entoure l'image grossit mais ne revient pas à la positions initiale. La cata.

C'est le seul navigateur a foutre ma technique par terre

Je cherche de l'aide pour savoir comment corriger ce problème rapidement.

Merci d'avance pour tous les volontaires-experts.

Au fait : mes fichiers CSS sont un peu éparpillés en différents fichiers importés :il faut se préoccuper de texte.css et zoom.css

Modifié 2 Décembre 2005 par NEWTOON

[Loupilo]

Salut,

Je ne comprends pas la façon dont est conçu ton système :

            <div id="zoomb">
              <a href="http://www.liguge.com/historique/rab.html" onclick="window.open('http://www.liguge.com/historique/rab.html'); return false;" title="Cliquer sur l'image pour voir une page sur Rabelais">Photo de Rabelais</a>
            </div>

Où se situe l'appel à l'image ?

Loupilo.

[Newtoon]

Ouais ! ( on a du mal à me pomper les images facilement déjà avec cette méthode)

C'est dans "zoomb" que se situe l'appel à l'image.

Merci d'essayer de m'aider

PS : je dois y aller et ne verrai la réponse que lundi probablement. Je voulais quand même pester contre Firefox avant de partir car il n'est pas normal que l'interprétation des CSS changent au point de foutre en l'air le fonctionnement de certains sites entre chaque version.

Tout le monde "bidouille" plus ou moins et si tous les navigateurs faisaient de même, on se tirerais une balle à chaque chgt de version.

Modifié 2 Décembre 2005 par Newtoon

[Loupilo]

Ben oui mais comment ça dans zoomb ?

C'est ni dans le html ni dans le css...

Bon sinon c'est vrai que je ne comprend pas pourquoi l'état initial n'est pas repris, faudrait que je trouve l'appel à l'image pour chercher plus loin... mais ça paraît mal parti

Loupilo.

[Monique]

Bonjour,

Je n'ai pas le temps d'analyser cela en détail, mais voilà la liste des erreurs signalées dans la console JavaScript :

Erreur : Une fin de valeur pour la propriété était attendue, mais « auto » a été trouvé.  Erreur d'analyse de la valeur pour la propriété « padding ».  Déclaration abandonnée.

Fichier source : http://www.imaginascience.com/cssglobal/texte.css

Ligne : 506

Erreur : Erreur d'analyse de la valeur pour la propriété « padding ».  Déclaration abandonnée.

Fichier source : http://www.imaginascience.com/cssglobal/texte.css

Ligne : 838

Erreur : Identifiant pour un sélecteur de classe attendu, mais «  » trouvé.  Jeu de règles ignoré suite à un mauvais sélecteur.

Fichier source : http://www.imaginascience.com/cssglobal/zoom.css

Ligne : 423

Erreur : Une fin de valeur pour la propriété était attendue, mais « auto » a été trouvé.  Erreur d'analyse de la valeur pour la propriété « padding ».  Déclaration abandonnée.

Fichier source : http://www.imaginascience.com/cssglobal/retournormal.css

Ligne : 281

Erreur : Une fin de valeur pour la propriété était attendue, mais « auto » a été trouvé.  Erreur d'analyse de la valeur pour la propriété « padding ».  Déclaration abandonnée.

Fichier source : http://www.imaginascience.com/cssglobal/hi...sgroscaract.css

Ligne : 605

Erreur : Une fin de valeur pour la propriété était attendue, mais « auto » a été trouvé.  Erreur d'analyse de la valeur pour la propriété « padding ».  Déclaration abandonnée.

Fichier source : http://www.imaginascience.com/cssglobal/hi...tgroscaract.css

Ligne : 589

Il serait bon aussi de corriger les erreurs du type balises non fermées ou mal imbriquées.

Effectivement, Firefox est moins permissif à l'égard de certaines erreurs.

Apparemment cela n'a pas encore été répété suffisament : un des intérêts de veiller à produire un code valide, c'est d'en assurer la pérennité... la preuve semble-t-il

[Dudu]

Salut,

plusieurs choses:

• ExplorerWin, Opera, et Firefox ne sont pas les seuls navigateurs au monde (je sais que tu le sais, mais il est toujours bon de rappeler des évidences )
  
• Firefox 1.5 n'est pas du tout le seul navigateur à afficher ton site de manière explosive, sois rassuré à ce propos: y'en a bien 4 ou 5.
  Safari (ou des navigateurs exploitant son moteur), par exemple, qui est mon navigateur détruit la page d'entrée de jeu.
  
• Du coup, ton lien d'accessibilité me laisse rêveur: on y parle des mal-voyants mais moi qui ait 10/10 à chaque oeil je n'arrive même pas à lire ton site correctement. On y parle des navigateurs récents (1ère version de Safari: 2001, il y a donc bientôt 5 ans) mais le mien ne semble pas avoir été pris en ligne de compte. On y demande de ne pas descendre de résolution d'écran sous Internet Explorer: et si j'en ai envie je fais quoi ? et si j'avais une mauvaise vue, que je connais pas de logiciels de loupe et que je surfe en 640 sous IE Windows ? Quant aux fautes d'orthographe, c'est peut-être un détail mais çà joue son (tout) petit rôle dans l'accessibilité: en tous cas il n'est pas reccommandé d'en faire car la lecture devient moins fluides Les textes défilants, dans leur genre, sont également peu conseillés tant en accessibilité qu'en ergonomie.
  
• "vos commentaires sur le (site)" ne passe pas le test du lecteur vocal..
  
• (j'en arrive à ton problème) Tes CSS sont trop éparpillées, et "#zoomb a" est défini 2 fois, et surtout son image d'arrière plan est défini 2 fois à 2 endroits différents. Pourquoi mettre un "background: url()" vide ? C'est typiquement le truc sur lequel un navigateur va se vautrer parce que si certains navigateurs refusent de lire un élément vide, certains essaient en donnant à ce "vide" la valeur null:. Donc imagine ensuite le bordel que va mettre un "background: url(null:) no-repeat top left" dans ta CSS
  
• "padding: 0px 0px 0px 0px" c'est trop long. C'est un exemple mais tu peux aisément raccourcir tes feuilles de style en supprimant les redondances, les formes non-abrégées, etc..
  
• Essaie de placer une certaine sémantique dans ton code (sinon les beaux discours sur le w3c sonnent faux). Exemple:
  <span class="italique"> qui peut être remplacé par un <em> ou éventuellement un <em class="quelquechose">
  <h1><déluge de span>Bonjour</déluge de span></h1> qui peut être viré et replacé par un <h1>Imaginascience</h1> d'ailleurs çà t'aidera beaucoup plus pour ton référencement que des balises meta Revisit-After que plus aucun moteur ne daigne lire depuis des années
  <span class="gras"> qui peut être remplacé par un <strong> ou éventuellement un <strong class="quelquechose">
  <span class="grasetimportant"> qui peut être remplacé par un <em><strong> ou éventuellement .... etc ..
  <p><br /><span class="date">..</span><span class="lettre1">..</span>..<p>
  qui peut être remplacé par un <h4></h4><p></p> avec en CSS un margin-bottom pour le h4 et un :first-letter pour le p
  Quant aux avalanches de nbsp, une simple règle nowrap et le tour est joué
  

En bref, revois un peu ton code, je pense sérieusement que ce pauvre Firefox n'est pas vraiment pas en cause dans ton problème.

J'allais oublier le principal Ban Comic Sans MS.

[destroyedlolo]

Ouai, je confirme qu'il n'y a pas que FF 1.5 qui n'aime pas.

Mon Netscape 7 sous Solaris 8 plante lamentablement ...

[Newtoon]

Je remercie beaucoup Dudu

Effectivement, comme je suis un pur autodidacte bien seul, j'ai fait selon ma sauce.

Tous les points relevés me paraissent forts à propos.

Je m'excuse des fautes d'orthographe. J'aimerai disposer d'un correcteur orthographique pour empêcher celles-ci autant que possible. Je vais me lancer dans une grande vérif bientôt (mais j'ai que 2 mains).

Bon, le plus grave dans cette réponse est que certains navigateurs ne passent pas bien. Je n'ai pas la posssibilité (sans vous), je crois, de tester tous les navigateurs, en particulier sous Mac (m'avertir si on peut).

Il y a encore peu, je testais avec Nestscape (win) et tout se passait plutôt bien.

Il est très difficile de satisfaire toutes les résolutions. Très peu de gens surfent en 640 px, même ma femme qui est lourdement handicapée visuelle, pour une simple raison : énormément de sites prévoient de fonctionner à partir du 800*600 (sinon, usage extensif du curseur latéral). Mon site est cependant "visible en 640px (il pourrait l'être mieux, je vous l'accorde).

Je ne connais pas bien le test du lecteur vocal (des précisions) mais je vais noter qu'il faut que j'améliore l'accès aux commentaires

Concernant ma méthode pour mettre du gras, cela provient d'un choix (séparation totale contenu et forme) et je trouve absolument pas que ce soit gênant en aucun point. Moi, je m'y fais très bien et personne d'autres ne travaille sur mon code (sauf vous et je vous en remercie encore).

Les <spans> m'aident beaucoup pour faire des petites modifications à la volée. Je n'ai pas envie (et je trouve cela illogique) de créer pleins de <h1> différents selon que j'ai besoin de changer une petite couleur ou de grossir les caractères. Je conçois par contre que cela pourrait embêter mon référencement (mais jamais entendu parler). En tout cas, comparé à pleins de sites de pros, la plupart des pages de mon site valide : donc l'enchaînement de spans n'est pas répréhensible.

Encore une fois, ce que je n'aime pas, c'est que l'ancien Firefox ne posait pas de problèmes avec les images et tout d'un coup, si.

On a chacun ses recettes car on n'est pas des robots ou tous des Pros qui ne faisont que de la création de site web à longueur de journée : si un truc marche un jour, il faut que les versions suivantes le fassent marcher aussi ! En général, les concepteurs de navigateurs y font attention mais voilà une preuve manifeste qu'ils ont oubliés un truc là.

De plus, si le problème se pose là, il ne se pose pas avec IE et Opéra. Cela montre bien que mon code n'est pas si pourri que ça.

Je vais revoir ce qui va pas aujourd'hui.

Détail en passant : j'ai toujour lu que le :first-letter n'est pas compatible avec tous les navigateurs. Non ?

Sinon, au fait, c'est quoi cette console Javascript qu'utilise Monique ?

Et j'ai oublié de remercier encore tout le monde pour les critiques constructive.

Même si je suis pas toujours d'accord (ce serait trop facile ), elles me font réfléchir à comment améliorer certains points. Encore merci.

Au fait, je fais des corrections de mon CSS sur la W3C.

Que signifie ? :

"Ligne : 45 (Level : 1) Vous n'avez pas de couleur de fond définie avec votre couleur : #centercont q "

J'ai ce type d'avertissement plein de fois...

Il faut que je mette un background-color partout ?

<modérateur: merci d'utiliser la fonction Éditer, 4 messages au lieu d'un c'est beaucoup trop >

Modifié 5 Décembre 2005 par Loupilo