Problème table avec IE

Vroom -  
Bonjour,

Je veux faire un tableau en HTML qui ne doit pas dépasser les 560px, sa fonctionne correctement avec tout les navigateur sauf IE.
Regarde la différence :
Avec Google Chrome : http://img.myzupics.com/aa/326.png
Avec IE : http://img.myzupics.com/aa/ed3.png
Comme vous pouvez le voir, avec IE il y a plus d'espace à côté des images.

Comment corriger le problème ?

Voici mon code : 

<style type="text/css">  
#test {  
 margin : 0 auto 0 auto;  
 width : 560px;  
}  
#test img {  
 display : block;  
 margin : 0 auto;  
 max-width : 112px;  
 max-height : 120px;  
}  
</style>  
   </head>  
   <body>  
<table id="test" border="1">  
 <tr>  
  <td><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="[[http://]]" alt="" /></a></td>  
  <td><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="[[http://]]" alt="" /></a></td>  
  <td><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="[[http://]]" alt="" /></a></td>  
  <td><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="[[http://]]" alt="" /></a></td>  
 </tr>  
</table>


Merci d'avance.

6 réponses

  • Votes
  • Date
  • Date décroissante
  1. Bablon Arnaud Contributeur
    salut j'ai du mal a saisir ton problème, admettons que je mette des vrais url d'image dans les src de tes img, j'ai plusieurs rendu différents sur 3 navigateurs (mozilla, IE & gCrome). Ce que je remarque c'est que si je remplace les max width & max height par juste height & widht et que ensuite je rajoute l'attribut align="center" au td de ton tableau il n'y a plus qu'un seul problème c'est que le tableau sous IE 8 n'est pas centré mais ca ca viens du fait que tu utilise "margin 0 auto"
    1. Bablon Arnaud Contributeur
      essaye comme ca :

      <style type="text/css">
      #test {

      width : 560px;
      }
      #test img {

      width : 112px;
      height : 120px;
      }
      </style>
      </head>
      <body>
      <table id="test" border="1" align="center">
      <tr>
      <td align="center"><a href="[[[[http://]]]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>
      <td align="center"><a href="[[[[http://]]]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>
      <td align="center"><a href="[[[[http://]]]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>
      <td align="center"><a href="[[[[http://]]]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>
      </tr>
      </table>

      aussi je te conseil d'utilisé une classe (.test) plutot qu'un ID #test (le w3c te mettra une erreur de duplicate ID si tu souhaite réutilisé ton CSS 'test' pour un autre tableau ou quoi) car un ID est un identifiant unique il est intéressant d'utilisé les ID pour le javascript.
      Aussi ton display : block n'est pas neccessaire sur une image car une image est déjà de type block
      (j'ai le meme rendu sur tt les navigateurs, même IE6)
      1. Vroom
        Il ne faut pas que le tableau dépasse les 560px avec tous les navigateurs. Sinon il sort de mon design.
        De plus, align="center" n'est pas valide xHTML (c'est vrai j'utilise border="1" mais c'est temporaire pour tester le code, je l'enlève après).
        2. Bablon Arnaud Contributeur
          ta regarder les imprimes écran ? le tableau fait exactement la même taille partout, ta p-e une autre partie de css qui décale ton design ? essaye ce code brut de décoffrage dans un fichier ensuite si c'est la même partout conclu en que tu a un défaut ailleurs.
        3. Bablon Arnaud Contributeur
          ca pourra aussi p-e te servir => quand tu code sous plusieurs navigateurs applique un reset CSS car tu dois surement savoir que IE rajoute des marges un peu partout (form, p, titre...) ...
        4. Vroom
          Non le problème viens que il y a trop d'espace entre les limages, donc quand il y a plus dismage sa élargis le tableau.
        5. Bablon Arnaud Contributeur
          woké, dis moi si cette inté la te conviens
          http://perfdev.fr/cmc/inte_Mo.gif => mozilla
          http://perfdev.fr/cmc/inte_ie.gif => Ie (ie 6 & gCrome régissent pareils)

          vu que t'utilise des toffs qui on des largeurs différentes (j'avais pas grillé au début) l'espace entre chaque image et la bordure du tableau sera forcement différentes (si tu force pas le redimensionnement bien que tu utilise le max-width qui servira dans le cas ou l'image est trop grande) MAIS pour autant on ne va pas élargir la taille du tableau (ton souhait est que le tableau soit blocker a 560px; et tu a 4 case donc l'idée est de limiter la taille de chaque TD a "560/4" px (soit 140px)

          Le code correspondant à ces inté (j'ai tester des mettres des tof plus grandes et plus petites le tableau bouge pas) 
          <style type="text/css">   
#test {   
 margin : 0 auto 0 auto;   
 width : 560px;   
}   
#test img {   
 display : block;   
 margin : 0 auto;   
 max-width : 112px;   
 max-height : 120px;   
}   
#test td { width : 140px; } 
</style>   
   </head>   
   <body>   
<table id="test" border="1" align="center">   
 <tr>   
  <td align="center"><a href="[[[http://]]]" onclick="window.open(this.href); return false;"><img src="etape1.gif" alt="" /></a></td>   
  <td align="center"><a href="[[[http://]]]" onclick="window.open(this.href); return false;"><img src="cat.gif" alt="" /></a></td>   
  <td align="center"><a href="[[[http://]]]" onclick="window.open(this.href); return false;"><img src="cat1.gif" alt="" /></a></td>   
  <td align="center"><a href="[[[http://]]]" onclick="window.open(this.href); return false;">rien</a></td>   
 </tr>   
</table>


          est ce que ca te conviens ?
      2. Vroom
        Il y a toujours plus d'espace avec IE.
        Problème toujours présent.
        3. Bablon Arnaud Contributeur
          je viens de refaire un test, look les imprimes écran :
          http://perfdev.fr/cmc/inte_gcrome.gif
          http://perfdev.fr/cmc/inte_ie6.gif
          http://perfdev.fr/cmc/inte_ie8.gif
          http://perfdev.fr/cmc/inte_mozzila.gif

          résultat de ce code : 
          <style type="text/css">  
#test {  
 width : 560px;  
}  
#test img {  
 border :0px;
 width : 112px;  
 height : 120px;  
}  
</style>  
   </head>  
   <body>  
<table id="test" border="1" align="center">  
 <tr>  
  <td align="center"><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>  
  <td align="center"><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>  
  <td align="center"><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>  
  <td align="center"><a href="[[http://]]" onclick="window.open(this.href); return false;"><img src="http://img.myzupics.com/aa/326.png" alt="" /></a></td>  
 </tr>  
</table>


          à la limite le seul pb pour moi était les bordures de t'es images a cause des liens mais les images en soit sont cadrés de la même facon.

          Discussions similaires

          Table des matières dont les titres n'apparaissent pas..
          Synua

          10 réponses
          Intégrer une table des annexes et des matières sur word
          clairon69

          20 réponses
          Sommaire + Table des matières + Table des Annexes
          Ilona.L

          2 réponses
          Prélèvement inconnu APPLE.COM/BILL ORIGINE IRL
          leon274

          1 réponse