Aller au contenu

Décalage d'une page HTML sous IE


gmasson

Sujets conseillés

Bonjour à tous,

Je viens de passer mon après-midi sur un problème et je dois dire que je ne sais plus quoi faire....

Pour faire simple, j'ai une page d'acceuil d'un site http://www.creermonlivre.com qui passe très bien sous FF mais avec un décalage sous IE.

J'arrives pas à trouver d'ou provient ce décalage. Et problème supplémentaire certaines personnes ont le décalages sous FF mais pas sous IE......

Quelqu'un pourrait-il m'aidé ? Car je dois avoué que je suis perdu...

Merci d'avance!

Guillaume

Lien vers le commentaire
Partager sur d’autres sites

Pour ma part sur la dernière version de FF et sur la version 7 de IE çà marche très bien. Tu testes sous IE6 ou IE8 ? Car tu nous dis "IE" mais c'est très vague :)

Aussi, nous sommes passés depuis plusieurs années au bloc <div> pour remplacer les tableaux <table>. Je vois que tu as choisis la deuxième solution. Ce n'est pas la meilleure même si elle marche encore mais au niveau référencement ,pour la lisibilité et l'accessibilité du site, développer aux normes W3C est recommandé :)

Merci pour les informations complémentaires.

Lien vers le commentaire
Partager sur d’autres sites

Commence par passer ta page au validateur W3C et corrige toutes les erreurs qu'il trouve. La plupart sont bénignes, mais d'autres peuvent clairement donner des résultats bizarres, comme le fait d'avoir deux <body>!

Jacques.

Lien vers le commentaire
Partager sur d’autres sites

Aurelsicoko, heureusement que Dudu est moins dispo que d'habitude; il t'aurait remonté les bretelles !

Remplacer des <table> par des <div> est une hérésie ;)

Si on se décide à "coder selon les normes", il faut utiliser la sémantique (c'est-à-dire utiliser les balises appropriées à bon escient, et ne surtout pas abuser des <div> et <span> qui sont sémantiquement vides de sens !)

Lien vers le commentaire
Partager sur d’autres sites

Peut-être mais mettre des tableaux partout c'est pas ce qu'il y a de mieux. Ensuite, il y a une façon de coder aux normes, je suis entièrement d'accord que des <div> vident ne servent à rien mais il ne faut pas les remplacer par des tableaux.

Lien vers le commentaire
Partager sur d’autres sites

Merci beaucoup pour toutes vos réponses. Concernant le problème je me suis rendu compte qu'il était sous IE8 et une ancienne version de FF. Effectivement sous IE7 et la dernière version de FF il n'y a aucun problème.

Concernant la conception du site, je ne suis pas à l'origine, je n'interviens que pour quelques modifications (notamment pour le référencement). Je ne suis pas développeur mais j'ai essayé un maximum de corriger les différentes erreurs notamment pour le W3C.

Pour le <table> <div> vous venez de m'apprendre un truc :)

Concernant le problème, je penses qu'en voulant un peu "épuré" et corriger certaines erreurs dans le code j'ai du supprimer une ligne de trop... Je penses à un <td>....</td> mais je ne m'explique pas le bon affichage sous IE7...

Lien vers le commentaire
Partager sur d’autres sites

Sans vouloir lancer de troll sur un sujet qui n'a rien à voir, je dirai qu'il vaut mieux faire des tableaux, que des divs "pour remplacer les tableaux, bouh c'est pas bien".

En ce qui concerne la mise en page par tableaux, si elle est bien faite elle ne contrevient à aucune norme (si ce n'est des normes d'accessibilité). Pour un site en "full-div", ben c'est pareil.

Donc, gmasson, ne t'inquiètes pas pour ta structure : elle sera aussi bien référencée que n'importe quel autre site (L'ajout de balises de titres h1 ne serait par contre pas un mal ;))

Il vaut mieux prendre le temps de faire la transition entre "site tabulaire", et "balises sémantiques", que de tout transformer en div parce que c'est à la mode.

Lien vers le commentaire
Partager sur d’autres sites

Tout a fait d'accord avec captain, remplacer des tables par div ne sert à rien et indique que l'on a rien compris aux normes et à la sémantique qui lui est associée, autant rester avec les tables.

Lien vers le commentaire
Partager sur d’autres sites

Hop, je vais éviter de plonger à trois mains dans le non-troll que tu as lancé, Captain, mais je trouve ça fort de conseiller "de rester en tableaux"... Effectivement, le full-div mal fait, c'est pas forcément mieux, mais les développeurs en tableaux et en full-div-mal-faits, il faut leur conseiller d'aller vers une découpe de design plus propre et légère, non ?

Je regarde ici le header : c'est une div. Ensuite, deux images en relatif là-dedans, pour faire les liens vers l'accueil et vers "livres en librairie". Un autre div pour faire l'inscription en haut à droite, à la limite (ça permet de la placer comme on veut, et pas être obligé de viser pour le texte), et un paragraphe pour le texte défilant en bas à droite.

En tout, 6 ou 7 balises, au lieu de 30 appels HTTP, 25 balises, etc. Et une facilité extrême à voir où sont les erreurs de placement...

Au-delà de la sémantique, gmasson perd de la densité pour ses mots-clefs, perd sa patience sur des problèmes de marges de tableaux, perd de la lisibilité de son code, perd de la bande passante... N'allez pas lui dire "keep cool, ce que tu fais, c'est moins pire que du full-div mal fait". :(

[/troll] Je ferme là pour moi, sauf si d'autres arguments majeurs apparaissent. Désolé gmasson, étant sous linux et FF, je ne peux pas t'être d'une grande aide tout de suite... Sache pour tes futures créations qu'il est parfois conseillé de "placer les navigateurs sur la même longueur d'onde". En effet, pour tout ce qui ne leur est pas indiqué dans le CSS, les navigateurs choisissent eux-même une valeur (de marge, de padding...). Donc pour éviter ce travers, on peut donner une valeur par défaut en début de CSS :


*{margin:0;padding:0;}

Et après, on rajoute les marges uniquement où on veut. Mais là, ça sera trop difficile pour ce site-là, je pense.

Bonne chance !

Lien vers le commentaire
Partager sur d’autres sites

Je rebondis sur le non-troll ;)

Personnellement, j'estime que, même quand le code n'est pas des plus propres, il faut conseiller de corriger l'existant plutôt que de dire "il faut tout changer sinon ça ne marchera jamais". Ensuite, si gmasson en profite (et apparemment c'est le cas) pour s'intéresser à de nouvelles façons de faire, c'est une excellente chose, mais ne brûlons pas les étapes, ou on risquerait d'aboutir à quelque chose d'aussi horrible, mais en div (et avec la satisfaction du travail "bien fait", qui ne pousse pas à chercher plus loin).

