18041 sujets

Questions générales et questions de débutants

Un background-color qui annule un height IE6 ????

Bonjour,
je viens de tomber sur un truc incroyable, je ne trouve pas a priori d'article a propos de ce sujet, je poste ici mon avanture pour que vous puissier me dire si je fait une enorme erreur ou pas...

C'est tres court, vous allez voir...
soit une classe :

.x {	width:6px;
	height:6px;
	line-height:6px;
	border:1px solid red;
}

avec le html :
<div class="x"></div>

dés que je rajoute background-color:blue;
alors sous IE6, le height (et le line-height) de mon div n'est plus pris en compte !!!!
incroyable, non ?
normalement je dois avoir un petit carré de 6 par 6, sous IE6 j'ai un rectangle uniquement si je met le background...

comment fixer à 6px la heuteur tout en ayant une couleur de fond? merci.
Modifié par hpfx (27 Mar 2008 - 15:28)
Bonjour,

.x {
	width: 6px;
	height: 6px;
	line-height: 1px;
	font-size: 1px;
	border: 1px solid red;
}
Ça fait un carré de 8x8px (bordure comprise).
hein ?
je ne comprends pas ?!
comment ca ? il faut bidouiller sur le font-size ?
pourquoi ? (uniquement quand il y a un background!!!)
Modifié par hpfx (27 Mar 2008 - 15:43)
A priori autre chose interfère pour que la taille change. Les bugs d'IE6 ne vont pas jusque là... j'espère Smiley eek
skywalk3r a écrit :
A priori autre chose interfère pour que la taille change. Les bugs d'IE6 ne vont pas jusque là... j'espère Smiley eek

non, j'ai fait une page vide, il n'y a rien qui interfere :
voilà le code complet :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>Sans titre</title>
</head>

<body>
<style>
	.x {

		width:6px;
		height:6px;
		line-height:6px;
		border:1px solid red;
   background-color:blue;
		
	}
</style>
<div class="x"></div>

</body>
</html>

ha oui et pendant que j'y suis j'ai testé avec cette DTD aussi :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
donc je ne suis pas en quirks mode Smiley cligne

..il semble que les bugs VONT jusque là... Smiley eek
Modifié par hpfx (27 Mar 2008 - 15:46)
SiDi a écrit :
Bonjour,

