Espace blanc non-désiré dans ie7 - Lors de l'imbrication de 2 tableaux

Mon problèmes semble assez simple à la base, mais je n’arrive pas à trouvé une solution… Lorsque j’imbrique 2 tableaux afin d’afficher mon visuel j’obtiens le résultat attendu dans Mozilla mais dans IE7 j’ai un espace de 2 ou 3 pixels qui se forme entre mes 2 tableaux (les 2 images doivent être collées, car elle concordent)

voici le code:


<table border=0 cellpadding=0 cellspacing=0 width=758>
    <tr>
        <td rowspan=1 colspan=3 width=758>
            <img src="img/biencourt_v__1x1.jpg" border=0 />
        </td>
    </tr>
    <tr>
    <!-- Coté Gauche -->
        <td width=194 valign=top></td>
    <!-- Contenu -->
        <td width=400 valign=top></td>
    <!-- Coté Droit -->
        <td width=164 valign=top >
            <table border=0 cellpadding=0 cellspacing=0>
                <tr><td>
                    <img src="img/biencourt_v__2x3.jpg" border=0 />
                </td></tr>
                <tr><td>
                    <img src="img/biencourt_v__3x1.gif" border=0 />
                </td></tr>
            </table>
        </td>
    </tr>
    <tr>
        <td rowspan=1 colspan=3 width=758></td>
    </tr>
</table>

Il serait simple de refaire les tableaux afin d’en avoir seulement 1 qui s’imbrique correctement, mais je travaille sur un servlet… Je semble me compliqué la vie, mais si j’arrive à faire condordé ces tableaux ça simplifica de beacoup la création de mon servlet.

hum je connais pas trop les tables, mais essaies à tout hasard de fixer les rules="none" car je sais que IE et FF ne réagissent pas pareils en fonction des rules…

Sinon essaies de fixer une hauteur à ta cellule qui contient le tableau, ainsi qu’à tes images, ça peut tjrs servir…

J’ai changer le code comme suis, mais sans que ça change le résultat:


<table border=0 cellpadding=0 cellspacing=0 width=758 rules="none">
   <tr>
       <td rowspan=1 colspan=3 width=758>
           <img src="img/biencourt_v__1x1.jpg" border=0 />
       </td>
   </tr>
   <tr>
   <!-- Coté Gauche -->
       <td width=194 valign=top></td>
   <!-- Contenu -->
       <td width=400 valign=top></td>
   <!-- Coté Droit -->
       <td width=164 valign=top>
           <table border=0 cellpadding=0 cellspacing=0 rules="none"  height=136>
               <tr><td height=136>
                   <img src="img/biencourt_v__2x3.jpg" height=136 border=0 />
               </td></tr>
               <tr><td>
                   <img src="img/biencourt_v__3x1.gif" border=0 />
               </td></tr>
           </table>
       </td>
   </tr>
   <tr>
       <td rowspan=1 colspan=3 width=758></td>
   </tr>
</table>

Aussi, détails qui semble anodin, mais que je tiens a spécifier l’alignement est corect verticalement (en colones) mais c’Est au niveau horizontal (lignes) que l’espace se crée… :neutre:

Ha ok…
J’sais que j’ai des prob’ pareil avec des images sous IE, c’ets un niveau du code source, et des fois ça passe tout simplement en collant la balise de l’image à son conteneur… C’qu’on m’enfin c’est IE :confused: !

C’était très probable, mais malheureusement ça n’a rien donné… :??:

Parce que quand tu mets une image, IE y voit du texte, et prend en compte les espaces entre <td> et <img />. Résultat: tu as un espace.

C’est ça que DarKChAm avait sugérer…

Mais même si mon code est placé comme suis ça ne change rien :frowning:


   <tr>
   <!-- Coté Gauche -->
       <td width=194 valign=top></td>
   <!-- Contenu -->
       <td width=400 valign=top></td>
   <!-- Coté Droit -->
       <td width=164 valign=top><table border=0 cellpadding=0 cellspacing=0 rules="none" height=136><tr><td height=136><img src="img/biencourt_v__2x3.jpg" height=136 border=0 /></td></tr><tr><td><img src="img/biencourt_v__3x1.gif" border=0 /></td></tr></table></td>
   </tr>

