28114 sujets

CSS et mise en forme, CSS3

Bug CSS ?

Hi all,

Je me replonge dans le css après quelques mois d'abstinence en matière de progra web Smiley cligne

Je commence un nouveau projet et là, bam ! Je tombe sur un bug que je n'avais jamais rencontré auparavant (j'ai beau chercher dans mon expérience en matière de "tricks" css, ça ne me dit rien).

Et ça m'énerve à un point pas possible (notez que j'ai p-e oublié une base css essentielle, mais ça serait tout de même assez étonnant).

Pour simplifier, j'ai fais une page de test all-in-one :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Test CSS</title>

<style>

* {
	font-family: Verdana;
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	background: white;
	width: 100%;
}

#conteneur_1 {
	background: grey;
	/*border: 1px red solid;*/
}

.sous_conteneur {
	margin: 50px;
	background: cyan;
	height: 100px;
}


</style>

</head>

<body>

	<div id="conteneur_1">

		<div class="sous_conteneur">
		</div>

	</div>

</body>

</html>


Le bug en question (vérifié sous FF et Opera) :

- par défaut, le background du bloc "conteneur_1" n'apparait pas entièrement !

- à partir du moment où on lui ajoute une bordure externe, le background apparait (décommenter la ligne 25 pour s'en rendre compte)


Experts CSS, si vous pouvez m'éclairer sur ce mystère, je suis tout ouï !

Smiley jap
Modifié par ANViL (13 Aug 2007 - 13:04)
Salut,

Quelques bases un peu rouillées ... Smiley cligne 

#conteneur_1 {
overflow: hidden;/* pour contexte de formatage*/
height: 1%;/* pour haslayout IE6 */
background: lime;/* IE n'aime pas grey !! */
	/*border: 1px red solid;*/
}
Merci pour ta réponse rapide Smiley cligne

Pour le coup du "grey" qu'IE n'aime pas, effectivement (on en apprends tous les jours et je suis tous les jours de plus en plus sidéré par le comportement ce navigateur Smiley eek )


Ce qui m'interloque le plus, c'est "overflow : hidden" :

- je ne l'ai jamais employé que pour résoudre le problème du contenu
 du bloc
- sinon ça fonctionne effectivement pour résoudre le pb Smiley lol

Mais ce que j'aimerais bien savoir :

- est-ce un bug css réel ? (Opera, FF, IE se plantent là dessus, donc si c'est un bug, je ne comprend pas qu'il n'ai pas été éradiqué depuis longtemps Smiley eek )
- si oui, y a-t-il une liste des bugs css recensés ? (de sorte que je ne sombre pas dans la dépression la prochaine fois que j'en rencontre un )

Smiley cligne
Modifié par ANViL (13 Aug 2007 - 13:24)
Re,

Ton bloc n'a pas de dimensions et aucun contenu, il aura un height logique de 0px, soit tu lui donnes un height soit overflow lui permet de suivre son contenant qui lui est dimensionné. Pas de bug comportement normal .
Heu mais il a un contenu : ici en l'occurence un bloc de 100px de haut ("sous_conteneur").

Et normalement c'est ce dernier qui donne sa forme au bloc contenant (règle css de base).

D'ailleurs si on regarde le rendu (sans "overflow : hidden"), on s'aperçoit que le bloc est bien là, mais seul le background de part et d'autre du "sous_conteneur" est visible.

upload/13640-css-bug.png

upload/13640-css-ok.png
Modifié par ANViL (13 Aug 2007 - 14:32)
Hello,
ghost a écrit :
Pas de bug comportement normal .

Pareil pour grey, puisque c'est une erreur : on écrit gray. D'ailleurs, un test avec le validateur aurait permis de s'en rendre compte...
Modifié par Julien Royer (13 Aug 2007 - 14:29)
Hum la syntaxe la plus correcte est "grey" (telle qu'on a toujours défini cette couleur), "gray" est une variante apparue plus récemment.

D'ailleurs les autres navigateurs acceptent les 2.

Smiley cligne
ANViL a écrit :
est-ce un bug css réel ?

Non, c'est un comportement décrit dans le spécification CSS et qui s'appelle la fusion des marges.
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Le overflow:auto|hidden est effectivement une solution pour empêcher la fusion des marges entre un élément et ses éléments enfants, solution à doubler d'un peu de HasLayout pour IE6. Sinon, une bordure ou un peu de padding peuvent faire l'affaire.

Ceci dit, à partir de l'exemple fourni, je remarque un bug de HasLayout dans IE 6-7. Quand l'élément enfant a la layout et que le parent a une bordure ou du padding, les marges de l'enfant ne fusionnent pas avec celles du parent mais... disparaissent purement et simplement (dans toutes les directions, y compris les marges latérales). Ça se corrige en conférant le layout au bloc parent... ou en évitant de conférer le layout à l'élément enfant.

Avec une série d'enfants dotés de layout, le comportement est le suivant:
- le premier enfant perd sa marge supérieure, ainsi que ses marges latérales, mais pas sa marge inférieure;
- le dernier enfant perd sa marge inférieure (mais pas la supérieure ou les latérales);
- ceux du milieu ne bougent pas.

Waouh. Smiley biggol
Florent V. a écrit :

Non, c'est un comportement décrit dans le spécification CSS et qui s'appelle la fusion des marges.
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Le overflow:auto|hidden est effectivement une solution pour empêcher la fusion des marges entre un élément et ses éléments enfants, solution à doubler d'un peu de HasLayout pour IE6. Sinon, une bordure ou un peu de padding peuvent faire l'affaire.

Ceci dit, à partir de l'exemple fourni, je remarque un bug de HasLayout dans IE 6-7. Quand l'élément enfant a la layout et que le parent a une bordure ou du padding, les marges de l'enfant ne fusionnent pas avec celles du parent mais... disparaissent purement et simplement (dans toutes les directions, y compris les marges latérales). Ça se corrige en conférant le layout au bloc parent... ou en évitant de conférer le layout à l'élément enfant.

Avec une série d'enfants dotés de layout, le comportement est le suivant:
- le premier enfant perd sa marge supérieure, ainsi que ses marges latérales, mais pas sa marge inférieure;
- le dernier enfant perd sa marge inférieure (mais pas la supérieure ou les latérales);
- ceux du milieu ne bougent pas.

Waouh. Smiley biggol


Aha ok, c'est LE lien qu'il me fallait pour comprendre ce mystère
Smiley ola

J'ai aussi compris au passage pourquoi je n'avais (de mémoire) jamais eu ce bug auparavant : j'utilise bien souvent les bloc flottant, et il se fait que le fait de mettre un bloc en float corrige la fusion des marges !

Sinon j'ai pu remarquer une bizarrerie de FF avec la propriété overflow : auto

-> à supposer que le background soit une image, et le bloc dépassant la hauteur de la page, le fait de scroller la page fait tressauter l'image de background (elle finit par revenir à sa place à la fin du scroll)

Ce drôle d'effet n'apparait pas avec overflow : hidden

Merci à tous pour m'avoir éclairé Smiley jap
Sujet clos
Aller à