Positionner une div sous un input texte

**ledisciple** · 16/05/2013, 10h36

Bonjour

Ceci positionne une div sous un input texte (affichage résutats en cours de frappe). Cela fonctionne très bien sous FF, mais pas sous IE 8. La div apparait bien mais sur le côté et pas en dessous de l'input. Qu'ais-je oublié pour que le code fonctionne bien avec (FF, IE, Chrome, Opera ...) quelque soit la version.

Merci

Code html :

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 class="contenaireDoubleCadreGauche">
	<div class="contenaireDoubleCadre">
		<div class="contenaireDoubleCadreGauche">
			<div>
				<input class="ChampPourInscrireCommune" style="float:left;" type="text" id="ChampVilleATrouver" size="46" name="ChampVilleATrouver" onkeypress="AffichageCarte('','','','','','oui')"><br />
				<div id="premonition"></div>
			</div>
		</div>
		<div class="contenaireDoubleCadreDroite">
			<input type="submit" value="Envoyer" onclick="ChercheVille('')">
		</div>
	</div>
	<div style="clear:both"></div>	
	<div id="carte" style="width:700px; height:600px; z-index:0;position:relative;float:left"></div>
 
</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
27
28
29
30
31
32
33
34
35
36
.contenaireDoubleCadre
{
text-align:center; 
margin-left:1%;
margin-right:1%;
}
.contenaireDoubleCadreGauche{
	width:50%;
	float:left;
	text-align:center;
}
.contenaireDoubleCadreDroite{
	width:49%;
	float:right;
	text-align:center;
}
#premonition{
position:absolute;
margin-top:-3px;
z-index:10;
width:300px;
border-left-style:solid;
border-left-color:red;
border-left-width:1px;
visibility:hidden;
}
.ChampPourInscrireCommune
{
background-color:#FFCCCC;
border-top:0px;
border-left-style:solid;
border-left-color:red;
border-left-width:1px;
border-right:0px;
border-bottom:0px;
}

**rodolphebrd** · 16/05/2013, 11h22

Bonjour,

auriez-vous un lien vers votre page?

**ledisciple** · 16/05/2013, 12h18

Je suis en local.

En revanche, je peux mettre ma page entière ...

ps : Autre petit détail, je n'arrive pas à forcément la hauteur de mes cadres

AdresseMarqueur
CoordonneesMarqueur
TitreDetailAdministratif
TitreDetailFederation

J'ai essayer avec min-height:16%, mais sans succès.

**Candygirl** · 16/05/2013, 14h20

Hello,

Tu ne définis aucune des propriétés left ou right pour ton #premonition positionné en absolu. Du coup il apparaît à l'endroit que le navigateur estime être le flux normal:

- tout à gauche pour FF puisque tu es en ltr par défaut
- au centre pour IE7- à cause du text-align:center sur les ancêtres

Tu noteras que tu constates le bug sur IE8 alors qu'il ne devrait pas être présent

. Il y a donc fort à parier qu'IE interprète ta page en mode Quirks et donc que ton doctype est absent/mal déclaré.

Pour éviter ce décalage sur les vieilles versions d'IE, tu peux attribuer un position:relative à #contenaireDoubleCadreGauche et un left:0; à #premonition ou encore rétablir un text-align:left genre sur le parent de ton #premonition

**ledisciple** · 16/05/2013, 15h24

Envoyé par Candygirl

Tu noteras que tu constates le bug sur IE8 alors qu'il ne devrait pas être présent

. Il y a donc fort à parier qu'IE interprète ta page en mode Quirks et donc que ton doctype est absent/mal déclaré.

Pas déclaré

mais je viens de le mettre

<!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">

Oui, je suis encore réfractaire au HTML 5.

Envoyé par Candygirl

Pour éviter ce décalage sur les vieilles versions d'IE, tu peux attribuer un position:relative à #contenaireDoubleCadreGauche et un left:0; à #premonition ou encore rétablir un text-align:left genre sur le parent de ton #premonition

Niquel, ça a réglé le problème

mais pas cela là :

Envoyé par ledisciple

Autre petit détail, je n'arrive pas à forcément la hauteur de mes cadres

AdresseMarqueur
CoordonneesMarqueur
TitreDetailAdministratif
TitreDetailFederation

J'ai essayer avec min-height:16%, mais sans succès.

**Candygirl** · 16/05/2013, 15h30

Envoyé par ledisciple

ps : Autre petit détail, je n'arrive pas à forcément la hauteur de mes cadres

En français ?

Envoyé par ledisciple

J'ai essayer avec min-height:16%, mais sans succès.

Un height ou min-height en % n'est applicable que si le height du parent est explicitement spécifié, ce qui est rarement le cas parce que rarement heureux. Tu peux essayer un minheight en em, par exemple.