(il n’y a aucun espace dans le TD, tout est sur la même ligne)

Tu as rien dans le contenu gauche et le truc du milieu? Tu pourrais nous donner un visuel du problème?

Et si tu as peur de nous donner des images confidentielles, remplaces les par des images avec des couleurs simples (rouge, vert, jaune, etc).

Il n’y a rien de particulièrement confidenciel, par contre mon ftp ne fonctionne pas pour le moment et je ne peux donc pas uploadé de photo :frowning: si tu veux envois moi un courriel dans un MP où je peux t’envoyer des images.

Regarde mon avatar ;p c’est pas très clair mais ça peut p-e t’aidé a visualisé le problème…

Hum…
Padding et Margin à 0 ?

Code actuel et toujours le même résultat:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Municipalité de Biencourt</title></head>
<body>
<table border=0 cellpadding=0 cellspacing=0 width=758 height=268 rules="none" style="margin: 0px,0px,0px,0px;">
   <tr>
       <td rowspan=1 colspan=3 width=758 height=268 style="margin: 0px,0px,0px,0px;">
           <img src="img/biencourt_v__1x1.jpg" border=0 width=758 height=268 style="margin: 0px,0px,0px,0px;"/>
       </td>
   </tr>
   <tr>
   <!-- Coté Gauche -->
       <td width=194 valign=top></td>
   <!-- Contenu -->
       <td width=400 valign=top></td>
   <!-- Coté Droit -->
       <td width=164 valign=top>
        	<table border=0 cellpadding=0 cellspacing=0  rules="none" width=164 height=136 style="margin: 0px,0px,0px,0px;">
          <tr>
          	<td height=136 style="margin: 0px,0px,0px,0px;"><img src="img/biencourt_v__2x3.jpg"  width=164 height=136 border=0 style="margin: 0px,0px,0px,0px;" /></td>
          </tr>
          <tr>
          	<td><img src="img/biencourt_v__3x1.gif" border=0 /></td>
          </tr>
        	</table>
        </td>
   </tr>
   <tr>
       <td rowspan=1 colspan=3 width=758></td>
   </tr>
</table>
</body>

</html>

:neutre: le problème a l’air simple pourtant je ne comprend pas pourquoi IE que j’aime et que j’adore :sarcastic: ne fait pas l’affichage comme il se devrait…

Donc c’est une bordure entre hauteurs.

<table border=0 cellpadding=0 cellspacing=0  rules="none" width=164 height=136 style="margin: 0px,0px,0px,0px;">
         <tr>
          <td height=136 style="margin: 0px,0px,0px,0px;"><img src="img/biencourt_v__2x3.jpg"  width=164 height=136 border=0 style="margin: 0px,0px,0px,0px;" /></td>
         </tr>
         <tr>
          <td><img src="img/biencourt_v__3x1.gif" border=0 /></td>
         </tr>
        </table>

Un truc me chagrine : c’est quoi les dimensions des deux images? Car là, tu donne au tableau une hauteur de 136, pareil pour l’image, mais si tu fais le compte : 136 + x (= hauteur de la seconde image) > 136.

L’image qui fait office d’entête est de “width=758 height=268” et celle dans la barre de droite qui la complète est “width=164 height=136” (j’ai bien verrifier ses données).

J’ai en-effet mis plusieur dimention dans les différents tag, à l’origine il y en avait aucuns pour le même résultat… Quant à la 2ime image dans ce tableau elle n’est pas importante je j’ai placé en guise de test si je l’enlève ça ne change rien…


<table border=0 cellpadding=0 cellspacing=0  rules="none" width=164 height=136 style="margin: 0px,0px,0px,0px;">
        <tr>
         <td style="margin: 0px,0px,0px,0px;"><img src="img/biencourt_v__2x3.jpg"  width=164 height=136 border=0 style="margin: 0px,0px,0px,0px;" /></td>
        </tr>
        <tr>
         <td></td>
        </tr>
