Positionnement et espace non désiré

**tom42** · 15/02/2007, 10h11

Bonjour,
j'ai deux champs <input> de type text contenu dans des <div>. Le problème est que ce con de IE me laisse un espace entre les deux input alors que FF et safari non.

Voila à quoi ca resemble :

le html :

Code :

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

1
2
3
4
5
6
7
8
9
 
<body>
  <div id="conteneur">
    <form action="" id="form">
       <div><input type="text" id="ville"></div>
       <div><input type="text" id="ville2"></div>
    </form>
  </div>
</body>

La css :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css">
  body,div{
    margin : 0px;
    padding : 0px;
    border : solid #000 0px;
  }
  input{
    margin : 0px;
    padding : 0px;
    border : solid #000 1px;
  }
</style>

Le problème vient des <input> car en les remplaçant par du texte et en affichant les borders des <div> qui les contenaient il n'y a plus d'espace.
Si j'enléve les <div> des <input> et que je met un <br> deriere le premier même combat.

Bon alors evidemment ceci est l'exemple épuré de tous le reste, pris comme ça sert à rien mais j'aimerai bien comprendre alors si vous avez une idée.
Merci d'avance.

**Space Cowboy** · 15/02/2007, 10h15

Code :

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

1
2
3
4
5
6
7
8
<body>
  <div id="conteneur">
    <form action="" id="form">
       <div><input type="text" id="ville"></div>
       <div><input type="text" id="ville2"></div>
    </form>
  </div>
</body>

Intéret ?

Tu veut faire quoi ?

**tom42** · 15/02/2007, 10h32

En gros, j'ai des blocs invisibles en position absolus qui sont remplies dynamiquement en fonction de ce qui est saisi dans les <input> et qui s'afficheront en menu contextuel sous ces derniers. L'espace fait que le deuxième blocs sera mal positionné sous IE.

Mais c'est pas la question, la vrai question c'est d'ou sort ce @&!! d'espace.

**Space Cowboy** · 15/02/2007, 10h38

IE gère différement les padding margin que firefox. Sans exemple concret je ne peut pas t'aider plus ...

**tom42** · 15/02/2007, 10h53

Ben cet exemple est concret, il est simplifié au maximum d'accord mais si j'arrive pas le résoudre comme ça, je ne le résoudrais jamais. Si je rajoute le reste de la page ça ne changera rien mis à part que la lecture deviendra difficile.
Sinon je sais que IE gére differement les marges mais là tous les éléments presents sur la page ont un padding et un margin à 0.

**trotters213** · 15/02/2007, 12h52

Ce c.. d'IE (comme tu le dis si bien

) rajoute des marges aux input.
Pour palier à ton ton problème tu peux rajouter ceci au début de ton CSS :

Code :

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

1
2
3
4
* {
margin:0;
padding:0;
}

**tom42** · 15/02/2007, 14h11

Et non pas mieux, tout façon je l'avait dejà mis pour tous les <input> de la page.
Enfin merci quand même pour vos réponses. J'abandonne, je vais faire autrement.
IE gagne par forfait

**trotters213** · 15/02/2007, 14h27

Tu peux t'en sortir avec un position:absolute; (ça marche c'est sur).

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
17
18
19
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
/*le code CSS*/
</style>
</head>
 
<body>
<div id="conteneur">
    <form action="" id="form">
       <input type="text" id="ville" />
       <input type="text" id="ville2" />
    </form>
  </div>
</body>
</html>

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
* {
margin:0;
padding:0;
}
 
body, div {
border : solid #000 0px;
}
 
input {
border : solid #000 1px;
}
 
#ville2 {
position:absolute;
left:0;
top:15px;
}

**tom42** · 15/02/2007, 15h02

Effectivement, là, il n'y a plus d'espace entre les <input>. Cela dit il y a une difference de quelques pixels entre IE et les autres.
Je vais utiliser cette solution mais ça ne m'explique toujours pas pourquoi en position static si on enleve toutes les marges IE laisse un espace.
Merci pour ta réponse.

Positionnement et espace non désiré

Positionnement en CSS

Discussions similaires

Partager

Partager