Quant à la densité des mots-clés, je ne pense pas que le code rentre en compte dans le calcul : je suis convaincu que pour faire ses calculs, google (et les autres moteurs également) ne se base que sur le contenu "pur", et donc supprime toute trace de code HTML de ses calculs.

Quant au reset CSS, il vaut mieux éviter d'utiliser le symbole *, qui modifiera le comportement de toutes les balises, y compris les balises de formulaire (qui sont comme on le sait, très difficiles à manipuler).

Alsacréations conseille une autre méthode que je viens de découvrir, c'est toujours utile de l'avoir sous la main : http://www.alsacreations.com/astuce/lire/36-reset-css.html

Lien vers le commentaire
Partager sur d’autres sites

Pour la densité des mots-clefs et autres : j'ai toujours été très étonné de dépasser avec facilité des concurrents sur certains mots-clefs (plus anciens que moi) : la différence notable entre moi et eux, en visualisant Google, était la taille des pages : 7ko pour moi, 42ko pour eux. Je ne suis convaincu par rien, sauf que faire des pages légères ne m'a jamais posé de problèmes :P

Pour le reset CSS, tu marques un point, je ne suis pas à jour. Merci pour le lien ;)

Lien vers le commentaire
Partager sur d’autres sites

Je vois que mon problème aura été au moins une source d'échanges intéressants :) J'aurais aimé pouvoir suivre de plus prêt tous cela mais je dois avoué que je suis un peu perdu dans toutes les explications :)

Comme je l'ai dis plus haut je ne suis pas développeur et donc pas à l'origine de ce site web. Pour ma part j'utilise essentiellement des CMS qui me facilitent bien la vie, mais c'est encore un autre débat.. ^^

Mon problème est qu'en commençant à faire quelques modifications dans le code pour améliorer le référencement (il y a de quoi de faire), j'ai du toucher à quelque chose que je n'ai pas vu dans un premier temps puisque je n'utilise IE8 que très rarement. J'ai des bases en HTML qui me permettent de comprendre un minimum le code (bien que je ne sois pas capable de créer un site de A à Z sur bloc note).

Quelqu'un aurait-il une idée (si bien entendu vous pouvez voir le problème ?).

En vous remerciant sincèrement tous de vos participations ;)

Lien vers le commentaire
Partager sur d’autres sites

Bon... j'ai fini de m'arracher les cheveux sur ce problème. Il semblerait que celui-ci soit plus ancien et seulement sous IE8.

Donc en stand-by pour le moment sauf si quelqu'un à une idée :)

Merci pour vos participations.

Lien vers le commentaire
Partager sur d’autres sites