</table>

Il n’y a rien qui puisse étirer ce tableau? Le code que tu nous montres est complet pour cette partie?

Chavait pas que margin acceptait des virgules.
Fixes aussi le padding à 0 on sait jamais…

Pourquoi passes tu par un tableau si tu n’as qu’une image à mettre? Si tu veux la mettre sur la droite, essaye align=“right”, sinon tu peux jouer futé avec css (et éviter totalement les tableaux), en utilisant les background, et background-position.

En fait le code que j’envoie a été générer par un servlet, d’où l’utilisation de tableau. Je pourrais évidamment trouvé une façon alternative, mais de cette façon mon servlet perdrait de sa flexibilité…

Dans un des posts il y a le code complet du fichier html que j’utilise pour faire des tests avec ce positionnement. En effet l’utilisation de virgules dans margin était douteux; le standard est un espace… Malgré tout ça change rien encore, même en ajoutant des “style=“margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;”” un peu partout…

Cette idée bien que simple au départ me semble de plus en plus compliquée… j’envisage déjà de faire des modifications afin d’avoir seulement un tableaux même si ça me fais un peu de peine :’( :icon_biggrin:

Des servlet qui génère des tableaux pour de l’affichage? bof…

Personnellement, quand je bidouillais les tableaux, et j’avais ça aussi sous IE, je faisais aussi attention à la taille des polices qui pouvait jouer.

Ensuite, voir si c’est pas lié au colspan=“3” rowspan=“1”

Au passage: margin: 0; padding: 0; (plus rapide)

Et pour le reste, tente sans le tableau :

<table border=0 cellpadding=0 cellspacing=0 width=758 rules="none">
  <tr>
      <td rowspan=1 colspan=3 width=758>
          <img src="img/biencourt_v__1x1.jpg" border=0 />
      </td>
  </tr>
  <tr>
  <!-- Coté Gauche -->
      <td width=194 valign=top></td>
  <!-- Contenu -->
      <td width=400 valign=top></td>
  <!-- Coté Droit -->
      <td width=164 valign=top height=136><img src="img/biencourt_v__2x3.jpg" height=136 border=0 /></td>
  </tr>
  <tr>
      <td rowspan=1 colspan=3 width=758></td>
  </tr>
</table>

Sinon, faire du xhtml en continuant à mélanger forme & contenu, c’est pas top.

Je crois que tu as un peu mal compris le concept, mais ce n’est pas grave. C’est évidant qu’avec un seul tableau ça fonctionne mon questionnement était plutot au niveau de l’imbriquation de tableaux. Pour ce que est du servlet il affiche plutot que générer des tableax… l’utilité n’est p-e pas très aparente si tu veux en discuter on peut partir un thread la dessus :wink:

Je ne comprend pas ce que tu veux dire?
Pour ce qui est du XHTML je ne m’y connais que très peu et les tests que j’ai fait comme par exemple allé placé virtuellement un paneau lathéral en le positionnant “manuellement” mais en mettant une couleur de fond… ça fait dequoi de ben laid en bas de page… si tu as une bonne page tutoriel fais moi signe :smiley: .

Tu met “<img … />”, ce qui est une façon de faire du XML (et XHTML). Sauf que normalement un bon document XHTML ne mélange pas la forme (ici, tu essaye de faire de l’affichage avec tes tableaux) et le contenu.

Ca ne fait pas avancer le smillblick, donc j’en débattrai pas plus.

Pour ton problème, si ça se résout sans faire une tierce imbrication de tableau, c’est que le problème se situe avec le tableau lui-même qui d’une façon ou d’une autre se tape des pixels en plus.

Je sais pas quel est ton but pour faire des imbrications de tableau (j’ai pensé à un moment que ta servlet découpait une image en tableau, j’aurai pu comprendre, mais même pas) et vu que je touche plus aux présentations faites avec des tableaux, je ne saurais t’aider plus.