28172 sujets

CSS et mise en forme, CSS3

Une marge ajoutée hasardeusement

Bonjour à vous tous !
Bon comme je vais l'expliquer ci-dessous, je trouve que ce bogue est vachement déroutant, voire illogique. Intuitivement quand on divise un élément de bloc (div) en 4 parties qui valent 25% pour chacun, on DOIT avoir 25% ! le fameux Firefox s'en sort avec souplesse (vive les standards), or sur Opera, Google chrome, Chromium, Safari, internet explorer (7, 8) un remplissage(padding) apparaît à droite du bloc conteneur. Pourquoi est-ce que cela provient du floatting appliqué aux éléments du div ? même aux marges de droite?
Voici un aperçu du problème :

Sous Firefox : tout est bon

upload/30930-1.jpg

Sur les autres navigateurs :

upload/30930-2.jpg


finalement en voici le code source simplifié du problème :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />		
		<title>index</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				padding-top: 20px;
				width: 80%;
				margin: auto;
				
			}
			ul {
				list-style: none;
				overflow: hidden;
				width: 100%;
				background: cyan;
				
			}
			li {
				float: left;
				text-align: center;
				width: 24%;
				margin-right: 1%;
				background: green;
			}
			li.aucune_marge {
				width: 25%;
				margin-right: 0;
			}
		</style>
	</head>
	<body>		
			<ul>
				<li>
					<h4>Cruises</h4>
				</li>
				<li>
					<h4>Cruises</h4>
				</li>
				<li>
					<h4>Cruises</h4>
				</li>
				<li class="aucune_marge">
					<h4>Cruises</h4>
				</li>
			</ul>		
	</body>
</html>


Merci pour votre aide.
Modifié par Tackichi (24 May 2012 - 01:30)
Modérateur
Bonjour.

J'ai testé ton code sous chrome. En effet, selon la taille de la fenêtre on voit apparaître un petit espace supplémentaire. C'est probablement un problème d'arrondi :

Les moteurs appliquent 25%, aboutissent à un résultat (232.25px) et l'arrondissent à quelque chose d'affichable (232px). Visiblement, firefox garde le résultat décimal pour tous les calculs, et arrondi que pour afficher, du coup les pixels en plus, dans cette situation se retrouveront ailleurs, répartis, dans d'autre cas, c'est handicapant.

Mais il n'y a pas vraiment de bonne ou de mauvaises solutions. les % et les float sont une solution bricolée, pas du standard. Dans ce cas là, le standard serait la mise en page par tableau, qui correspond à ce que tu veux, et qui permet au navigateur de savoir qu'il doit répartir les arrondis.
kustolovic a écrit :
Mais il n'y a pas vraiment de bonne ou de mauvaises solutions. les % et les float sont une solution bricolée, pas du standard. Dans ce cas là, le standard serait la mise en page par tableau, qui correspond à ce que tu veux, et qui permet au navigateur de savoir qu'il doit répartir les arrondis.
Ou, plutôt, l'utilisation du display table et table-cell.
Modérateur
Laurie-Anne a écrit :
Ou, plutôt, l'utilisation du display table et table-cell.

Quand je parle de mise en page par tableau, je parlais du principe, donc bien évidemment display: table & co ou les tableaux html selon les cas.
Merci à vous deux.

kustolovic a écrit :

Les moteurs appliquent 25%, aboutissent à un résultat (232.25px) et l'arrondissent à quelque chose d'affichable (232px). Visiblement, firefox garde le résultat décimal pour tous les calculs, et arrondi que pour afficher, du coup les pixels en plus, dans cette situation se retrouveront ailleurs, répartis, dans d'autre cas, c'est handicapant.


Malheureusement les erreurs d'arrondi causent beaucoup de problèmes dans maintes disciplines.

Laurie-Anne a écrit :

Ou, plutôt, l'utilisation du display table et table-cell.


Cette solution a des inconvénients quand même. Soit du code qui ne fonctionne pas dans tous les agents, soit on est obligé de changer la version de la DTD; ce qui est coûteux.

Pour ma part, j'opte pour la solution suivante : je me base sur une résolution d'écran convenable avec application d'opérations élémentaires sur la taille des blocs pour aboutir à une erreur infinitésimale d'ordre 10 à la puissance -8 près, ou bien pourquoi pas sur une largeur entière en ayant la précaution de garder la fluidité du design.
Tackichi a écrit :
Cette solution a des inconvénients quand même. Soit du code qui ne fonctionne pas dans tous les agents, soit on est obligé de changer la version de la DTD; ce qui est coûteux.
Pour les navigateurs qui ne prennent pas ces display en compte, il y a les commentaires conditionnels. Je ne vois pas ce que le DTD a à voir là dedans...

Tackichi a écrit :
Pour ma part, j'opte pour la solution suivante : je me base sur une résolution d'écran convenable avec application d'opérations élémentaires sur la taille des blocs pour aboutir à une erreur infinitésimale d'ordre 10 à la puissance -8 près, ou bien pourquoi pas sur une largeur entière en ayant la précaution de garder la fluidité du design.
Euh... WHAT? Je comprends les mots mais pas l'explication, en même temps, de ce que je comprends, elle n'explique rien Smiley ohwell
Sujet clos
Aller à