Si c'est juste sous ie8, met ça dans la zone <head> de ton code html :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Ce n'est pas la meilleure méthode, mais elle devrait te permettre de ne plus avoir le problème

Lien vers le commentaire
Partager sur d’autres sites

  • 4 semaines plus tard...

Bonjour et désolé pour le temps de réponse...

Effectivement cela fonctionne (encore un léger décalage mais rien de comparable).

Encore merci pour toutes vos contributions et bonne journée.

Guillaume

Lien vers le commentaire
Partager sur d’autres sites

Salut :smartass:

Aussi, nous sommes passés depuis plusieurs années au bloc <div> pour remplacer les tableaux <table>.
Faux, archi faux. Depuis quelques années, ah bon ? Combien exactement ? Une date ?

La sémantique (et donc l'utilisation a bon escient des <table> et avec parcimonie des <div>) a toujours été prôné par le w3c. Depuis le début.

En revanche, il est exact d'affirmer que les mises en page tabloïdes ont eu leur heure de gloire bien qu'elles aient toujours été dépréciées par le w3c. Alors pourquoi a-t-on fait du tableau imbriqué en guise de mise en page pendant si longtemps ? Tout simplement parce qu'à l'époque le navigateur dominant (Microsoft Internet Explorer) n'avait que faire de prendre en charge correctement la norme CSS, donc on se débroullait avec les moyens du bord.

Mais dire qu'avant on faisait du tableau, et que "depuis quelques années" les normes ont changé, c'est faux.

Qui plus est, imbriquer des <div> comme on imbrique des <table> est non seulement une erreur, c'est en plus une régression. <table> est une balise sémantique: elle indique que son contenu est un tableau de données, tandis que <div> ne veut rien dire, c'est une balise comparable à la lettre blanche du Scrabble.

Au moins, utiliser <table> même à contre-emploi, c'est (mal) utiliser une balise sémantique. Je trouve ça mieux que d'utiliser une balise bouche-trou dépourvue de sens.

Evidemment, le nec plus ultra est d'utiliser de vraies balises: <p>, <ul>, <cite>, etc.

Par exemple, un <div id="footer"> se remplace très bien par un <address>...

Je vois que tu as choisis la deuxième solution. Ce n'est pas la meilleure même si elle marche encore mais au niveau référencement ,pour la lisibilité et l'accessibilité du site, développer aux normes W3C est recommandé :-)
Parlons d'accessibilité et de lisibilité.

La balise <table> peut se révéler parfaitement accessible. Un aveugle peut très bien lire un tableau de données, pourquoi ne le pourrait-il pas sur une mise en page tabloïde, en tous cas plus que sur une mise en page "du-div-en-veux-tu-en-voila" ?

Quelques liens connexes très intéressants à ce sujet:

Trois vidéos sur l'accessibilité

"Les tableaux sont-ils accessibles" vieille discussion sur le Hub, toujours d'actualité

Aurelsicoko, heureusement que Dudu est moins dispo que d'habitude; il t'aurait remonté les bretelles !

Remplacer des <table> par des <div> est une hérésie ;)

Bof, même avec un mois de retard, je réponds quand même :P

Hop, je vais éviter de plonger à trois mains dans le non-troll que tu as lancé, Captain, mais je trouve ça fort de conseiller "de rester en tableaux"... Effectivement, le full-div mal fait, c'est pas forcément mieux, mais les développeurs en tableaux et en full-div-mal-faits, il faut leur conseiller d'aller vers une découpe de design plus propre et légère, non ?

Je dis globalement que l'un comme l'autre, c'est la même m*rde. Et j'assume.

En tout, 6 ou 7 balises, au lieu de 30 appels HTTP, 25 balises, etc. Et une facilité extrême à voir où sont les erreurs de placement...

Au-delà de la sémantique, gmasson perd de la densité pour ses mots-clefs, perd sa patience sur des problèmes de marges de tableaux, perd de la lisibilité de son code, perd de la bande passante... N'allez pas lui dire "keep cool, ce que tu fais, c'est moins pire que du full-div mal fait". :(

L'argument du nombre de balises et de requêtes HTTP est pertinent. Mais là, ce n'est plus un problème ni d'accessibilité ni de lisibilité pour le visiteur, c'est du ressort du webmaster de faire en sorte que son site ne lui coûte pas les yeux de la tête en bande passante, en surcharge serveur, en lisibilité du code source etc.

Quant à la densité des mots-clefs, je ne pense vraiment pas que les moteurs accordent réellement plus d'importance à un contenu non balisé sémantiquement (<div>) qu'à un contenu mal balisé sémantiquement (<table> utilisé à contre-emploi).

Et en parlant de reset CSS et d'aberrations dans les codes HTML, un petit outil bien pratique pour débusquer les mauvaises pratiques: Big angry red text :mad2:

A+

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...