Position de deux div différent celon le border

Bonjour à tous

Il m'arrive une petite chose bien étrange.

Si je mets un "border : 1" sur un élément, le deuxieme élément ce place bien. Par contre si je retire le border, le deuxieme élément ce place un peut la ou il veut.

Voici en image :

http://www.dournaux.com/pb_decallage.jpg


et maintenant le code :

#conteneur {
	width 		: 980px;
	margin 		: auto;
	padding 	: 0 0 0 0;
	text-align 	: left;
	position	: relative;
	border:0px solid #33FF00;
}

#langue {
	text-align : left;
	height : 14px;
	max-width:100px;
	background-color:#5b6349;
	border	: 1px solid #767d60;
	border-top: 0px;
	margin-left:30px;
}

#zone-site{
	height		: 134px;
	padding-left	: 50px;
	border:1px solid #FFFFFF;
}

#zone-site #site{
	font-size	: 48px;
	font-weight	: bold;
	color		: #FFFFFF;
	margin-top	: 30px;
}

#zone-site #sousdomaine{
	font-size	: 14px;
	font-weight	: bold;
	color		: #80c603;
	
}

#menu {

}

#menu ul {
	
}

#menu li {
	display		: inline;line-height:44px;
	font-size	: 14px;
	margin-left	: 20px;
	color		: #dddedc;
}

J'ai compris que le decallage vient du margin-top a 30px, mais pourquoi le fait de mettre un border change tout ?

#zone-site #site{
	font-size	: 48px;
	font-weight	: bold;
	color		: #FFFFFF;
	[b]margin-top	: 30px;[/b]
}

Comment donc placer mlon titre et sous titre dans mon div sans que cela decalle le div du dessou ? la solution ce toruve t elle dans l'absolute ?

Voila, je sens bien qu'il y a une petite feinte qui m'echape aussi je m'en remet a vos avis d'expert !


Merci d'avance pour vos réponses
Modifié par superchoupa (19 Feb 2010 - 12:37)

J'ai remplacé le margin par padding et maintenant tout ce place parfaitement.

Etait-ce "la" solution ou une solution parmis tant d'autre ? Si oui je marquerais résolue dans mon post.

Sans ta structure HTML, c'est difficile de répondre car je visualise mal le problème que tu avais et donc la meilleure solution à celui-ci.

De plus, tu testais avec quel navigateur ? As-tu testé sur une variété de navigateurs ?