[Résolu]Décallage d'une div dans son conteneur

Bonjour à vous tous,

Je suis confronté à un soucis que je ne m'explique pas. J'utilise un conteneur (div menu_top) en haut à droite de ma page constitué de 3 div qui devraient s'afficher en "inline-block".

Le soucis est que je ne comprend pas pourquoi la dernière div est décalée vers le bas uniquement sous google chrome. Tout fonctionne bien sous Firefox. Léger décalage sur la droite sous Opéra, carrément rien ne s'affiche sous Safari et sous IE7 c'est un peu la cata (mais bon j'ai prévu de réaliser des ajustements ensuite pour IE donc à priori on va dire... pas de soucis lol).

Le site en question est visible ici.

Merci beaucoup d'avance pour votre aide car cela fait un bon moment que je suis complétement bloqué...
Modifié par pelisboule (21 Mar 2011 - 15:44)

Salut,

Le validateur W3C indique pas mal d'erreur sur des balises non fermées.
Je pense que pas mal de tes problèmes doivent venir de là

Salut,

J'ai refait une passe sur le site et le validateur indique toujours des erreurs des balises alors que le code n'en contient plus (vu avec firebug et inspecteur de chrome).

Il ne reste que des erreurs "mineures" d'un caractère s'étant insinué au milieu de <li> et de balise alt manquantes.

Mais le problème du décalage demeure

Peut être aussi des soucis de cache ?

Bonjour,

J'ai remarqué aussi que ta div id="page" n'était pas fermée et que pas mal d'attributs class étaient vides.

Cordialement

Salut iddsoft,
En effet je vois dans le validateur qu'il indique que la balise n'est pas fermée mais pourtant lorsque j'inspecte le code elle l'est correctement..

Une idée ?

Dans tous les cas je ne pense pas que le soucis vienne de là qu'en dites-vous ?

Je me permet d'up car je reste bloqué sur ce soucis... Honnêtement je n'arrive pas à déceler la faille... Help ? lol

Bonjour, tu devrais réviser la structure de ton code.
Modifié par Mabelle (16 Mar 2011 - 11:17)

pelisboule a écrit :
En effet je vois dans le validateur qu'il indique que la balise n'est pas fermée mais pourtant lorsque j'inspecte le code elle l'est correctement..

Attention, le code généré (source retravaillée par les outils exploitant ton code) passe par des processus de correction. Toute validation doit se faire préalablement sur le code source (source brute de ton code HTML).

<edit>... et ensuite sur le code généré.</edit>
Modifié par yodaswii (16 Mar 2011 - 11:20)

Re,

Alors après pas mal de tests et de corrections je n'ai plus de bugs structurels sur la page d'accueil ni de contenu...

Mais le soucis demeure

Re help donc lol...

Je me permet d'up un peu le sujet... car toujours bloqué.

Je vous avoue ne pas vraiment comprendre l'origine du soucis. Le code est maintenant "sans erreur" vis à vis du W3C (mis à part certains tags meta) mais surtout la structure est validée comme correcte !

Le problème doit donc venir du style mais là... grosse inconnue car chaque navigateur est affecté différemment...

Y-a-t il une bonne âme pour m'assister dans cette tâche ardue ?
Un grand merci d'avance,

C'est réellement un bug extra-terrestre

Je bataille dessus comme un diable et impossible d'en trouver la cause... pleeeeaaase y a-t-il une bonne âme charitable qui puisse me débloquer ?

Au pire je vais coder une bidouille en JS pour corriger le truc mais je ne suis vraiment pas fan de ce genre de combine

Merci d'avance pour toute aide,

Bonjour,

Personnellement, je parierais sur l'XHTML effectivement servi en xhtml qui n'est pas franchement bien supporté par tous.

Fait un test en changeant

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

en

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Accessoiremet, utilises-tu réellement de l'XML dans la page ?


Il faut également modifier cette erreur :

a écrit :
Line 91, Column 28: character data is not allowed here

Elle peut poser des problèmes, tout comme une balise non fermée.
Modifié par Laurie-Anne (21 Mar 2011 - 10:24)

Bonjour et merci pour ta réponse... j'ai essayé de modifier cette balise meta qui ne change malheureusement pas grand chose

En réalité je ne sais pas si nous en avons réellement besoin car nous utilisons pour ce projet un cms (prestashop) et cette balise fait partie du code déjà existant.

Pour l'erreur il s'agit d'un insert du caractère " " entre 2 <li>...

Mais quoi qu'il en soit ce qui m'inquiète est que je ne comprend absolument pas l'origine de ce bug de décalage...

Bonjour,

en inspectant ton code avec l'inspecteur de chrome, je trouve, entre le "li.cart_top " et le " li.user_account" un texte vide ( représenté par un "" ). Lorsque je le supprime dans l'inspecteur, tout revient à la normal.

un echo d'un espace peut-être ?


Autre chose, dans ton div#adtm_menu_inner il y a un espace de 2 px disgracieux sur la bordure bottom...
Passer le margin à 0 0 0 22px et retirer les 2px de padding-left à .li-niveau1 a.a-niveau1 réglerait le problème.

Il faut voir si cela ne casse pas le reste... mais bon
Modifié par n3k0 (21 Mar 2011 - 15:34)

Pfffff... en effet c'était aussi bête que ça

Bon désolé de vous avoir harcelé mais il s'agissait "simplement" d'un caractère s'étant inséré entre deux <li>.. Je ne pensais pas que ça aurait pu avoir une si grande incidence...

Problème résolu quoi qu'il en soit
Encore merci

Bonjour,

pas "simplement" comme tu l'as appris à tes dépends : un navigateur corrige ce ou ces caractères en ouvrant un <li> avant parce que ce caractère est dans un <ul> et c'est interdit, il faut un <li>. Puis le <li> n'est pas fermé donc il le ferme avec </li> ==> il y a un nouvel item de liste dans ton code HTML.
Une page pas valide, c'est une page pas valide : ce que tu crois être une "petite" erreur est en fait bien une "erreur de structure".

La prochaine erreur du même style que tu devrais avoir est une marge ou un blanc horizontal de 4px. Je te fais gagner du temps, quand tu mesures 4px de trop quelque part, c'est la largeur d'un espace qui a pu se glisser un peu de la même façon que ton caractère