Rectangle vertical ou horizontal? (Je n'ai pas IE6 Smiley langue )

il garde sont width, mais le height est plus grand, un rectangle vertical donc.

mais le pire, c'est que quand je retire le backgrond-color (ou background) c'est ok. sinon en bidouillant le font-size ca marche aussi, mais c'est crado ca!!!
a écrit :
..il semble que les bugs VONT jusque là... eek


Smiley biggol Je confirme... je viens de tester... désopilant...délirant même...

edit : et en effet en mettant le font-size à 0 ça fonctionne. Ca rend le bug encore plus délirant.
Modifié par skywalk3r (27 Mar 2008 - 15:52)
C'est le line-height, je pense.

Sans background et sans contenu, IE respecte la width et la height mais rien de plus, pas de line-height puisque pas de contenu inline.

Avec un background, IE s'efforce de considérer qu'il y a contenu, puisqu'il doit afficher ce background, qu'il considère (à tort ?) comme une information à afficher tout autant qu'un texte, par exemple.

Ce ne sont que des suppositions, mais ce n'est peut-être pas un bug, mais une logique d'interprétation au final assez logique d'un point de vue IE-esque.

IE doit afficher son background, donc ce n'est plus un div sans contenu, donc il ne se contente pas de width & height.

(Ce ne sont que des suppositions Smiley lol )
hpfx a écrit :
donc je ne suis pas en quirks mode Smiley cligne

Avec le premier Doctype que tu cites (Doctype HTML 4.0 Transitional sans URL de la DTD, tu es en mode Quirks.

Quand au fond de l'affaire, il vient du fait que:
1. IE6 ne gère pas correctement height;
2. IE6 donne aux blocs la hauteur d'une ligne de texte, même si ces blocs n'ont pas de contenu.

J'avoue par contre que le coup du background me surprend. Il faudrait que je teste ça.
Modifié par Florent V. (27 Mar 2008 - 16:25)
SiDi a écrit :
C'est le line-height, je pense.

Sans background et sans contenu, IE respecte la width et la height mais rien de plus, pas de line-height puisque pas de contenu inline.

ben non justement, essaye sns le line-height (et sans le background) tu vera, ca ne marche pas.
en fait pour être honette, j'ai justement mis le line-height pour que ca marche.
donc si on l'enleve, ben ca ne marche plus (qu'il y ai un background ou pas)

Florent a écrit :

Avec le premier Doctype que tu cites (Doctype HTML 4.0 Transitional sans URL de la DTD, tu es en mode Quirks.

oui je sais c'est pour celà que j'ai mis la DTD, parceque je me suis dis, tiens il y en a qui vont me dire que c'est parceque je suis en quirks, donc je mets aussi la DTD du strict pour que l'on vois que j'ai aussi testé en strict Smiley cligne
Modifié par hpfx (27 Mar 2008 - 17:13)
Ma foi, alors c'est sans doute l'inverse du contraire dans l'autre sens ! Smiley sweatdrop

Il affiche la height en présence d'un background, et le line-height le force à dessiner le div. Smiley langue
Administrateur
Bonjour,

je m'y perdais dans les différents cas alors voilà un petit récapitulatif des cas possibles (voir la table logique en bas)

Sans line-height: height est pris en compte qu'il y ait ou non du contenu (4 derniers cas)

Avec line-height et du contenu: line-height est pris en compte (peu importe qu'il y ait un fond ou pas, cas 1 et 3)

Avec line-height mais sans contenu: line-height est pris en compte s'il n'y a pas de couleur de fond; pas pris en compte s'il y a un fond.
Autrement dit, height l'emporte s'il y a une couleur de fond.

EDIT: quel est le comportement "normal" avec des éléments vides?
EDIT2: sans Doctype, même résultat
Modifié par Felipe (27 Mar 2008 - 22:04)
Modérateur
bonjour,

en mode standard , le font-size , au plus egal a la hauteur voulue , suffit a 'fixer' les dimensions de la 'boite' , hauteur , bordure , fond avec ou de sans.

Généralement pour fixer la hauteur on fait usage de font-size ou de overflow:hidden; , le line-height est lui plutôt utile pour la balise a , ... pour agrandir la hauteur ou espace d'affichage de cette balise

exemple : 

<!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>
<title>test</title>
<style type='text/css'>
.x {	
border:1px solid red;
background-color:yellow;
line-height:1.4em;/* tester sans et dans IE */
}
</style>
</head>
<body>
<div>ee
<a href="" title=""  class="x">test</a>eee
</div>
</body>
</html>

Sans line-height superieur a 1.2em , point de bordures top ou bottom dans IE ... testez !



En mode quirk , c'est la fête !

d'abord , le modèle de boite n'est pas standard . .. en quirk : border+width+padding ...

le line-height joue un role et recadre la hauteur d'1em par defaut a celle de l'interligne. .. ce qui donne un carré de 8px de hauteur par !? 6px de largeur ....

avec une couleur de fond , le line-height est inefficace , retour donc a l'option : font-size ou overflow:hidden;

La couleur de fond a un effet a mi chemin entre position:relative; (rafraichit un element a l'ecran) et zoom:1; (effet de layout) , cette effet de semi rafraichissement ou recalcul de l'affichage d'un element voit souvent son utilité sur un roll-over de la balise a , ou on constate que l'application d'une valeur de background permet d'activer des regles css lié a :hover qui semble être ignorée par IE.

.. En bref , IE est une vrai mine a bug a 2 moteurs de rendu siouplait , et y'a souvent de quoi perdre ces cheveux quand avec si peu d'element et de css on arrive a cumuler autant de défauts héhé , jolie exemple que voila , mais bon c'est pas une vrai page ouaib ! Smiley langue .

La premiere démarche est avant tout de faire usage d'un doctype valide pour limiter les interprétations hasardeuses de IE ,et de se mettre en favori quelques pages recensent les bugs les plus fréquents et leur soluce (Ce forum regorge de topic epinglés et de ressources diverses , dont des liens vers ce genre de pages).

Bonne soirée

GC

(usez de font-size ou overflow , pas du line height dans ce cas )
<edit>
puis juste pour rappel pour les lecteur par defaut un element block vide fait 0 de hauteur dans firefox (par ex:) et au moins 1 em dans IE , source de petit defaut quand la hauteur a fixer est inferieur a 1em.

1em = la taille d'affichage de la police dans votre navigateur , si elle n'est pas précisée dans la feuille de style , ce sera donc : la taille d'affichage par defaut de votre navigateur </>
Modifié par gcyrillus (27 Mar 2008 - 22:24)
Sujet clos
Aller à