[Résolu] Pb de retour à la ligne avec des tables

bonjour,
voila j'ai un problème d'affichage de mes tables dans IE 6
elles ne se placent pas les unes en dessous des autres mais les unes à côté des autres ... ce qui pose de sérieux pb de mise en page ...sous FF aucun problèmes.
j'ai envoyé une image pour illustrer le pb.
en haut la mise en page IE 6 et en bas la mise en page FF ...

j'ai bien essayé de mettre l'élément table en float:left mais ça ne m'arrange pas du tout comme solution ... car ça me crée d'autres déséquilibres dans le site ... j'ai essayé de display:block aussi ...ça ne change rien ...

Avez vous la science pour m'aider ?
merci bcp
@++
Modifié par NAS (12 Jan 2007 - 13:42)

Bonjour,

Bien que le problème rencontré soit plutôt évident grâce à ta capture d'écran (qui sont tout de même un peu petite...), il me semblerait utile de produire un lien vers la page concernée ou tout du moins un morceau du code.
Car en l'état actuel des choses, tu peux comprendre je pense ... qu'il sera difficile de t'aider.

re
effectivement ça peut aider ..
voila le html

<div id="contenu">
  <div id="fond_gauche">
    <div id="bandeau_gauche"> <br />
      <br />
      <a href="index.php?">Ma fiche signalétique</a><br />
      <a href="index.php?affiche=materiel">Mon parc matériel</a><br />
    </div>
    <div id="milieu3">
      <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
      <p></p>
      <p></p>
      <p></p>
      <h2><img src="../images/fleche_rouge.gif" alt="" height="10" width="10" border="0" /> Parc Matériel</h2>
      <table width="99%" border="0" cellspacing="1" cellpadding="0" align="left" bgcolor="#8c9196" >
        <tr>
          <td bgcolor="white"><table width="100%" border="0" cellspacing="1" cellpadding="4">
              <tr align="left" valign="top" height="20">
                <td align="left" valign="top" width="25%" height="20" background="../images/degradhaut.gif"><strong>Matériel</strong></td>
                <td align="left" valign="top" width="25%" height="20" background="../images/degradhaut.gif"><strong>Installation</strong></td>
                <td align="left" valign="top" width="30%" height="20" background="../images/degradhaut.gif"><strong>Contrat</strong></td>
                <td align="left" valign="top" width="20%" height="20" background="../images/degradhaut.gif"><strong>Visites</strong></td>
              </tr>
              <tr align="left" valign="top">
                <td align="left" valign="top" width="25%"><table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                      <td align="left" valign="top"><strong>Type</strong></td>
                      <td align="left" valign="top">Impression</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><strong>Nom</strong></td>
                      <td align="left" valign="top">Titan Pro 7 Pionner Drives 500</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><strong>Quantité</strong></td>
                      <td align="left" valign="top">21</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><strong>N° de série</strong></td>
                      <td align="left" valign="top">6546846354684</td>
                    </tr>
                  </table></td>
                <td align="left" valign="top" width="25%"><table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                      <td><strong>Installé le</strong></td>
                      <td>Date inconnue</td>
                    </tr>
                  </table>
                  <strong>Adresse d'installation<br />
                  </strong><br />
                  <br />
                  <strong>Tel </strong></td>
                <td align="left" valign="top" width="30%"> Garantie Totale sur site<br />
                  ZONE 3 - Plus de 100 Km<br />
                  <strong>du</strong> 01-11-2006<br />
                  <strong>au</strong> 12-12-2006<br />
                </td>
                <td align="left" valign="top" width="20%"><img src="../images/icon/calendar.jpg" alt="Visite pr&eacute;vue le " border="0" height="16" width="16" /> <a href="#">15-01-2007<span style="width:130px;">edg</span></a><br />
                  <br />
                </td>
              </tr>
            </table></td>
        </tr>
      </table>
      <p> </p>
      <table width="99%" border="0" cellspacing="1" cellpadding="0" align="left" bgcolor="#8c9196" >
        <tr>
          <td bgcolor="white"><table width="100%" border="0" cellspacing="1" cellpadding="4">
              <tr align="left" valign="top" height="20">
                <td align="left" valign="top" width="25%" height="20" background="../images/degradhaut.gif"><strong>Matériel</strong></td>
                <td align="left" valign="top" width="25%" height="20" background="../images/degradhaut.gif"><strong>Installation</strong></td>
                <td align="left" valign="top" width="30%" height="20" background="../images/degradhaut.gif"><strong>Contrat</strong></td>
                <td align="left" valign="top" width="20%" height="20" background="../images/degradhaut.gif"><strong>Visites</strong></td>
              </tr>
              <tr align="left" valign="top">
                <td align="left" valign="top" width="25%"><table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                      <td align="left" valign="top"><strong>Type</strong></td>
                      <td align="left" valign="top">Impression</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><strong>Nom</strong></td>
                      <td align="left" valign="top">Lexmark X422</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><strong>Quantité</strong></td>
                      <td align="left" valign="top">0</td>
                    </tr>
                    <tr>
                      <td align="left" valign="top"><strong>N° de série</strong></td>
                      <td align="left" valign="top">554168</td>
                    </tr>
                  </table></td>
                <td align="left" valign="top" width="25%"><table width="100%" border="0" cellspacing="1" cellpadding="0">
                    <tr>
                      <td><strong>Installé le</strong></td>
                      <td>01-11-2006</td>
                    </tr>
                  </table>
                  <strong>Adresse d'installation<br />
                  </strong>Batiment E<br />
                  <br />
                  <strong>Tel </strong>0491251654654</td>
                <td align="left" valign="top" width="30%"> Garantie Totale sur site<br />
                  ZONE 3 - Plus de 100 Km<br />
                  <strong>du</strong> 01-11-2006<br />
                  <strong>au</strong> 12-12-2006<br />
                </td>
                <td align="left" valign="top" width="20%"> Aucune visite n'a encore été éffectuée sur ce matériel<br />
                </td>
              </tr>
            </table></td>
        </tr>
      </table>
      <p> </p>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>
  </div>
