Ajustement de div et span

**Katachana** · 15/09/2009, 18h12

Bonjour,

J'ai un probleme de compatibilté avec IE6, ca fait deja un bout de temps que je le traine.....

Alors afficher ceci :

Date de naissance : INPUT_TEXT
------JJ/MM/YYYY

Sachant que INPUT_TEXT est un input

, et l'input se trouve centré verticalement par rapport au texte (Date de naissance et JJ/MM/YYYY).

Pour l'instant j'ai fait ca :

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
 
<div id="D_BIRTHDATE_0" class="d_birthdate">																	
<span class="birth_format">		
<div>
<label for="BIRTHDATE" class="d_label">
Date de naissance
</label>
</div>				
<div class="d_date_pattern">
JJ/MM/AAAA
</div>	
</span>	
<span>	
<input type="text" value="" id="BIRTHDATE" class="d_input"/>
</span>
</div>

et le css :

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
 
.d_input{
	width:180px;
	text-align:left;
	vertical-align: middle;
}
div.d_date_pattern{
	color:#82857c;
	padding-left:20px;
}
.d_label{
	width:130px;
	text-align:left;
	font-weight:bold;
	vertical-align: middle;
	float:left;
}
.birth_format{
	float:left;
	vertical-align:middle;	
}
div.d_birthdate{
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
}

Mais ca ne marche toujours pas sous IE, Auriez une piste ou un conseil ?

Merci d'avance !!!

**Erwan31** · 15/09/2009, 20h06

Bonjour,
pourrais tu être plus clair sur le bug rencontré et ce que tu souhaites obtenir.

ce code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="birth_format">		
<div>
<label for="BIRTHDATE" class="d_label">
Date de naissance
</label>
</div>				
<div class="d_date_pattern">
JJ/MM/AAAA
</div>	
</span>	
<span>	
<input type="text" value="" id="BIRTHDATE" class="d_input"/>
</span>

Comprends trop de balises inutiles et un span ne peut contenir que des éléments inline (strong, a, i...) :

Code :

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

1
2
3
4
5
6
7
 
<div class="birth_format">		
<label for="BIRTHDATE" class="d_label">Date de naissance</label>
<span>(JJ/MM/AAAA)</span>	
<input type="text" value="" id="BIRTHDATE" class="d_input" />
 
</div>

**Katachana** · 15/09/2009, 21h36

En fait , le problème sous IE , est que tout s'affiche a la suite sur une ligne. Alors que je souhaite que le format de la date s'affiche en dessous du texte : Date de naissance

Merci d'avance !

**Erwan31** · 15/09/2009, 22h40

Pour info la propriété vertical-align ne s'applique qu'aux élément de rendu inline et table-cell (et donc non flottant)
Tu peux faire bien plus simple en transférant le format de date dans le lable comme ceci:

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
<style type="text/css" media="screen">
<!--
.d_input{
	width:180px;
	text-align:left;
}
.d_label{
	float:left;
	text-align:right;
	font-weight:bold;
	margin-right:10px;
}
-->
</style>
</head>
<body>
<label for="BIRTHDATE" class="d_label">Date de naissance<br />(JJ/MM/AAAA)</label>
<input type="text" value="" id="BIRTHDATE" class="d_input" />
</body>

**Katachana** · 15/09/2009, 22h46

Merci beaucoup !!
ça parait si simple vu comme ça

Ajustement de div et span

CSS

Vue hybride

Discussions similaires

Partager

Partager