probleme sous ie6

**boboss123** · 17/02/2010, 09h53

bonjour,

j'essaie de créer une dialogbox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<!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>
<style type="text/css">
.db_frame{
width: 300px;
float: left;
margin: 1em;
padding: 0.3em;
background-color:white;
border: 1px solid #c0c0c0;
}
 
 
.db_titlebar{
position: relative;
padding: 0.5em 0.3em 0.3em 1em;
background-color:#e6ebff;
border: 1px solid #c0c0c0;
}
 
.db_title{
float: left;
margin: 0.1em 0 0.2em;
font-weight:bold;
font-style: italic;
color:black;
}
 
.db_close{
position:absolute;
right:0.3em;
padding:0;
top:50%;
width:19px;
margin:-11px 0 0 0;
height: 19px;
}
 
.db_close a{
display:block;
margin:0;
padding:0;
height: 19px;
width:19px;
/*background-image: url("../croix4.gif");*/
background-color:yellow;
border: 1px solid #e6ebff;
}
 
.db_close a:hover{
border: 1px solid #c0c0c0;
background-color:#eef1ff;
}
 
 
.db_content{
margin:0.8em 0.5em;
padding:0;
}
 
.spacer { 
margin:0;
padding:0;
clear: both; 
}
 
 
</style>
</head>
<body>
	<div id="dialogbox1" class="db_frame">
		<div class="db_titlebar">
			<div class="db_title">
				Salut
			</div>
			<div class="db_close"><a href="#"></a></div>
			<div class="spacer"></div>
		</div>
		<div class="db_content">
			Mon Text ici ! dsfd sdfsdf dsfdsfsd sdfsdfdsf sdfsdf dsfdsf sdffsdf
		</div>
	</div>
</body>
</html>

comment faire pour que ça fonctionne sous IE6 ?

merci d'avance

**Erwan31** · 17/02/2010, 14h05

Bonjour,
une page en ligne faciliterait les chose, d'autre part tu ne précises pas quel est ton problème.

**boboss123** · 17/02/2010, 14h54

Envoyé par Erwan31

Bonjour,
une page en ligne faciliterait les chose, d'autre part tu ne précises pas quel est ton problème.

j'ai modifié mon premier post pour que tu n'es plus qu'a faire un copier/coller

**Erwan31** · 17/02/2010, 16h17

Envoyé par boboss123

j'ai modifié mon premier post pour que tu n'es plus qu'a faire un copier/coller

Attention aux confusions de verbe : que tu n'aies (verbe avoir au subjonctif présent)

Tu as beaucoup de chose a revoir et à simplifier.
Plutôt que de te donner la solution à ton problème et comme je suis bon prince, je t'ai corrigé le code et ajouté un peu de sémantique là ou les div sont inappropriés ou superflus.

Quelques conseils:

> Sauf effets d'agrandissement maitrisés via le zoom texte du navigateur, éviter les margin/padding horizontaux et width en em > converti tout en pixel.
> Tu n'as pas besoin d'une div pour englober tes liens qui peuvent être directement positionné en absolute.
> Choisir les éléments sémantique appropriés (hn pour les titres, p pour les paragraphe, etc etc.)
Puisque tu places ton lien en position absolute et que tu le sort donc du flux normal, tu n'as pas besoin de faire flotter le "Salut" à gauche, cela t'évite de devoir utiliser le clear de dégagement sur un élément (vieille méthode qui peut être remplacée par un overflow:hidden sur le conteneur des flottants).

Pour IE le top: 50%; se référait à la hauteur implicite de la div ancêtre la plus éloignée (sous le body) et non db_titlebar auquel il faut conférer ce qu'on appelle le layout (en lui donnant ici une hauteur de 1.5em) pour qu'il puisse servir de référent au placement de son enfant positionné de manière absolu.

Ce qui donne:
(regarde bien tout le code, j'ai fais des modifs un peu partout)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!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" lang="fr">
<head>
<style type="text/css" media="screen">
<!--
.db_frame{
	width: 300px;
	float: left;
	margin: 1em;
	padding: 0.3em;
	background: #FFF;
	border: 1px solid #c0c0c0;
}
 
.db_titlebar{
	position: relative;
	padding: 0.5em 0.3em 0.3em 1em;
	background:#e6ebff;
	border: 1px solid #c0c0c0;
	height: 1.5em;
}
 
.db_frame h3 {
	margin: 0.1em 0 0.2em;
	font-weight: bold;
	font-style: italic;
	color: #000;
}
 
.db_titlebar a {
	position:absolute;
	top: 50%;
	margin-top: -10px;
	right:5px;
	height: 19px;
	width:19px;
	background: #FF0;
	border: 1px solid #e6ebff;
}
 
.db_close a:hover{
	border: 1px solid #c0c0c0;
	background:#eef1ff;
}
 
 
.db_content{
	margin:0.8em 0.5em;
	padding:0;
}
 --> 
</style>
</head>
<body>
	<div id="dialogbox1" class="db_frame">
		<div class="db_titlebar">
			<h3>Salut</h3>
			<a href="#"></a>
		</div>
		<p class="db_content">Mon Text ici ! dsfd sdfsdf dsfdsfsd sdfsdfdsf sdfsdf dsfdsf sdffsdf</p>
	</div>
</body>
</html>