CSS width:100% margin et firefox [résolu]

Bonjour,

j'ai eu un petit problème avec firefox, un width:100% et un margin-left, le problème est illustré ici : bug.html (le cadre rouge déborde). J'ai réussi à le résoudre d'une manière pas très élégante ici : bugpas.html, cette page est le comportement que j'attendais de l'autre.

ma question (on y arrive) est la suivante : est ce que le débordement obtenu dans la page bug.html est un comportement conforme aux normes ? sous ie7, la page bug et la page bugpas donnent le même rendu qui est celui obtenu avec la page bugpas sous FF

#edit: rajout des http:// dans les liens pour qu'ils fonctionnent correctement
Modifié par _Sam_ (17 Jan 2007 - 13:40)

bon, réponse à moi même ...
dans la deuxième page FF ignore le width car il ne le comprend pas... et met le div à la taille maximum.

enfin ça corrige juste un point, et ne me dit pas si la page bug.html est réelement un bug ou une interprétation correct des normes.

(je me disait bien aussi que FF interprète correctement 100%-150px était trop beau )

Salut,

Le comportement de Firefox est bien conforme aux normes.

Je te conseille un peu de lecture dans la FAQ pour en savoir plus.

Bonjour...

Je pense que si tu commençais par placer en en-tête des tes pages un Doctype valide,
Tu t'éviterais beaucoup d'ennuis ultérieurs, et notamment avec IE 6.

La valeur normale pour width dans ce cas est width:auto;

c'est en fait la valeur par défaut pour tous les éléments blocs, c'est donc cette valeur que Firefox applique lorsqu'il ne comprend pas la valeur dans le 2e exemple.

Julien Royer a écrit :
Salut,

Le comportement de Firefox est bien conforme aux normes.

Je te conseille un peu de lecture dans la FAQ pour en savoir plus.

les exemples cité le sont avec des largeurs fixes en px hors ma question se situe sur l'interprétation du 100%, on dirait que firefox applique le 100% comme la largeur globale du conteneur et non la largeur restante après l'application de la marge.

enfin c'est peut être juste qui me fait des idées sur l'interprétation des valeurs en %.

_Sam_ a écrit :
on dirait que firefox applique le 100% comme la largeur globale du conteneur et non la largeur restante après l'application de la marge.

Oui, c'est comme ça que ça marche. Ça s'appelle les spécifications CSS, rédigées par le W3C.

Sinon : un élément de type bloc prendra par défaut toute la largeur disponible dans son bloc conteneur. Il n'y a donc aucune raison de spécifier des width: 100% à tout va, si ce n'est pour se cogner la tête contre les murs.

La raison pour laquelle le deuxième exemple marche bien, c'est parce que tu n'as pas spécifié de largeur pour le deuxième bloc. Quand je dis que tu n'as pas spécifié de largeur, cela signifie que le code suivant est syntaxiquement faux et sera donc ignoré :

width: (100%-150px);

CSS n'est pas un langage de programmation et ne permet pas ce genre de subtilité (par ailleurs peu utile vu le reste de l'arsenal disponible).

Quelque chose me dit qu'une petite révision sur les bases de la syntaxe CSS ne serait pas du luxe...
Modifié par Florent V. (17 Jan 2007 - 13:14)

_Sam_ a écrit :
on dirait que firefox applique le 100% comme la largeur globale du conteneur et non la largeur restante après l'application de la marge.

Merci de faire l'effort de lire les liens donnés, et d'appliquer ce qu'a dit Cygnus si tu veux que l'on t'aide.

La phrase que tu écris ci-dessus montre bien que tu n'as pas pas lu l'article d'OpenWeb qui explique les modèles de boîtes, donné en lien dans la FAQ. C'est un point fondamental des CSS, qu'il faut comprendre pour pouvoir développer correctement.

Florent V. a écrit :

Oui, c'est comme ça que ça marche. Ça s'appelle les spécifications CSS, rédigées par le W3C.

