[Résolu] IPad vs FF et Chrome

Bonjour à tous

Je suis en train de faire une opération complexe, consistant à transformer la présentation de pages HTML anciennes uniquement en utilisant des scripts JS et des commandes CSS.

Je tombe sur un problème dont je ne n'arrive pas à déterminer la cause: la page résultante montre des bordures non voulues sur Safari/iPad, alors que la même page n'a pas ces bordures sous FF ou Chrome.

Ne disposant que d'un PC, je ne vois pas comment mettre en évidence ce qui ne marche pas sur l'iPad

Voici les captures d'écran correspondantes:
FF: http://paralletes.free.fr/tests/photo/Amenhotep-ff.png
Chrome: http://paralletes.free.fr/tests/photo/Amenhotep-chrome.png
Safari/iPad: http://paralletes.free.fr/tests/photo/Amenhotep-ipad.png

La page HTML: http://paralletes.free.fr/tests/amenhotep3_01.htm
La feuille de style: http://paralletes.free.fr/tests/styles.css
La page de scripts: http://paralletes.free.fr/tests/script.js

Note: les copies que j'ai mises sur le site "bac à sable" ne permettent pas l'affichage des images.

Salut,

Comme tu utilises des tables pour la mise en page de tes éléments, les styles par défaut du navigateur s'affichent sans doute, du coup tu te retrouves avec des bordures autour des <td>.

Tu peux faire une sorte de "reset" CSS avec les styles suivants :

table, tr, td, th, tbody, thead{
  border: 0;
}

Par ailleurs, c'est pas mal de mettre en place un "reset" CSS un "normalizer" pour annuler les styles par défaut des navigateurs et partir sur une bonne base non perturbée.
Tu en trouves pas mal mais celui-ci est une référence et est minimal : http://meyerweb.com/eric/tools/css/reset/
Il faut juste que tu le charges avant tous tes CSS...

Pour débugger les versions mobiles de mes sites depuis mon PC, j'utilise Telerik.
Tu crées un compte gratuit, tu télécharges l'application sur ton PC et ensuite tu lances l'application.
Tu crées une app vide, c'est juste pour avoir accès au debugger.
Puis, tu branches ton iPad par USB à ton PC en ayant pris soin d'activer le "Web Inspector" de Safari et d'avoir ouvert ta page web dans Safari.
Tu auras une icône en bas de la fenêtre de Telerik en forme de téléphone avec un petit chiffre sur fond vert, tu cliques dessus, c'est ton device.
Pour finir, tu cliques sur "Attach" pour ouvrir le "Web inspector" et magie tu es connecté à ton device !

Je te confirmes donc que tes <table> ont une bordure et qu'avec table{ border:0; } c'est OK.
Modifié par MatthieuR (14 Apr 2016 - 10:49)

MatthieuR a écrit :
Salut,

Comme tu utilises des tables pour la mise en page de tes éléments, les styles par défaut du navigateur s'affichent sans doute, du coup tu te retrouves avec des bordures autour des &lt;td&gt;.

Tu peux faire une sorte de "reset" CSS avec les styles suivants :

table, tr, td, th, tbody, thead{
  border: 0;
}

Par ailleurs, c'est pas mal de mettre en place un "reset" CSS un "normalizer" pour annuler les styles par défaut des navigateurs et partir sur une bonne base non perturbée.
Tu en trouves pas mal mais celui-ci est une référence et est minimal : http://meyerweb.com/eric/tools/css/reset/
Il faut juste que tu le charges avant tous tes CSS...

Bingo!
J'ai bien une séquence de "resets" en début d page de style, mais je n'avais jamais jusqu’à présent vu un navigateur qui ajoute systématiquement des bordures aux éléments tabulaires.
J'ai donc ajouté cette séquence et ça marche!

@Felipe: j'ai fait l'essai de simulation avec Chrome avant de demander au secours, ça ne reproduisait pas le problème

@Manhattan: je retiens ta suggestion pour une autre fois, si je rencontre un autre problème de ce genre.

MatthieuR a écrit :
Pour débugger les versions mobiles de mes sites depuis mon PC, j'utilise Telerik.
Tu crées un compte gratuit, tu télécharges l'application sur ton PC et ensuite tu lances l'application.
Tu crées une app vide, c'est juste pour avoir accès au debugger.
Puis, tu branches ton iPad par USB à ton PC en ayant pris soin d'activer le "Web Inspector" de Safari et d'avoir ouvert ta page web dans Safari.
Tu auras une icône en bas de la fenêtre de Telerik en forme de téléphone avec un petit chiffre sur fond vert, tu cliques dessus, c'est ton device.
Pour finir, tu cliques sur "Attach" pour ouvrir le "Web inspector" et magie tu es connecté à ton device !

Je te confirmes donc que tes &lt;table&gt; ont une bordure et qu'avec table{ border:0; } c'est OK.upload/56501-debug.png

Merci du conseil, je vais utiliser ce mécanisme la prochaine fois!