Discussion :

[guiomb]

Bonjour,

Je suis graphiste, et pas du tout formé pour le web à la base.
Je tente depuis quelques semaines de faire mon site, et aujourd'hui j'ai un soucis : le défilement de mes photos (par previous et next) est buggé sur firefox (un clic sur deux, il y a un vide, pas d'image...)

Voici mon site : http://www.guillaume-b.com/

Je l'ai fait en piquant des css et javascripts existants sur indexhibit...
Savez-vous pourquoi ça fonctionne bien sur safari, google chrome, mais pas sur firefox ?

Merci d'avance !

[SpaceFrog]

un début de réponse:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
Result: 19 erreurs / 0 avertissements
 
line 21 column 9 - Erreur: required attribute "type" not specified
line 65 column 129 - Erreur: required attribute "alt" not specified
line 65 column 133 - Erreur: end tag for "img" omitted, but OMITTAG NO was specified
line 65 column 73 - Info: start tag was here
line 66 column 14 - Erreur: an attribute value must be a literal unless it contains only name characters
line 66 column 25 - Erreur: end tag for "font" omitted, but OMITTAG NO was specified
line 66 - Info: start tag was here
line 68 column 10 - Erreur: name start character invalid: only S separators and TAGC allowed here
line 68 column 10 - Erreur: end tag for element "font" which is not open
line 108 column 54 - Erreur: required attribute "alt" not specified
line 108 column 58 - Erreur: end tag for "img" omitted, but OMITTAG NO was specified
line 108 column 3 - Info: start tag was here
line 111 column 23 - Erreur: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
line 111 column 72 - Erreur: end tag for "font" omitted, but OMITTAG NO was specified
line 111 column 3 - Info: start tag was here
line 113 column 117 - Erreur: an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified
line 113 column 142 - Erreur: end tag for "font" omitted, but OMITTAG NO was specified
line 113 column 97 - Info: start tag was here
line 114 column 3 - Erreur: end tag for element "p" which is not open
line 133 column 91 - Erreur: document type does not allow element "body" here
line 134 column 313 - Erreur: required attribute "alt" not specified
line 142 column 3 - Erreur: end tag for element "p" which is not open
line 148 column 6 - Erreur: end tag for "div" omitted, but OMITTAG NO was specified
line 120 - Info: start tag was here
line 148 column 6 - Erreur: end tag for "div" omitted, but OMITTAG NO was specified
line 119 - Info: start tag was here

rajoute un type à ta balise script
deux balises body
et de nombreuses balise mal balancées (balise ouvrante / balise fermante)
de plus le href ne sont pas inhiber et la page se recharge à chaque fois ...

Je dirais que ce qui est étonnant est qu'il ne buggue pas sur les autres navigateurs

[guiomb]

Ah merci beaucoup !
Je suis entrain d'essayer de remédier à tout ça !

Mon index semble fonctionner sur tous les navigateurs ceci dit (en apparence et fonctionnalité en tout cas).

Mon soucis majeur est celui ci : Page avec images en JS

Sur Chrome ou Safari, la page s'affiche très bien avec un contenu de 26 images (tout va bien !), mais sur Firefox, le contenu passe à 53, et chaque image apparaît après deux clics sur "next" au lieu d'un seul...

Je cherche à trouver une solution pour ça...

Merci beaucoup

[guiomb]

J'ai tenté de résoudre seul mon problème, et j'ai quasiment réussi :

Mon ancienne page qui ne marche pas sur Firefox : Bugg images

Et ma nouvelle qui fonctionne sur Firefox, mais nouveau soucis d'interlignage : Bugg interlignage

Les attributs du texte de la div de droite sont les mêmes que la div de gauche pourtant... (même chemin dans mon css).
Et du coup, il y a du texte par dessus mon image, mais j'imagine qu'en réglant le reste, ça rentrera dans l'ordre ?

Merci

[SpaceFrog]

Beau travail, il y a des progrès manifestes.
Il reste cependant encore des erreurs structurelles majeurs qui peuvent nuire a l'affichage de la page et à la compréhension du DOM par javascript

il reste toujours des soucis de balises mal balancées ...
une balise ouvrante <balise> soit nécessairement marcher de paire avec une balise fermante </balise>
sauf pour quelque balises dites "auto-fermantes" comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<img src="..."  />
<input type="..."    />
<br />

on peut les imbriquer mais pas les croiser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div>
  <p>...</p>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div>
  <p>
</div>
...</p>

certains structures ne supportent pas d'inclusions

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<li><a href='http://www.guillaume-b.com/mp2013.html' onclick="do_click();">Marseille Provence 2013</a></li> 
 
<p>&nbsp;</p> 
</ul>

ici ton <p> ne doit pas se trouver entre </li>et </ul>


Autre chose mineure un balise image devrait comporter un attribut Alt (affichage alternatif), tu peux y mettre un texte de remplacement.

[guiomb]

Merci beaucoup !

Si quelqu'un a la solution pour mon interlignage... Qui doit être identique à celui du menu de gauche... Là on croirait que j'ai sauté une ligne en plus alors que ça n'est pas le cas...

[SpaceFrog]

De quel décalage parles tu ?

Tu peux faire un screenshot et entourer en rouge la zone incriminée ?

sinon tu as toujours un souci de div pas fermée..
et une image se termine par />

[guiomb]

à gauche, la version qui ne marche pas avec Firefox, à droite la nouvelle pas terminée :


merci encore !

[SpaceFrog]

regarde au niveau des line-height
Je n'ai pas épluché le code à ce niveau là mais il se peut au vu du symptome que ce soit une balise p qui cause cet écart
remplace ta balise p par une balise span

[guiomb]

Yes ! ça a marché !
J'ai été confronté à changer quelques bricoles, mais d'ici quelques heures mon site est à jour !

Un grand merci pour ton attention et implication !

[SpaceFrog]

Result: 31 erreurs / 0 avertissements

line 51 column 129 - Erreur: required attribute "alt" not specified => il manque un attribut alt dans ta balise image
line 51 column 133 - Erreur: end tag for "img" omitted, but OMITTAG NO was specified => il manque un / à la fin de ta blaise image
line 51 column 73 - Info: start tag was here
line 76 column 78 - Erreur: required attribute "alt" not specified
line 76 column 82 - Erreur: end tag for "img" omitted, but OMITTAG NO was specified
line 76 column 22 - Info: start tag was here
line 96 column 79 - Erreur: required attribute "alt" not specified
line 97 column 79 - Erreur: required attribute "alt" not specified
line 98 column 79 - Erreur: required attribute "alt" not specified
line 99 column 79 - Erreur: required attribute "alt" not specified
line 100 column 79 - Erreur: required attribute "alt" not specified
line 101 column 79 - Erreur: required attribute "alt" not specified
line 102 column 79 - Erreur: required attribute "alt" not specified
line 103 column 79 - Erreur: required attribute "alt" not specified
line 104 column 79 - Erreur: required attribute "alt" not specified
line 105 column 79 - Erreur: required attribute "alt" not specified
line 106 column 79 - Erreur: required attribute "alt" not specified
line 107 column 79 - Erreur: required attribute "alt" not specified
line 108 column 79 - Erreur: required attribute "alt" not specified
line 109 column 79 - Erreur: required attribute "alt" not specified
line 110 column 79 - Erreur: required attribute "alt" not specified
line 111 column 79 - Erreur: required attribute "alt" not specified
line 112 column 79 - Erreur: required attribute "alt" not specified
line 113 column 79 - Erreur: required attribute "alt" not specified
line 114 column 79 - Erreur: required attribute "alt" not specified
line 115 column 79 - Erreur: required attribute "alt" not specified
line 116 column 79 - Erreur: required attribute "alt" not specified
line 117 column 79 - Erreur: required attribute "alt" not specified
line 118 column 79 - Erreur: required attribute "alt" not specified
line 119 column 79 - Erreur: required attribute "alt" not specified
line 120 column 79 - Erreur: required attribute "alt" not specified
line 121 column 79 - Erreur: required attribute "alt" not specified => 108 à 122 manque attribut alt ...
line 122 column 6 - Erreur: end tag for element "span" which is not open => là il y a une balise span mal balancée