[Résolu] Problème avec IE6, bordure entre 2 div

Bonjour,

Tout d'abord, sachant que c'est mon premier message et que je consulte le site d'alsacreations depuis quelques temps, je souhaite remercier tout les contributeurs de ce site qui est, je trouve, d'une très bonne qualité.
Je suis débutant en CSS, et pour une nouvelle version de mon site web, je souhaite respecter le mieux possible les standards actuels. Ce n'est de loin pas encore le cas, mais ça progresse gentiment. J'aimerais donc que le site soit lisible par tous les navigateurs, incluant IE6 (je crois savoir que beaucoup de lecteurs n'ont toujours pas la version 7...).
C'est là que mon problème se trouve.

Le squelette du site comprend (entre autres) une en-tête, une partie gauche avec des liens, et une partie centrale avec le contenu. Pour cette partie centrale, j'aimerais des coins arrondis, et j'ai opté pour une image en haut et en bas comprenant les fameux coins arrondis. La partie centrale se divise donc en 3, avec au milieu le contenu proprement dit. Seulement voilà, avec IE6, dans la partie centrale, j'ai une bordure qui se place entre l'image du haut et la partie contenu. Plus étrange, cette bordure ne fait même pas la largeur complète du div, mais environ les 3/4, placée au milieu, comme si elle tenait compte des éléments padding. Elle n'apparait pas dans firefox ou Safari.

Est-ce que quelqu'un aurait une idée pour résoudre cela ?

partie du code html:

<div id="container">
	<div id="header">
	</div>

	<div id="bande">
		<div id="sections"> 
			<h1><a href="../dojo/dojo.php">Le Dojo</a></h1> 
			<h1><a href="./judo.php">Judo</a></h1>
    	                <h1><a href="../aikido/aikido.php?">Aikido</a></h1> 
			<h1><a href="../jujitsu/jujitsu.php">Ju-Jitsu</a></h1>
			<h1><a href="../gym/gym.php">Gym</a></h1>
                </div>
	</div>

	<div class="left_menu" id="judo_left">
		<h1>Judo</h1>
		<ul>
  		<li><A href="./judo.php?sec=presentation">Pr&eacute;sentation</A></li> 
  		<li><A href="./judo.php?sec=horaires">Horaires</A></li>
	        <li><A href="./judo.php?sec=entraineurs">Entra&icirc;neurs</A></li>
                <li><A href="./judo.php?sec=gallerie">Gallerie</A></li>
		</ul>
	</div>

	<div id="text">
 		<div id="text_top"></div>
                <div class="content" id="judo_right">
			<?php
      switch ($section) {
        case 'presentation': { include "./presentation.html"; break;}
        case 'horaires': { include "./horaires.html"; break;}
        case 'entraineurs': { include "./entraineurs.html"; break;}
        case 'emplacement': { include "./emplacement.html"; break;}
        case 'evenements': { include "./evenements.html"; break;}
        case 'gallerie' : { require "./gallerie.php"; break;}
        case 'news': { include "../news/news.php"; break;}
        default: { include "./presentation.html"; break;}
      }
      ?>
          </div>
         <div id="text_bottom"></div>
	</div>

code css:

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	/*background-image: url(../images/backgnd.gif);*/
	background-repeat: repeat;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color:#FFFFFF;
}
#container {
	background-color:#FFFFFF;
	background-image: url(../images/back_cont.jpg);
	background-repeat: repeat-y;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: auto;
	margin-left: auto;
	padding: 0px;	
	width: 900px;
	position: relative;
	/*border-left: 1px solid #343A70;
	border-right: 1px solid #343A70;*/
}

/************** HAUT ****************/
#header {
	background:url(../images/banniere.jpg) no-repeat top center;
	height: 150px;
	width: 900px;	
}
#bande{
	background:url(../images/menu_haut.jpg) no-repeat top center;
	height: 30px;
	width: 900px;
}
#sections {
	height: inherit;
	margin-left: 150px;
}

/************** GAUCHE ****************/
.left_menu {
	background-color:#FFFFFF;
	position: absolute;
	top: 180px;
	left: 0px;
	width: 150px;
	height: 660px;
}
.left_menu#dojo_left {
	background-image: url(../dojo/images/dojo_fond_left.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}
.left_menu#judo_left {
	background-image: url(../judo/images/judo_fond_left.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}
.left_menu#aikido_left {
	background-image: url(../aikido/images/aiki_fond_left.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}
.left_menu#jujitsu_left {
	background-image: url(../jujitsu/images/jujitsu_fond_left.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}
.left_menu#gym_left {
	background-image: url(../gym/images/gym_fond_left.jpg);
	background-repeat: no-repeat;
	background-position: top right;
}

/************* CONTENU ****************/
#text {
	background-color: #FFFFFF;
	margin-left:150px;
	position: inherit;
	width: 570px;
}
#text_top{
	background-image: url(../images/text_top.jpg);
	margin: 0px;
	margin-bottom: 0px;
	padding: 0px;
	width: 570px;
	height: 12px;
}
#text_bottom{
	background-image: url(../images/text_bottom.jpg);
	margin: 0px;
	padding: 0px;
	width: 570px;
	height: 12px;
}
.content {
	border-left: #999999 1px solid;
	border-right: #999999 1px solid;
	border-top: 0;
	padding-left: 5px;
	padding-right: 5px; 
	margin-top: 0px;
	padding-top: 0px;
	height: 660px; 
}
html>body .content{
	border-left: #999999 1px solid;
	border-right: #999999 1px solid;
	border-top: 0;
	padding-left: 5px;
	padding-right: 5px; 
	margin-top: 0px;
	padding-top: 0px;
	height: auto;
	min-height: 660px;
}
.content#dojo_right {
	background-image: url(../dojo/images/dojo_fond_right.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}
.content#judo_right {
	background-image: url(../judo/images/judo_fond_right.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}
.content#aikido_right {
	background-image: url(../aikido/images/aiki_fond_right.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}
.content#jujitsu_right {
	background-image: url(../jujitsu/images/jujitsu_fond_right.jpg);
	background-repeat: no-repeat;
	background-position: top left;
}

La fameuse bordure se situe entre le div "text_top" et le div "content".

Merci d'avance!
Modifié par maelito (15 May 2008 - 13:33)

J'ai continué à chercher... et j'ai trouvé. En mettant "font-size: 1px;" dans le div text_top, la ligne indésirable est partie.. J'avais essayé avec "line-height" auparavant, sans succès... du coup j'avais pas essayé avec font-size.

J'ai trouvé sur la FAQ .. Je chercherai plus longtemps avant de poster la prochaine fois..