</div>
<!-- fin de div id=contenu -->

le css ...

p, h1, h2, h3, h4, h5 {
	padding: 0; 
	display: block;
	margin: 0;
}
html {
	height: 100%;
}
body { 
	/*background-color: #efefef; */ /* blanc cassé */
	background-color: #f9f9f9;
	font-family: Arial;
	font-size: 11px;
	/*
	width:100%;
	height: 100%;*/
}

div#contenu { 
 position:relative;
margin: 0;
padding: 0 0 0 0px;
text-align: justify;
/*
border-left: 1px solid #5c656e;
border-right: 1px solid #5c656e;

background-color: #000;*/
}
div#fond_gauche {
	margin:0; 
	padding:0px;
	background-position: top left;
	background-image:url(../images/gris.gif);
	background-repeat: repeat-y;
	
}
		
div#bandeau_gauche { 
	float:left;
	width:150px;
	margin:0px; 
	padding:10px 0px 0px 10px;	
}
div#milieu3{
 margin: 0 0 0 170px;
 padding: 10px 10px 10px 10px;	
}

j'ai remarqué un truc ...
j'ai esayé table {float:left;}
bon avec ça ...ça m'arrange pas mais la mise en page est presque la même etre IE et FF sauf que sur IE les liens qui sont dans le menu

<div id="bandeau_gauche">
														<br /><br />
									<a href="index.php?">Ma fiche signalétique</a><br />

									<a href="index.php?affiche=materiel">Mon parc matériel</a><br />
									
									
								</div>

deviennent invisibles ... mais toujours actifs ...

avec clear:both;
les tables passent bien à la ligne mais eles se collent et je me retrouve avec un gros espace en haut de la page ... donc pas bon.
j'espère que vous pourre m'aider ...
merci d'avance
@+
Modifié par NAS (12 Jan 2007 - 12:23)

Ben déjà ce n'est pas une mise-en-page respectant les standards et accessible : tu utilises des tableaux pour faire de la mise en page en encapsulant des tableaux dans des tableaux.

Ce n'est pas la bonne façon de faire.

je sais je sais ... mais le problème est que j'ai tout fait comme ça ...Et que malheureusement il y a beaucoup de chez beaucoup de tableaux de la sorte dans tout mon site ...
je suis donc un poil coincé là ...
d'ailleurs je viens de réaliser un petit test ...j'ai généré des tables simples avec ce code php

<? for ($i=0; $i<10; $i++) {
?>
<table width="80%" border="1"><tr><td>aaaaaaaaa</td></tr></table><br />
<?
}
?>

et là elles s'affichent bien ...ce qui prouve que le problème vient du fait des tableaux imbriqués ... quelle galère ...



vous aves pas une petite astuce pour ça ?
merci d'avance
@++

ce qui est fou c'est que quand je fais

<? for ($i=0; $i<10; $i++) {
?>
<table  border="1"><tr><td>
	<table  border="1"><tr><td>
		<table  border="1"><tr><td>aaaaaaaaa</td></tr></table>
	</td></tr></table>
</td></tr></table><br />
<?
}
?>

ça marche aussi ...
je craque

ps : j'ai édité le html pour qu'il soit plus lisible
Modifié par NAS (12 Jan 2007 - 12:23)

mesdames et méssieurs !!
j'ai trouvé !!!

OH PUTAIN j'AI TROUVE !!!!! enfin !
des semaines que j'halucine sur ça !!!

alors ... il suffisait simplement d'enlever le align="left"
de la première ligne

<table width="99%" border="0" cellspacing="1" cellpadding="0"  bgcolor="#8c9196" >

et voila...
have fun
ps : je sais pas pourquoi par contre ...
@+

NAS a écrit :
OH PUTAIN j'AI TROUVE !!!!! enfin !

Quelle poésie. Nous sommes entre gens civilisés, dois-je te le rappeler ?

NAS a écrit :
des semaines que j'halucine sur ça !!!

Ah la la, des semaines que tu aurais pu gagner en créant une structure propre sans tables

Ah ben tout ça me semble [Résolu], non ?

Bonjour,

Considères-tu ton sujet comme résolu ?

Comment éditer un sujet sur le forum, et comment classer un sujet en [Résolu] ?

Plus généralement du gagnerais à modifier ta façon de réaliser tes tableaux en les stylant avec CSS. Un peu de lecture: Habillage de tableaux avec des CSS

bon excusez moi pour les grossièretés ... c'était l'entrain de la joie d'avoir trouvé ... puis j'habite le sud ...vous savez ici comme dit l'autre ...ça remplace la virgule ...C'est comme un interjection quoi ...

sinon j'ai pas marqué résolu car j'étais attendu pour aller manger ... j'ai du partir en vitesse ...

je suis en train d'imprimer la page sur les tableaux en CSS ... je vais m'y mettre ... mais c'est vrai que j'ai franchement du mal avec tout ces bugs et astuces à contourner ...

il me reste cependant un problème sur la version IE...Celui des liens qui deviennent invisibles ... mais je vais essayer de comprendre tout seul pourquoi ça ne marche pas et au pire je ferai un autre post.

merci pour vos réponses. j'espère que la solution que j'ai trouvé pourra sortir quelqu'un d'autre d'une même gelère.



@++