Espace entre les inputs

**Floyus** · 21/05/2013, 08h54

Bonjour,
J'ai crée un formulaire tout simple avec 2 inputs sur 2 ligne différentes.
Sur Chrome entre les 2 inputs il y a un léger espace.
Alors que sur IE les inputs sont collées ?!
Chrome :

IE :

Pourquoi les 2 navigateurs ne réagissent pas de la même façon avec des balises <input>

Comment faire pour remédier à cela ?
Je peux ajouter mon CSS s'il le faut. Mais peut être que c'est une erreur toute bête.

Merci d'avance !

**rodolphebrd** · 21/05/2013, 08h59

Bonjour,

Les éléments de formulaires ont des rendus différents selon les navigateurs.

Dans votre cas un reset css des marges pourrait aider.

Montrez-nous votre code pour vérifier (html et css)...

**Bovino** · 21/05/2013, 09h01

As-tu bien renseigné le doctype ?

**Floyus** · 21/05/2013, 09h04

Re,
Voici quelques morceaux de mon code HTML et CSS de mon formulaire...

HTML

Code html :

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

1
2
3
4
5
6
7
8
<div id="register">
	<h3>Already registered ?</h3>
	<label>Student ID : </label>
	<input type="text" name="id_student" value="<?php echo $_SESSION['id_student'] ;?>" > <br />
	<label>Password : </label>
	<input type="password" name="pass" > <br />
	<p style="position:absolute;bottom:0; margin-left:100px;"><input type="submit" name="valid_register" value="Connect" > </p>
</div>

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
#register{
	position:relative;
	width:300px;
	height:225px;
	float : left;
	margin-left:50px;
	border: 1px solid black;
	padding:5px;
	background-color :#D9D0C3 ;
}
input[type="submit"]{
	width:100px;
	height:50px;
	color:#343434;
	-moz-box-shadow: 0px 0px 10px #343434;
	-webkit-box-shadow: 0px 0px 10px #343434;
	-o-box-shadow: 0px 0px 10px #343434;
	box-shadow: 0px 0px 10px #343434;
	border: 1px solid #656565;
	background:#cfcfcf;
}
input[type="submit"]:hover{
	color:white;
	-moz-box-shadow: 0px 0px 10px #343434;
	-webkit-box-shadow: 0px 0px 10px #343434;
	-o-box-shadow: 0px 0px 10px #343434;
	box-shadow: 0px 0px 10px #343434;
	border: 1px solid #656565;
	background:black;
}

Merci d'avance,

**Floyus** · 21/05/2013, 09h08

Concernant le doctype j'utilise celui de l'html5 :

Code html :

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

<!DOCTYPE HTML >

Merci Poutchyouk pour ta solution. Si je n'ai rien d'autre je passerais par ça.

**rodolphebrd** · 21/05/2013, 09h18

comme je vous le disais un reset un margin-top en pourcentage.

Code css :

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

1
2
3
4
5
6
7
*{
  margin:0;
  padding:0;
}
input {
   margin-top:5%;
}

@ Poutchyouk :petite erreur de syntaxe il faut ":" à la place de "=" pour le margin-top

**Floyus** · 21/05/2013, 09h35

Effectivement ta solution marche très bien. Je dois retravailler un peu le reste car toutes les marges ont été modifier, mais ça devrait aller.

Merci bien

Invité · 21/05/2013, 09h03

Salut,

IE ne réagit pas de la meme façon parce que IE est IE (pas le moment de troller).
Tu peux rajouter des conditions d'application pour ton css.

Code html :

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

1
2
3
<!--[if IE]>
    <link type="text/css" rel="stylesheet" href="styles-ie.css" />
<![endif]-->

Et ajouter un petit

Code css :

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

1
2
3
input {
   margin-top = 15px;
}

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
20
21
22
23
24
25
<!--[if gte IE 6]> pour IE 6.0 et version plus récentes <![endif]-->
 
<!--[if IE 5.0]> pour IE 5.0 <![endif]-->
 
<!--[if IE 5.5000]> pour IE 5.5 <![endif]-->
 
<!--[if IE 6]> pour IE 6.0 <![endif]-->
 
<!--[if IE 7]> pour IE 7.0 <![endif]-->
 
<!--[if IE 8]> pour IE 8.0 <![endif]-->
 
<!--[if IE 9]> pour IE 9.0 <![endif]-->
 
<!--[if gte IE 7]> pour IE 7 et supérieur <![endif]-->
 
<!--[if lt IE 7]> pour IE inférieur à IE 7 <![endif]-->
 
<!--[if lte IE 6]> pour IE 5.0, IE 5.5 et IE 6.0 mais pas IE7.0 et plus <![endif]-->
 
<!--[if (lt IE 6)|(IE 8)]> pour IE inférieur à IE 6.0 ou si IE 8 <![endif]-->
 
<!--[if (gt IE 5)&(lt IE 7)]> pour IE supérieur à IE 5.0 et inférieur à IE 7 <![endif]-->
 
<!--[if !IE]><!--> si ce n'est pas IE <!--<![endif]-->

Espace entre les inputs

CSS

Vue hybride

Discussions similaires

Partager

Partager