Espace blanc entre DIV sour FIREFOX

Bonsoir.

Alors je me dis que c'est le genre de problème qui doit arriver tout le temps, et pourtant après avoir cherché pas mal sur ce forum et sur d'autres j'ai pas réussi à trouver ce que je cherchais. Peut-être aussi que j'ai pas cherché de la bonne manière je ne sais pas.

C'est donc pour ça que je viens demander de l'aide ici, en espérant trouver une réponse à mon soucis. J'ai déjà eu ce genre de problème entre deux navigateurs, mais bien sur c'était dans le sens ça marche sous Firefox, et ça marche pas sous IE.

Là, c'est l'inverse, ça marche sous IE 7, mais ça ne marche pas sous Firefox 2.

Donc pour faire simple, voici mon problème en image.

D'abord sous Firefox 2 :
[img=http://img387.imageshack.us/img387/8056/ffxnobordji6.th.jpg]

Sous IE7, ça marche :
[img=http://img444.imageshack.us/img444/1725/ie7noborddv9.th.jpg]

Donc mon code globalement c'est ça (c'est d'un forum, donc a l'interieur c'est des raccourcis) :

<div id="wrapperbbleft">
   <div id="wrapperbbright">
         <div id="wrapperbb">
             <!--IBF.NEWPMBOX-->
             <% BOARD %>
             <% BOARD FOOTER %>
             <% STATS %> 
             <% COPYRIGHT %>
          </div>
     </div>
</div>

<!-- code pour le bas -->
<div id="basleft">
     <div id="basright">
          <div id="bas">
          </div>
     </div>
</div>

J'explique rapidement, mon design est composé d'une partie verticale à gauche pour faire une bordure (wrapperbbleft), une partie centrale où il ya le forum (wrapperbb), et une partie verticale à droite pour faire une autre bordure (wrapperbbright).

Et donc en dessous, pour "terminer" mon design, j'ai crée les 3 div (basleft, basright et bas) pour fermer chaque partie du design.

On voit ce que ça donne sous IE 7.

Voici le code CSS pour tout ça :

#wrapperbb{ 
	background: #e7e7e7;
	border:0px;
        margin: 0 55px 0 15px; //les marges pour la taille des div left & right
        padding: 0 5px 0 5px;
        
}

#wrapperbbleft{ 
	background: url(style_images/asmv3-alph/barregauche.gif) repeat-y left;
	border: 0px;
        margin: 0;
        padding: 0;
}

#wrapperbbright{ 
	background: transparent url(style_images/asmv3-alph/barredroite.gif) repeat-y right;
	border: 0px;
        margin: 0;
        padding: 0;
}

#basleft{ 
      background: transparent url(style_images/asmv3-alph/bas_gauche.jpg) no-repeat left 0px;
       border: 0px;
       margin: 0px;
       padding: 0px;
       height: 37px;
       text-align: right;
}

#basright{ 
	background: transparent url(style_images/asmv3-alph/bas_droite.jpg) no-repeat right 0px;
        border: 0px;
	margin: 0;
	padding: 0;
	height: 37px;
	text-align: right;
}

#bas{ 
	background: transparent url(style_images/asmv3-alph/bas_fond.gif);
	border: 0px;
        padding:0;
	border-top: 0;
	height: 37px;
	text-align: right;
        margin: 0px 190px 0px 15px;  //pareil les marges pour les div left et                                 right
 }

Le truc c'est que si je met une bordure sur le wrapperbb, donc le div central au dessus, après l'espace disparait :

[img=http://img387.imageshack.us/img387/5944/ffxbordew5.th.jpg]

Voilà, je crois que j'ai tout expliqué, si quelqu'un a une solution pour moi ça serait génial.

Merci d'avance !
Modifié par Bear (19 May 2007 - 19:48)

J'ai des fois le même genre de bug sur certains sites que je crée, notamment si je ne mets pas de bordure haute sur une div, elle se décale.

Donc si quelqu'un a une solution, ça m'intéresse également !!!

Bonjour,

As-tu regardé du côté de la fusion des marges ?
Cf. Blocs imbriqués et fusion des marges.

Ba là a priori c'est pas un soucis de fusion des marges. Puisque mon espace blanc n'est pas dans des blocs imbriqués.

J'ai du mal à comprendre pourquoi sous IE ça marche.

Bear a écrit :
Ba là a priori c'est pas un soucis de fusion des marges.

Une fois sur deux quand on me dit « à priori c'est pas un soucis de fusion des marges », c'en est un.
Mieux vaut vérifier par des tests, donc.

D'ailleurs, pourrait-on voir la page en ligne ? Difficile de se prononcer avec juste des bouts de code.