[CSS] Bug IE avec height ne marche pas avec les %

Version imprimable

Bonjour, j'ai un bug CSS qui n'intervient que sous IE.

J'ai un div conteneur placé en position relative. À l'intérieur, j'ai du contenu ainsi qu'un autre div en absolute qui doit occuper toute la hauteur de ce bloc avec une largeur fixe.
L'effet est basique, mais ne fonctionne pas avec IE qui se met à faire n'importe quoi dès que height est en poucentage.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<title>Test</title>
		<style type="text/css">
			div#conteneur{
				position:relative;
				width:50%;
				background-color:#000;
			}
			div#conteneur div.extra_div{
				position:absolute;
				top:0;
				left:0;
				width:30px;
				height:100%;
				background:#900;
			}
			p{
				color:#fff;
				margin-left:30px;
			}
 
		</style>
	</head>
	<body>
		<div id="conteneur">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</p>
			<div class="extra_div"></div>
		</div>
	</body>
</html>

Ca m'étonne, mais je n'ai trouvé aucun sujet nulle part en traitant.

23/06/2005, 16h01
Bibicmoi

Il me semble en avoir deja parle une fois... J avais le meme probleme avec les input ou un truc dans le genre.
J avais trouve plein de reponse, j ai tout essaye mais ca marchait pas pour mon probleme, alors j ai un peu tout zappe et melange.
Alors m en veux pas si ca marche pas ce que je te dis, mais ca doit quand meme etre dans la bonne direction.
Il faudrait que tu donnes aussi une valeur height a ton body et tres certainement a ta balise html. Cherche de ce cote la, il me semble que c est ce qui avait ete dit.
Sinon, tu peux essayer de mettre la taille de la police en %, comme ca, ca devrait peut etre changer la taille de ton div.
Enfin, je crois...
:oops:

Je viens de m'en sortir.

IE est incapable de s'en sortir si le conteneur n'a aucune hauteur définie explicitement.

Je lui ai ajouté ça :
height:auto !important;
height:0;

Et ça va beau coupmieux.

Tant mieux, ça me permet de finir ce sur quoi je travaillais :

Attention, roulements de tambour...

Le moyen de personnaliser à loisir les coins ET LES BORDURES d'un conteneur, EN LE GARDANT ELASTIQUE (si on veut).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Test bordures</title>
		<style type="text/css">
		body{
			text-align:center;
		}
		div.conteneur_externe{
			position:relative;
			margin:2em auto;
			padding:0;
			width:70%;
			height:auto !important;
			height:0;
		}
		div.conteneur_interne{
			padding:30px;
		}
		p{
			margin:0;
			padding:0;
			text-align:justify;
		}
		div.div_extra1,
		div.div_extra2,
		div.div_extra3,
		div.div_extra4{
			position:absolute;
			width:20px;
			height:20px;
		}
		div.div_extra1{
			top:0;
			left:0;
			background:#b88;
		}
		div.div_extra2{
			top:0;
			right:0;
			background:#8b8;
		}
		div.div_extra3{
			bottom:0;
			right:0;
			background:#88b;
		}
		div.div_extra4{
			bottom:0;
			left:0;
			background:#b8b;
		}
		div.div_extra5,
		div.div_extra6,
		div.div_extra7,
		div.div_extra8{
			position:absolute;
			overflow:hidden;
		}
		div.div_extra5 span,
		div.div_extra6 span,
		div.div_extra7 span,
		div.div_extra8 span{
			display:block;
			position:absolute;
			width:100%;
			height:100%;
		}
		div.div_extra5{
			width:100%;
			height:20px;
			top:0;
			left:20px;
		}
		div.div_extra5 span{
			right:40px;
			background:#8ee;
		}
		div.div_extra6{
			position:absolute;
			width:20px;
			height:100%;
			top:20px;
			right:0;
			overflow:hidden;
		}
		div.div_extra6 span{
			left:0;
			bottom:40px;
			background:#e8e;
		}
		div.div_extra7{
			width:100%;
			height:20px;
			bottom:0;
			left:20px;
		}
		div.div_extra7 span{
			right:40px;
			background:#e88;
		}
		div.div_extra8{
			width:20px;
			height:100%;
			top:20px;
			left:0;
			overflow:hidden;
		}
		div.div_extra8 span{
			left:0;
			bottom:40px;
			background:#88e;
		}
		</style>
	</head>
	<body>
		<div class="conteneur_externe">
			<div class="div_extra1"><span></span></div>
			<div class="div_extra2"><span></span></div>
			<div class="div_extra3"><span></span></div>
			<div class="div_extra4"><span></span></div>
			<div class="div_extra5"><span></span></div>
			<div class="div_extra6"><span></span></div>
			<div class="div_extra7"><span></span></div>
			<div class="div_extra8"><span></span></div>
			<div class="conteneur_interne">
				<h1>Lorem ipsum</h1>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
				</p>
			</div>
		</div>
	</body>
</html>

div_extra1 à div_extra4 servent aux quatres coins, div_extra5 à div_extra8 servent aux bordures.

Bon, là c'est vrai que c'est pas très impresionnant, mais avec des images pour les coins arrondis et les dégradés sur les bordures, ça devrait être plus mieux :wink:

23/06/2005, 17h11
gibigue

Sympa.

Léger le code :lol:

Vivement que border-radius soit géré par IE...
;)