Form et div en absolu

**tom42** · 21/02/2007, 15h12

Bonjour,
je rencontre un problème de positionement d'un <div> en absolue et d'un <form> avec IE.
Un exemple vaut mieux qu'une longue explication. Ouvrez ces 2 liens avec IE :
test1
Ici tout va bien, mon div se trouve en dessous.

test2
Et là, il se trouve en dessous mais aussi à gauche

Si vous lisez les sources vous verrez que la seul difference est que le <div> se trouve en dehors du <form> dans le 1er cas et à l'interieur dans le deuxième.
Notez qu'avec safari et ff les deux versions donnent le même rendu.
J'attend vos remarques, merci d'avance.

**tom42** · 21/02/2007, 18h24

Bon je vois que le sujet ne déchaine pas les foules mais j'ai trouvé tout seul

En fait les doctypes et les dtd ne servent pas à rien

Pour calmer IE il suffit d'ecrire les choses proprement. Donc après de nombreux efforts, j'ai rendu ma page valide pour xhtml strict et maintenant ça marche partout.

voici le code de la page

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
 
<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
   <head>
    <title>Selection de ville</title>
   	<style type="text/css">
		* {
			margin : 0;
			padding : 0;
		}
    	#conteneur{
        	position : relative; 
    	}
    	#box{ 
        	position : absolute;
        	border : solid #000 1px;
        	top : 20px;
    	}
	</style>
  </head>
  <body>
  	<div id="conteneur">
			<form action="">
				<div><input type="text" id="texte"/></div>
				<div id="box">
					ligne1<br />
					ligne2<br />
				</div>
			</form>
		</div>
  </body>
</html>