28173 sujets

CSS et mise en forme, CSS3

Margins en % : FireFox versus rest of the world

Bonjour,

Je crois savoir (et avoir pu vérifier) que, sous FireFox, une spécification de marge en pourcentage se réfère à la dimension correspondante de la boîte générée.

C'est à dire que, si j'ai :

<div id="div1">
    <img id="img1">
</div>

D'une part, et :

#div1{
   width:50px;}
#img1{
   width:10px;
   margin-left:10%;}

Les 10% de margin-left de img1 s'appliquent par référence aux 10px de la largeur de l'image.

J'ai maintenant la très nette impression que pour IE et Konqueror, une spécification de marge en pourcentage se réfère à la dimension correspondante du conteneur parent.

En l'occurrence pour l'exemple donné, le margin-left de img1 s'appliquerait par référence aux 50px de div1...

1/ Est-ce bien exact ou est-ce que je me gourre totalement ?
2/ Qui est conforme aux spécifications officielles. FF ou les autres ?
3/ Konqueror étant dans le même cas qu'IE, les commentaires conditionnels ne suffiront pas. J'envisage donc de corriger le coup à grands coups de JS brutasses suivant un test de navigator.appname.
Existe-t-il une solution plus clean / standard ?
4/ Si votre navigateur n'est pas un de ces 3 là, comment se comporte-t-il à cet égard ? et quel est son appname ?
Modifié par aCOSwt (18 Sep 2007 - 13:39)
Modérateur
Salut,

aCOSwt a écrit :
1/ Est-ce bien exact ou est-ce que je me gourre totalement ?


C'est exact. img1 est à 10 % de la marge gauche de son père (div1). Pour être un peu plus précis, les « browser » considèrent le point de pivot en haut à gauche du bloc.

aCOSwt a écrit :
2/ Qui est conforme aux spécifications officielles. FF ou les autres ?


Je crois que les browsers les plus conforme sont les moteurs Gecko. Mais là peut être je me goure.


aCOSwt a écrit :
3/ Konqueror étant dans le même cas qu'IE, les commentaires conditionnels ne suffiront pas. J'envisage donc de corriger le coup à grands coups de JS brutasses suivant un test de navigator.appname.
Existe-t-il une solution plus clean / standard ?


Cela dépend de ce que tu veux faire. Il y a pas mal d'astuces afin d'éviter d'alourdir ton code.


aCOSwt a écrit :
4/ Si votre navigateur n'est pas un de ces 3 là, comment se comporte-t-il à cet égard ? et quel est son appname ?


Bien ! Il n'est pas tombé malade. Il est même aller faire un tour sur le web pour prendre l'apéro.

++
Modifié par Nolem (18 Sep 2007 - 13:57)
Bonjour,
aCOSwt a écrit :

J'ai maintenant la très nette impression que pour IE et Konqueror, une spécification de marge en pourcentage se réfère à la dimension correspondante du conteneur parent.

En l'occurrence pour l'exemple donné, le margin-left de img1 s'appliquerait par référence aux 50px de div1...

1/ Est-ce bien exact ou est-ce que je me gourre totalement ?


A moitié, en mode standard, d'aprés ce que j'avais pu expérimenté, IE ne se réfère pas à la largeur du bloc parent mais à une largeur (aléatoire?) à peu prés équivalente au double de la largeur du parent. Donc à ce niveau là son comportement n'est pas cohérent.
Pour corriger ce problème sous IE, l'image doit être convertie en boîte de block via un dsiplay:block.

aCOSwt a écrit :

2/ Qui est conforme aux spécifications officielles. FF ou les autres ?

La spécification en dit rien à ce sujet.
Modifié par Hermann (18 Sep 2007 - 18:06)
Si c'est du "modèle de boîte" que vous parlez, alors IE n'est pas conforme au modèle du W3C jusqu'à la version 5.5 et l'est dans les versions 6 et 7 s'il est en mode de rendu strict (c'est-à-dire avec une DTD complète et correctement saisie).

Mais, même avec le "modèle" de Microsoft, les marges externes ne sont jamais comprises dans la largeur. Autrement dit, ton image occupera 10 pixels+10% de la largeur de son contenant (50 pixels).
Merci Nolem, Hermann et Victor pour vos réponses.

