Discussion :

[SoGood]

Bonjour,

j'utilise margin-top pour placer un formulaire ds une div mais une chose bizarre ce produit.
Sous IE7 ca marche mais sous FF3 le margine-top ne marche que si je lui applique un border

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
19
 
<div id="block_loggin">
	<form action="index.php?pg=loggin" method='post'>
   	  	<p class="double">
      		<label for="f1-loggin">Identifiant</label>
        	<input type="text" name="loguser" id="f1-nom"/>
      	</p>
      	<p class="double">
      		<label for="f1-pass">Mot de passe</label>
        	<input type="password" name="passuser" maxlength="20" id="f1-pass"/>
      	</p>
      	<p class="simple">
      		<input type="submit" value="Envoyer" />
      	</p>
		<p class="simple" id="erreur_auth">
   		  <? echo $erreur; ?>
		</p>
	  </form>	  
</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
#block_loggin {
	margin-left:auto;
	margin-right:auto;
	margin-top:120px;
	width: 400px;
	height:400px;
	background-image:url(global_img/cadenas_fond.png);
	background-repeat:no-repeat;
	overflow:inherit;
	/*border:ridge;*/ fonctionne ds firefox ?
}
 
form {
	margin-top:150px;
}
 
form .double {
	overflow: inherit;
	width:100%;
	margin-top:10px;
	text-align:center;
}
 
form .double label {
	float:left;
	width:150px;
	text-align:right;
	font: bold 90%/110% Arial, Helvetica, sans-serif;
}
 
form .double input {
	width: 200px;
	/*margin-left:12px;*/
}
 
form .simple {
	margin-top:5px;
	text-align:center;
 
}
 
#erreur_auth {
	font-size:15px;
	color:#F00;
}

D'ou vient le problème ???

Merci d'avance

[Macmillenium]

Bonsoir,

Il s'agit d'une fusion des marges, comportement standard.
Les marges supérieurs du form ont fusionnés avec celles du parent #block_loggin, les propriétés border, overflow:hidden/auto, padding empêchent cette fusion, ce qui explique l'obtention du rendu souhaité en ajoutant simplement des bordures.

Quant à IE7-, le fait de conférer le layout au parent (le width ou height 400px dans ton cas) suffit pour corriger ce problème.

[SoGood]

Grâce a tes infos, j'ai pu orienter ma recherche.
J'avais testé le padding ds mon bloc parent mais ça l'agrandissait de la valeur du padding.
Je donne l'astuce que j'ai trouvé, ça peu servir à d'autre :
Il faut simplement ajouter ds la description du bloc parent

Code :

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

padding:1px 0;

Merci pour ton aide