Marge inconnu

Bonjour tout le monde,
J'ai problème idiot et pourtant incompréhensible.
Je dispose plusieurs images en ligne sur plusieurs colonnes (selon les tendances actuelles), le responsive (qui m'appartient, c'est à dire pas de skeleton, pas de foundation, etc) associé règle le nombre de colonne en fonction de la résolution.

Problème : En écran de largeur supérieur à 1600px, le nombre de colonnes est défini à 8 sur une ligne soit 1 colonne = 12.5% d'une ligne. En théorie, ça passe, mais en pratique, j'ai une marge qui viens ce placer entre la 4ème et la 5ème colonne : Ici le problème

Je classerai ce problème comme un bug d'affichage, car en résolution plus faible, je passe sur 5 colonnes soit 1 colonne = 20% d'une ligne, et la, ça passe sans problème.

Si quelque connais la source du problème, et connais une solution, je suis preneur.

Étant un développeur confirmé, j'ai un peux honte, mais bon, l'erreur est permise à tout le monde
Modifié par Kikimagik (17 Feb 2014 - 16:13)

Bonjour,

Du code (HTML, CSS, JS,...) ou mieux une page en ligne ?
(Éventuellement, préciser l'OS, le navigateur utilisé)
Faire des supputations sur une copie d'écran, c'est chronophage

Je travail sur Google Chrome Version 32.0.1700.107 m / dernière version à jour.
je suis aussi sur Firefox 27.0.1 et Internet 9.0 pour le test des autres navigateurs.
Le problème est récurant peu importe le navigateur.

Je vous donne le lien, cependant attention ! Le site est actuellement en prod' donc rien n'est optimisé (poids des images). : Ici le site

Je suis sur Windows 7 Pro service pack 1
Intel Core i7-4702MQ CPU @ 2.20Ghz 2.20Gh
RAM installée : 16Go
Système en 64 bits.
Modifié par Kikimagik (17 Feb 2014 - 16:13)

Bonjour,

Je n'ai pas trop le temps de me pencher dessus, mais ne serait-ce pas un classique bug d'arrondi dans les pourcentages ? Certains navigateurs arrondissent au pixel en-dessous, d'autres au pixel au-dessus.

Hello,

Le comportement est assez curieux (en l'absence d'explication sans appel) et surtout assez disparate en fonction du navigateur et du redimensionnement de la page (dernières versions des principaux navigateurs sous OS X)

A priori pas de souci sous Safari et Opéra (sauf sur Next), alors que "cette marge" apparait à des endroits différents sur les autres navigateurs (en fonction du redimensionnement également)

Bref, intuitivement je pencherai pour une disparité dans le mode des calculs en pourcentage de la part des navigateur (+ peut-être la prise en compte ou non de la barre de scroll ?)

Quoi qu'il en soit, il manque une balise englobante pour vos list-item (ul/ol)
Je serai du même avis que Raphaël sur l'utilisation massive de box-sizing
Avez-vous essayé un mode de rendu différent pour vos listes (inline-block par exemple) ? (attention aux espaces indésirables)

Bon courage, je continue à réfléchir (ou à tenter de le faire) en attendant qu'une bonne âme résolve ou découvre le pourquoi du comment

ps: C'est vrai que ça rame dur
Modifié par 6l20 (17 Feb 2014 - 17:27)

Raphael a écrit :
Bonjour,
Je n'ai pas trop le temps de me pencher dessus, mais ne serait-ce pas un classique bug d'arrondi dans les pourcentages ? Certains navigateurs arrondissent au pixel en-dessous, d'autres au pixel au-dessus.

Nia nia nia

Merci à vous deux pour vos réponses, mais le problème est vraiment curieux, je m'explique :

En largeur pleine (1920px) le bug apparaît. Ok, c'est logique.
En largeur variable (1870px par exemple), le bug n'apparaît plus ! Je ne pense effectivement comme le dit Raphaël que le problème viens de mon 12.5% qui soit est gardé comme telle, soit arrondi à 13%, soit arrondi (plupart des cas) arrondi à 12%.

Je vais regarder du coté du box-sizing pour voir ce que peux en faire.

Merci pour votre aide, le bug n'est pas méchant, mais bon, ça me fait sautiller les yeux ce détail.