En fait, 300 bidouilles supplémentaires plus tard, le sujet m'a l'air encore plus complexe que cela.
Cela dépend aussi du positionnement du conteneur parent. En float ou en absolute, les resultats de sont pas identiques,
Cela dépend aussi (pour le margin-height) si on a ou non spécifié une hauteur au conteneur parent...
Alors que cela ne dépend pas pour le margin-width vu que la largeur par défaut d'un conteneur est fixée...

Horresco referens ! (Thanks God, je n'ai perdu que mon CSS...)
Modifié par aCOSwt (19 Sep 2007 - 18:04)
Ok je suppose quand même que vous avez vérifié que vous étiez en mode
standard? Smiley cligne (je ne connais votre niveau...)
Modifié par Hermann (19 Sep 2007 - 18:14)
Bonjour,

aCOSwt a écrit :
1/ Est-ce bien exact ou est-ce que je me gourre totalement ?

Ben je pense qu'il doit y avoir tromperie. Je n'exclue pas un bug de Firefox (j'en ai eu un du même genre l'autre jour, j'ai finalement renoncé et je suis passé par une marge latérale en pixels plutôt qu'en pourcentages...), mais les conditions de la manifestation de ce bug doivent être plus complexes que ça.

Une page de test avec deux éléments de type bloc, rien à signaler avec Firefox:
<!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="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	div#cadre {
		width: 400px;
		padding: 50px;
		background: burlywood;
	}
	div#bloc1 {
		margin-left: 50%;
		height: 200px;
		background: red;
	}
	div#bloc2 {
		margin-left: 50%;
		height: 200px;
		width: 200px;
		background: blue;
	}
	</style>
</head>
<body>
<div id="cadre">
	<div id="bloc1"></div>
	<div id="bloc2"></div>
</div>
</body>
</html>

Si j'ai bien suivi ta théorie, le deuxième bloc serait censé avoir une marge de gauche non pas de 200px (50% de la place disponible dans son conteneur) mais de 100px (50% de sa propre largeur). Ça n'est pas le cas. Il doit donc y avoir d'autres paramètres en jeu.

Edit: si je me souviens bien, la dernière fois que j'ai rencontré un problème du genre c'était pour la page suivante, en essayant de styler des input de type text en les passant en display: block. Mais pour les éléments de formulaire, rien ne m'étonne. Smiley cligne

Hop, page de test mise à jour:
<!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="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Test</title>
	<style type="text/css">
	div#cadre {
		position: absolute;
		width: 400px;
		background: burlywood;
	}
	div#bloc1 {
		margin-left: 50%;
		height: 200px;
		background: red;
	}
	div#bloc2 {
		margin-left: 50%;
		height: 200px;
		width: 200px;
		background: blue;
	}
	input#test1 {
		display: block;
		margin-left: 50%;
		width: 50%;
		margin-top: 20px;
	}
	input#test2 {
		display: block;
		margin-left: 50%;
		width: 50px;
		margin-top: 20px;
	}
	input#test3 {
		display: block;
		margin-left: 50%;
		margin-top: 20px;
	}
	</style>
</head>
<body>
<div id="cadre">
<p>Tous les éléments ont un <code>margin-left: 50%;</code> et sont en affichage de type bloc.</p>

	<div id="bloc1"></div>
	<div id="bloc2"></div>
	<input id="test1" type="text" value="width: 100%" />
	<input id="test2" type="text" value="width: 50px" />
	<input id="test3" type="text" value="width: auto" />
</div>
</body>
</html>

On voit très clairement le problème dès que l'input n'a pas de largeur spécifiée.
Si on supprime les display: block pour les input, le bug disparait.
Modifié par Florent V. (19 Sep 2007 - 18:34)
Hermann a écrit :
(je ne connais votre niveau...) 


       \         /
     ---\~~~~~~~/------- Niveau de mon verre au bar
         \     /
     -----+___+--------- 0                          /|\
                                                     |
                                                     | ~ -200% du conteneur ci-dessus ! (approx)
                                                     |
     ------------------- Mon niveau en html / css   \|/

Modifié par aCOSwt (19 Sep 2007 - 18:35)
Et sinon: on pourrait voir une page de test complète reproduisant le phénomène? En ligne ou en proposant ici directement le code HTML (avec CSS intégrée).
Florent V. : Je te savais déjà capable de mettre à jour un tuto plus vite que ton ombre mais là... en plus... 17 minutes pour doubler le code d'une page !!!
Gee !

Merci à toi. J'étudie ton code, fais le ménage dans mes pages de test devenues pour l'heure un fouillis inextricable et je reviens pour plus de lumières sur le sujet.
Sujet clos
Aller à