[Résolu] Un bug d'affichage intermittent...!

Bonjour à tous,
Fidèle lectrice du site et du forum depuis quelques mois, je poste aujourd'hui pour la première fois. Je débute en HTML/CSS/JS et me forme depuis peu en autodidacte comme on dit.

Je travaille sur un projet perso (site de quelques pages codées en HTML/CSS sur Sublime Text 2) et suis tombée sur un bug qui m'interpelle: lorsque j'ouvre ma page (index en l'occurrence), en local ou en ligne, l'affichage de mon menu bug parfois... mais pas toujours! Je n'ai constaté ce bug que sur Chrome pour le moment (mais c'est peut-être simplement parce que c'est mon navigateur par défaut, que j'utilise donc le plus souvent). En gros certains éléments de mon menu (pas le sous menu) se resserrent et se chevauchent un peu. Après une (ou plusieurs...) actualisation(s) de la page, le bug disparaît...

Alors voilà, je soumets à votre oeil affuté mon petit code, peut-être quelque chose vous sautera-t-il aux yeux, peut-être est-ce une mauvaise gestion du CSS, d'une manière ou d'une autre, qui provoque cela? Ou peut-être est-ce juste "pas de chance" et rien à faire qu'à espérer que ça ne se produise pas chez les autres!

Pour ne pas encombrer le post de code, je vous mets le lien direct (j'espère que ça suffira?) : http://www.la-combe-aux-loups.fr/
La photo en lien est un screenshot de l'erreur en question, suivi de l'affiche normal.

N'hésitez pas à me dire s'il manque des informations ou quoi que ce soit.



Merci d'avance et bonne journée!
Modifié par Cinditte (12 Apr 2013 - 17:31)

Bonjour et bienvenue,

Sur opéra (mac) le menu bug et effectivement ça se chevauche.
Sinon Ok sur Safari, Chrome et Firefox.

c'est le padding de Ul li a qui pose un problème. Je l'ai mis à zéro et tout est revenu dans l'ordre.

Par contre le poids de vos images est excessif:

- background: 114KB
- logo: 250KB
- nav: 236KB
- nav 2-2 :236KB
- nav 2: 43 KB
- photo : 67KB

Pour une seule page c'est beaucoup trop et il y a moyen de réduire leur poids.

Merci Rodolpheb pour votre réponse ainsi que votre solution!
J'avoue que je n'avais pas Opera, je vais désormais l'inclure dans la longue liste des navigateurs à vérifier!

En revanche, j'avais rajouté le padding en question pour IE, qui "tronque" l'effet ombré (ou le changement de couleur pour les versions IE9 et inférieures) lors du hover. (Ca se voit mieux sur la deuxième page : http://www.la-combe-aux-loups.fr/fr/chalet.html, lorsqu'on passe sur Accueil) C'est certainement dû à la police allongée qui "sort" du cadre, voilà pourquoi j'avais opté pour cette solution. Auriez-vous une alternative à me proposer également?

C'est noté pour les photos, je vais les réduire (mauvaise habitude du print!)

Merci encore pour votre aide.

Je suis désolé mais je ne peux tester sur IE.

Merci quand même

Peut-être quelqu'un pourra-t-il?

J'ai enlevé le fameux padding, dans la version en ligne, ce problème d'affichage hover est donc visible.

En effet sous IE le problème est visible, mais infime en vérité.

En mettant les ancres en display:block au lieu de inline-block, elles prendront dès lors la taille des li.

<<j'ai voulu modifié mon message pour cocher la case "résolue" mais j'ai dû faire une erreur dans les manips, puisque mon message est affiché deux fois.. A supprimer donc ici >>
Modifié par Cinditte (13 Apr 2013 - 09:34)

Merci Manhattan. Effectivement ce n'est pas un gros problème, je me suis donc arrêtée sur un compromis entre le centrage des éléments et ce petit souci en hover, en remettant les ancres en block, mais en jouant légèrement sur leurs marges.

Merci encore pour votre réponse... A coup sûr je reviendrai plus tard, avec de nouveaux dilemmes ... ou pour soumettre mon site fini à vos jugements si bénéfiques pour une jeune apprentie!

En attendant, bon week-end à tous!