Sinon : un élément de type bloc prendra par défaut toute la largeur disponible dans son bloc conteneur. Il n'y a donc aucune raison de spécifier des width: 100% à tout va, si ce n'est pour se cogner la tête contre les murs.

La raison pour laquelle le deuxième exemple marche bien, c'est parce que tu n'as pas spécifié de largeur pour le deuxième bloc. Quand je dis que tu n'as pas spécifié de largeur, cela signifie que le code suivant est syntaxiquement faux et sera donc ignoré :

width: (100%-150px);

CSS n'est pas un langage de programmation et ne permet pas ce genre de subtilité (par ailleurs peu utile vu le reste de l'arsenal disponible).

Quelque chose me dit qu'une petite révision sur les bases de la syntaxe CSS ne serait pas du luxe...

Merci pour les explications c'est tout ce que je voulais savoir. j'ai beaucoup de mal avec les css un peu trop "aléatoire" à mon gout.

Julien Royer a écrit :
Merci de faire l'effort de lire les liens donnés, et d'appliquer ce qu'a dit Cygnus si tu veux que l'on t'aide.

La phrase que tu écris ci-dessus montre bien que tu n'as pas pas lu l'article d'OpenWeb qui explique les modèles de boîtes, donné en lien dans la FAQ. C'est un point fondamental des CSS, qu'il faut comprendre pour pouvoir développer correctement.

la page parle de taille fixe d'ajout des tailles de marge de padding, de bordure etc comprises ou non dans la taille totale suivant les navigateurs, oui et ? je ne vais pas polémiquer peut être que mon premier messages n'était pas clair mais l'interrogation portait sur l'interprétation du %, Florent a confirmé je l'en remercie.

Cygnus demande un doctype, pourquoi pas une balise head et quelque image pour que soit plus agréable à regarder, pour ie6 bien le problème était sous FF, excuse moi du ton mais je demande pourquoi c'est rouge on m'explique pourquoi c'est pas bleu ...

_Sam_ a écrit :
la page parle de taille fixe d'ajout des tailles de marge de padding, de bordure etc comprises ou non dans la taille totale suivant les navigateurs, oui et ? je ne vais pas polémiquer peut être que mon premier messages n'était pas clair mais l'interrogation portait sur l'interprétation du %, Florent a confirmé je l'en remercie.

Alors, soyons clair... Si tu spécifies une largeur de 100% et une marge à gauche de 150px, la largeur de ta boîte sera de 100% + 150px, c'est exactement ce qui est expliqué, non ? Je ne vois pas le rapport avec l'interprétation du %.

_Sam_ a écrit :
Cygnus demande un doctype, pourquoi pas une balise head et quelque image pour que soit plus agréable à regarder, pour ie6 bien le problème était sous FF, excuse moi du ton mais je demande pourquoi c'est rouge on m'explique pourquoi c'est pas bleu ...

Tiens, c'est étrange, l'article d'OpenWeb a une partie "Le DocType switching : forcer l'une ou l'autre interprétation des dimensions". Est-ce que ça a un rapport ? Certainement pas.

Julien Royer a écrit :
Alors, soyons clair... Si tu spécifies une largeur de 100% et une marge à gauche de 150px, la largeur de ta boîte sera de 100% + 150px, c'est exactement ce qui est expliqué, non ? Je ne vois pas le rapport avec l'interprétation du %.Tiens, c'est étrange, l'article d'OpenWeb a une partie "Le DocType switching : forcer l'une ou l'autre interprétation des dimensions". Est-ce que ça a un rapport ? Certainement pas.

mea culpa :'(
/me repart la tête bien basse avec son boulet au pied mais aura quand même appris quelque chose.

_Sam_ a écrit :
mea culpa :'(
/me repart la tête bien basse avec son boulet au pied mais aura quand même appris quelque chose.

Pas de problème, n'hésite pas à parcourir les informations que tu peux trouver sur Alsacréations, c'est de cette façon que tu progresseras.

Bon courage en tout cas.