[Résolu] Margin dans firefox : avec ou sans border...

Bonjour à tous,


Je rencontre un problême que j'ai du mal à m'expliquer. Sous Firefox, lorsque j'utilise un margin pour positionner un élément, j'ai l'impression qu'il lui faut un élément "en dur" contre lequel s'appuyer pour prendre en compte le margin correctement ; je m'explique : deux boîtes imbriquées ; la boîte intèrieure est positionnée dans la boîte contenante avec un margin-top. sans bordure autour de mon div contenant, c'est ce dernier qui semble subir le margin (!?) - la boîte extèrieure se retrouve au dessous de sa position attendue tandis que le div à l'intèrieur est positionné contre son bord supèrieur. si je rajoute à cet élement un simple border-size=1px, j'obtiens l'effet que je recherche.

Le source HTML :

	<div id="header">
		<!-- Zone de recherche rapide -->
		<a href="#" name="search"></a>
		<form name="searchform" id="searchform" method="POST" action="index.php?module=pi&amp;class=search" class="simpleSearch">
			<label id="searchstringLabel" for="searchstring" class="searchlabel">Recherche</label>
			<input id="searchstring" type="text" name="query" value="<?=$query;?>" onFocus="select();" class="searchstring" />
			<input type="submit" value="Search" class="searchbutton" />
		</form>
	</div>

et la feuille de style :

#header { /* bandeau */
	height				: 105px; /* Hauteur du bandeau = 81+24 = 105 */
	width				: 100%;
	background			: #8C143C url(graphics.v2/header_left.jpg) no-repeat top left;
border				: 1px transparent solid; /* pb firefox  sans */
}

/*----------------------------------------*
** zone de recherche rapide
**----------------------------------------*/
#header .simpleSearch {
	margin-top			: 81px; /* hauteur du bandeau image */
	width				: auto;
	height				: 24px; /* Hauteur zone recherche */
	background-color	: #500C2B;
}

Est-ce un comportement connu de Firefox ? J'ai pourtant cherché sur le net, et je n'ai rien trouvé à ce sujet...

Merci,
Bonne journée.
Modifié par lex (28 Aug 2007 - 16:10)

Salut lex ,

Tu es confronté à un problème de Fusion des marges !

Une autre solution que le border serait d'utiliser overflow: hidden; (ou auto).

A+

Merci,

C'est tout à fait ça !
Je me contente d'un overflow:auto en guise de correction, mais je reste perplexe. Est-ce un comportement normal ? un bug d'interpretation ?

Dans le premier cas, il y a quelque chose qui m'échappe.

Merci, en tout cas.