Pb décalage firefox vs chrome & safari [résolu]

Bonjour à tous,

J'ai un problème de décalage du logo sur ce site.
Sur Firefox ça passe très bien, en revanche sur Chrome et Safari le logo est collé à l'image.

Une idée sur ce que je peux faire pour résoudre le problème ?

Merci par avance
Modifié par Cotp (18 Feb 2011 - 10:41)

Bonjour, commence par corriger tes erreurs de validation.

Ensuite, tu y verras plus clair et se sera plus facile de corriger ce bug. D'ailleurs, il semble apparaître seulement sur la page index...

Merci pour ton commentaire. En fait je sais que j'ai d'autres erreurs de validation (et je dois bien sur m'en occuper) mais pour l'instant j'ai cherché à comprendre pourquoi j'avais cet écart de logo sur la page d'accueil et pas sur les autres pages sur CHrome et Safari.

Je viens d'identifier en faisant des tests que l'écart n'apparaissait pas si je supprimais le lien (l'image est en background rotatif en CSS) et le lien est sur le div lui même sous cette forme:
<a><div></div></a>
si j'enlève le lien, la distance du logo est bonne, si je rajoute le lien le logo se colle à l'image.
Ceci n'est valable que pour chrome est safari.

Quelqu'un pourrait m'aider ou me donner un conseil pour arriver à trouver une alternative pour Chrome sans forcement me dire de d'abord corriger mes erreurs de validation ?

Merci de votre feedback

Cotp

Bonjour,

sans résoudre ton problème voici quelques remarques qui pourraient t'aider à le résoudre :

- ta marge est sur le <div>, pas sur le <a>. Je pense que ça peut causer des erreurs d'interprétation..

- ton imbrication est étrange : il serait beaucoup plus naturel d'avoir <div><a></a></div>, la nature d'un <div> étant d'être un conteneur, et pas celle du <a>.

- ton <div> vide est inutile : tu pourrais placer ton id "contentIndex" sur le <a> et lui spécifier un display:block, le résultat serait le même et tu épargnerais la sémantique de ta page, ainsi qu'un peu de poids.

- sémantiquement parlant toujours, ton image est l'élément principal de la page, hors à la lecture de ton code ça n'est pas du tout le cas. Pourquoi ne pas la mettre dans une balise <img /> ? Cela te permettrait d'utiliser l'attribut alt, de considérablement améliorer ta sémantique, et d'alléger ton css.

Ce ne sont que de simples observations, mais peut-être que quelque chose t'intéressera!

Bonne continuation!

Ten a écrit :
- sémantiquement parlant toujours, ton image est l'élément principal de la page, hors à la lecture de ton code ça n'est pas du tout le cas. Pourquoi ne pas la mettre dans une balise &lt;img /&gt; ? Cela te permettrait d'utiliser l'attribut alt, de considérablement améliorer ta sémantique, et d'alléger ton css.

Voilà c'est ce que j'ai fais et j'ai résolu le problème. Merci Ten