Sujet Précédent Sujet Suivant

Problème table avec IE

Fermé
Vroom - Modifié par Vroom le 18/01/2011 à 00:59
Bablon Arnaud Messages postés 74 Date d'inscription jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 - 18 janv. 2011 à 21:37
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

Réponse 1 / 6
Bablon Arnaud Messages postés 74 Date d'inscription jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
18 janv. 2011 à 01:37
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 jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
Modifié par Bablon Arnaud le 18/01/2011 à 02:18
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
18 janv. 2011 à 08:08
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
18 janv. 2011 à 12:54
Personne ?
0
Bablon Arnaud Messages postés 74 Date d'inscription jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
18 janv. 2011 à 14:18
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 jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
18 janv. 2011 à 14:39
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
18 janv. 2011 à 16:47
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 jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
Modifié par Bablon Arnaud le 18/01/2011 à 21:38
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
18 janv. 2011 à 08:16
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 jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
18 janv. 2011 à 13:07
quelle version de IE utilises tu ?
0
Réponse 6 / 6
Bablon Arnaud Messages postés 74 Date d'inscription jeudi 13 janvier 2011 Statut Contributeur Dernière intervention 9 décembre 2011 11
18 janv. 2011 à 13:21
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

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

20 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Création du sommaire sous Word
Licorne rose -
C-Claire -

11 réponses
Arnaque frauduleuse Ireland ltd
Mymy -
mel -

4 réponses
arnaque cb google sur mon compte bancaire
patooun -
samgunsjovirow -

1 réponse