Problème table avec IE

Vroom -  
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   -
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.
A voir également:

6 réponses

Réponse 1 / 6
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
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"
0
Réponse 2 / 6
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
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)
0
Réponse 3 / 6
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).
0
Vroom
 
Personne ?
0
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
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.
0
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
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...) ...
0
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.
0
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
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 ?
0
Réponse 4 / 6
Vroom
 
Il y a toujours plus d'espace avec IE.
Problème toujours présent.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
quelle version de IE utilises tu ?
0
Réponse 6 / 6
Bablon Arnaud Messages postés 74 Date d'inscription   Statut Contributeur Dernière intervention   11
 
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.
0

Discussions similaires

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

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

20 réponses
insérer une table d'illustration
wood15 -
Cloe -

8 réponses
Sommaire + Table des matières + Table des Annexes
Ilona.L -
gbo -

2 réponses
WOrd 365 Liste des figures et annexes
Tartealacreme_8509 -
Tartealacreme_8509 -

2 réponses