Bonjour,

Je me permets de requérir votre aide pour un petit problème de positionnement qui m'a demandé pas mal d'heures de reflexions, j'ai finalement trouvé une réponse mais un problème persiste sous firefox.

Je cherche à faire un style de cadre extensible à l'horizontal constitué de plusieurs images (une pour le haut , une pour le bas et une pour chaque coté). Mais voila, après avoir pas mal cherché et galéré j'ai trouvé une solution qui à défaut d'être très propre à le mérite de fonctionner (en tout cas sous IE :s). Malheureusement, sous Mozilla, un espace dont je ne comprends pas la provenance s'introduit entre mon bord haut et mes bords gauche et droites.

J'espère que quelqu'un trouvera un peu de temps et de patience pour m'aider.


Le cadre principal est constitué donc de 4 images , une pour le haut du cadre, une pour le bas et 1 pour chaque coté.
Le cadre inclu au milieu sera voué à ajouter des screenshots dans un article, il est donc composé d'une seule image a dimension fixe.

Voila le code xhtml :

<div class="borderhaut"></div>
<div class="bordergauche">
	<div class="borderdroit">
		<div class="texte_news">
			<h2><?php echo $donnees['titre']?></h2>
			<h5>Le <span class="date"><?php echo $jour_conv?></span> à <span class="date"><?php echo $donnees['heure']?></span><br/></h5>
			<p><?php echo $contenu ?></p>
			<p><span class="signature"><?php echo $donnees['pseudo'] ?></span></p>
		</div>
		<div class="screen"></div>
	</div>
</div>
<div class="borderbas"></div>

#contenu
{
width:983px;
margin:auto;
}


.borderhaut{
width: 983px;
height: 22px;
background-image:url("images/borderT.png");
}

.borderbas{
float:left;
width: 983px;
height: 29px;
background-image:url("images/borderB.png");
}

.borderdroit{
width:983px;
background-image:url("images/borderR.png");
background-repeat:repeat-y;
background-position:right;
}
.bordergauche{
background-image:url("images/borderL.png");
background-repeat: repeat-y;
width:983px;
background-position:left;
}

.texte_news{
background-image:url("images/backgroundN.png");
background-position:center;
background-repeat:no-repeat;
padding-left:100px;
text-align:justify;
padding-right:100px;
}

.screen{
width:750px;
height:562px;
margin-left:130px;
background-image:url("images/screen-cadre.png");
background-repeat:no-repeat;
}

Configuration: Windows Vista
Firefox 3.0.6