> Tous les forums > Forum des Webmasters
 Probleme d'affichage de tableau sous IE...
Ajouter un message à la discussion
Page : [1] 
Page 1 sur 1
Wolf_toufu
  Posté le 20/12/2007 @ 16:27 
Aller en bas de la page 
Petit astucien

Bonjour à tous,

J'ai un probleme avec le site que je suis en train de construire : le tableau s'affiche correctement sous firefox mais il y a plusieurs bugs sous IE. J'ai tout essayé, j'ai passé plus de 10H à revoir le code dans tout les sens mais je ne trouve pas la cause du probleme. J'ai meme refait le tableau sous dreamweaver (alors que je déteste ce logiciel !) et toujours le meme probleme : la visualisation est bonne sous DW, ca marche bien sur firefox mais il y plein de trous sous IE.

A l'aide !!!!

La page est dispo ici : http://bamtpe.free.fr/test/

voila le code (sans les styles). Celui qui aura la solution me sauvera vraiment la vie !

Merci d'avance !

<html>
<head>
<title>Biernvenue</title>
</head>

<body bgcolor="#eeeced">
<table width="988" height="808" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td height="118" colspan="9"><img src="images/top.gif" width="988" height="118"/></td>
</tr>
<tr>
    <td width="248" height="29"><img src="images/accgauch.gif" width="248" height="29"/></td>
<td width="78"><img src="images/acc.gif" width="78" height="29" /></td>
<td width="141"><img src="images/present.gif" width="141" height="29" /></td>
<td width="91"><img src="images/congres.gif" width="91" height="29" /></td>
<td width="108"><img src="images/documents.gif" width="108" height="29" /></td>
<td width="82"><img src="images/contact.gif" width="82" height="29" /></td>
<td colspan="3"><img src="images/contactdroit.gif" width="240" height="29" /></td>
</tr>
<tr>
    <td height="48" colspan="9"><img src="images/bienvenue.gif" width="988" height="48" /></td>
</tr>
<tr>
<td rowspan="2"><img src="images/lassoc.gif" width="248" height="126" /></td>
<td colspan="5" rowspan="11" bgcolor="#c5dadf" valign="top">

<h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla <br>
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla <br>
blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla <br></h2></td>
    <td colspan="3"><img src="images/espacemembr.gif" width="240" height="44" /></td>
</tr>
<tr>
<td width="23" rowspan="8"><img src="images/latgauch.gif" width="23" height="267" /></td>
<td width="168" rowspan="3" bgcolor="#f3f7f7">membre</td>
<td width="49" rowspan="8"><img src="images/latdroit.gif" width="49" height="267" /></td>
</tr>
<tr>
    <td><img src="images/bureau.gif" width="248" height="26" /></td>
</tr>
<tr>
<td><img src="images/revue.gif" width="248" height="22" /></td>
</tr>
<tr>
<td><img src="images/chapitr.gif" width="248" height="23" /></td>
<td rowspan="2"><img src="images/recherch.gif" width="168" height="47" /></td>
</tr>
  <tr>
<td><img src="images/congresgauch.gif" width="248" height="24" /></td>
</tr>
<tr>
<td><img src="images/inscription.gif" width="248" height="24" /></td>
<td rowspan="3" bgcolor="#f3f7f7">recherche</td>
</tr>
<tr>
    <td><img src="images/contactgauch.gif" width="248" height="31" /></td>
</tr>
<tr>
<td><img src="images/libreservice.gif" width="248" height="35" /></td>
</tr>
<tr>
<td><img src="images/changement.gif" width="248" height="52" /></td>
<td colspan="3" rowspan="2"><img src="images/sousrecherch.gif" width="240" height="245" /></td>
</tr>
  <tr>
<td><img src="images/documentsgauch.gif" width="248" height="193" /></td>
</tr>
<tr>
<td colspan="9"><img src="images/bottom.gif" width="988" height="107" /></td>
</tr>
</table>
</body>
</html>
 
Publicité
jpbardiau
 Posté le 20/12/2007 à 17:41 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Bonjour,

quelle est l'utilité des tableaux pour ce genre de page ? Voir ici

elle
 Posté le 20/12/2007 à 17:57 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Grande Maîtresse astucienne

Wolf_toufu
 Posté le 24/12/2007 à 17:33 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Merci pour vos réponses mais malheureusement je n'y trouve pas vraiment de solutions. Les tableaux sont pratiques pour moi car je les maitrise (presque) et d'un autre cote je ne connais rien au css. Dans la mesure ou le plus gros du travail a été fait avec des tableau ca m'ennuie de tout recommencer à zéro.
A mon avis il y a un probleme tout con sur ma page, une balise qui manque ou je sais pas quoi d'autre et qui permettra de régler tout ce probleme en peu de temps.

Bref si vous voyez ce qui cloche, n'hésitez pas !

Malcolm
 Posté le 24/12/2007 à 18:07 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Ta page est non doctypée ... As-tu essayé de mettre un doctype dedans ? Sans cette ligne IE passe en mode "Quirks", vu que tu sembles mélanger HTML (<br>) et XHTML (<img ... />) je pense que ça peut avoir une influence ...
Wolf_toufu
 Posté le 26/12/2007 à 15:56 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

En effet !
Je n'avais jamais compris l'interet des doctypes. J'ai regardé pas mal de site expliquant leur fonctionnement, réécrit mes pages (en HTML dans un premier temps puis en XHTML) avec a chaque fois des doctypes correspondant mais rien de rien. Ca ne fonctionne toujours pas. Je vais encore creuser le probleme de ce coté mais malheureusement je ne pense pas que ce débouche vers quelquechose.

Merci de ton aide Malcolm mais j'ai encore besoin de ton savoir !!!

Pas d'autre idées.

Merci (vraiment) à tous de s'interesser à mon probleme.
Bonnes fetes de fin d'années

Malcolm
 Posté le 26/12/2007 à 17:49 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

Re,

Eh bien penche-toi sur une explication sur les doctypes ...

Je te dis ça parce que récemment j'ai eu le même style de problème sur une page type HTML 4.01 non doctypée, celui-ci mis IE n'a plus rien dit ...

Wolf_toufu
 Posté le 29/12/2007 à 18:24 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

Il faut croire que ca ne marchera définitivement pas...

J'ai vraiment tout essayé avec les doctypes, réencodé la page dans divers formats mais rien....

selen
 Posté le 29/12/2007 à 18:35 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maîtresse astucienne

bonjour wolf-toufu

J'avais regardé ta page il y a quelques jours : en affichant le code sans lui donner les images on constate que d'une part firefox cale toutes les cellules les unes contre les autres en prenant comme hauteur la hauteur de l'image qui s'y trouve, d'autre part dans IE si la première cellule d'une ligne fait 126px de haut eh bien la cellule en fin de ligne a aussi cette hauteur même si l'image contenue ne fait que 44px de haut.

Il s'en suit des décalages, je ne sais pas si ce comportement est naturel chez IE ou s'il provient d'une erreur de codage... j'ai essayé pas mal de trucs sans succès.

mais par contre je me disais, comment comptes-tu mettre des liens dans tout ça car actuellement c'est juste une "maquette", il n'y a aucune interraction possible.

tu aurais intérêt à mettre tout ça en html/css, tu verras en t'y mettant que c'est beaucoup moins casse-tête que ce genre de tableau.

je recommande le site du zero, en quelques heures seulement tu seras capable de re-coder ça ! (car pour avoir fait ça, tu as déjà des bases ....)

Publicité
Wolf_toufu
 Posté le 29/12/2007 à 19:53 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

merci pour ta réponse mais malheureusement je n'y arrive toujours pas...

j'ai essayé de regarder un peu le css, et donc en mettant les images les unes à la suite des autres dans un div, comme ca :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>essai</title>
  4. <style type="text/css">
  5. body {
  6. margin: 0;
  7. padding: 0;
  8. }
  9. .float {
  10. float: left;
  11. padding: 0;
  12. margin: 0;
  13. }
  14. p,h1,h2 {
  15. margin: 1em;
  16. }
  17. .flottante {
  18. background-color: #00ff00;
  19. border: 2px dotted #ffff00;
  20. margin: 0px;
  21. float: left;
  22. width: 100px;
  23. text-align: center;
  24. padding: 0;
  25. }
  26. .conteneur {
  27. width: 100%;
  28. padding: 0px;
  29. margin: 0px;
  30. border: 0px dotted;
  31. }
  32. .spacer {
  33. clear: both;
  34. }
  35. </style>
  36. </head>
  37. <body bgcolor="#eeeced" onload="MM_preloadImages('images/accOMO.gif')">
  38. <div class="conteneur">
  39. <div align="center"><img src="images/top.gif"/></div>
  40. </div>
  41. <div class="conteneur">
  42. <div align="center"><img src="images/accgauch.gif"/><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('accueil','','images/accOMO.gif',1)"><img src="images/acc.gif" name= "accueil" width="78" height="29" border="0" id="accueil" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('presentation','','images/presentOMO.gif',1)"><img src="images/present.gif" name="presentation" width="141" height="29" border="0" id="presentation" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('congres','','images/congresOMO.gif',1)"><img src="images/congres.gif" name="congres" width="91" height="29" border="0" id="congres" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('documents','','images/documentsOMO.gif',1)"><img src="images/documents.gif" name="documents" width="108" height="29" border="0" id="documents" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contactOMO.gif',1)"><img src="images/contact.gif" name="contact" width="82" height="29" border="0" id="contact" /></a><img src="images/contactdroit.gif"/></div></div>
  43. <div class="conteneur">
  44. <div align="center"><img src="images/gauchbienvenu.gif"/><img src="images/bienvenue.gif" /><img src="images/droitbienvenu.gif" /></div></div>
  45. <div class="conteneur" >
  46. <img src="images/lassoc.gif" widht="248" height="126"/> <table width="500" border="1"><tr><td>blabla</td></tr></table></div>
  47. </body>
  48. </html>

et ca marche très bien pour les deux premieres lignes,

mais ensuite il y a des images qui "prennent la place" de plusieurs lignes (la où en html j'utilisais les rowspan) et du coup je ne sais pas comment faire pour ces images..

je ne sais pas si je suis très clair....quels parametres dois-je ajouter?

selen
 Posté le 29/12/2007 à 21:37 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maîtresse astucienne

je crois que tu dois renoncer à tes images morcelées et plutôt jouer sur des images background, les bordures etc.

en gros tu as une structure de cette forme :

en haut: le header avec les éléments de menu horizontaux

à gauche : un menu en float-left

à droite : un menu en float-right

le centre

ici une structure déjà faite : http://css.alsacreations.com/modeles/modele5.htm

Malcolm
 Posté le 29/12/2007 à 22:44 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Astucien

à mon avis c'est une question de rowspan et de hauteur de cellules ton pb ... faudrait refaire la page sous un éditeru graphique mais j'ai la flemme d'installer frontpage ou dreamweaver rien que pour ça
Wolf_toufu
 Posté le 29/12/2007 à 23:04 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

j'ai déjà essayé de le refaire sous dreamweaver...même problème

les rowspan sont bons je pense...

je vais aller voir

selen
 Posté le 29/12/2007 à 23:09 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
  Maîtresse astucienne

Wolf_toufu a écrit :

j'ai déjà essayé de le refaire sous dreamweaver...même problème

les rowspan sont bons je pense...

je vais aller voir


oui moi aussi j'ai vérifié les rowspan et c'est bon, sinon ce serait pas bon sous firefox

c'est la hauteur de cellule ....

regarde tes MP je t'ai fait un début de page avec la disposition

Wolf_toufu
 Posté le 31/12/2007 à 14:03 
Aller en bas de la page Revenir au message précédent Revenir en haut de la page
Petit astucien

voila donc j'ai bien avancé, grâce à l'aide de Selen ; j'ai bien épluché aussi les tutoriaux du Site du Zero, mais il me reste encore un problème que je n'arrive pas à résoudre...malgré avoir revu mille fois mon code css...et malgré les tutoriaux, on ne peut pas tout maitriser en 2 jours !!

voila ce que j'ai :

donc j'ai des espaces entre les images, malgré les padding , et en ayant bien rentré toutes les dimensions...

j'ai cru le résoudre avec :

  1. div img
  2. {
  3. display: block;
  4. }

ce qui marche partiellement :

donc ca marche a gauche et a droite, mais pas en haut.

dans le bandeau en dessous du header, la première image s'affiche mais les autres ne suivent pas..et je ne peux pas faire un seul bandeau d'un bloc avec un background car certaines images sont des liens avec des onmouseover et d'autres non...

de même on ne le voit pas sur la capture mais il y a aussi un espace entre le footer et le reste de la page...mais un plus grand espace, une dizaine de pixels..

voila si quelqu'un peut m'aiguiller dans ma conquete du CSS -qui avance malgré tout-, je suis preneur !

le code CSS de la page :

  1. body {
  2. font-family: Verdana, Arial, Helvetica, sans-serif;
  3. font-size: 0.8em;
  4. margin: auto;
  5. padding: 0;
  6. background-color:#999999;
  7. width: 988px;
  8. height: 857px;
  9. }
  10. #header {
  11. position: relative;
  12. height: 118px;
  13. background-repeat:no-repeat;
  14. }
  15. #conteneur {
  16. position: relative;
  17. width: 988px;
  18. margin: auto;
  19. }
  20. #centre {
  21. position: relative;
  22. margin-top:27px;
  23. margin-left: 243px;
  24. margin-right: 230px;
  25. margin-bottom: -2px;
  26. height: 647px;
  27. }
  28. #topcentre {
  29. position: absolute;
  30. width: 1400px;
  31. height: 47px;
  32. margin:auto;
  33. top: 118px;
  34. left: 0px;
  35. right: 0px;
  36. }
  37. #gauche {
  38. position: absolute;
  39. left: 0;
  40. top: 146px;
  41. bottom: 107px;
  42. width: 248px;
  43. height: 600px;
  44. }
  45. #droite {
  46. position: absolute;
  47. right:0;
  48. width: 240px;
  49. top: 146px;
  50. bottom: 107px;
  51. height: 600px;
  52. }
  53. #pied {
  54. position: relative;
  55. bottom:0;
  56. height: 107px;
  57. }
  58. p {margin: 20px 20px; }
  59. .auto {overflow: auto; height: 500px;}
  60. a img{
  61. border: none;
  62. }
  63. div img
  64. {
  65. display: block;
  66. }
  67. div {
  68. border:none;
  69. padding:0;
  70. margin-top:0;
  71. margin-bottom:0;
  72. }
  73. .membr {
  74. position:relative;
  75. width: 100px;
  76. height: 100px;
  77. right: 0;
  78. }

et le code html :

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <title>sanstitre</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  6. </head>
  7. <div id="conteneur">
  8. <div id="header"><img src="images/top.gif"/> </div>
  9. <div id="topcentre"><img src="images/accgauch.gif"/><img src="images/acc.gif"/><img src="images/present.gif"/><img src="images/congres.gif"/><img src="images/documents.gif"/><img src="images/contact.gif"/><img src="images/contactdroit.gif"/>
  10. </div>
  11. <div id="gauche"><img src="images/gauchbienvenu.gif"/><img src="images/lassoc.gif"/><img src="images/bureau.gif"/><img src="images/revue.gif"/><img src="images/chapitr.gif"/><img src="images/congresgauch.gif"/><img src="images/inscription.gif"/><img src="images/contactgauch.gif"/><img src="images/libreservice.gif"/><img src="images/news.gif"/><img src="images/revupress.gif"/><img src="images/petitesann.gif"/><img src="images/annuair.gif"/><img src="images/forum.gif"/><img src="images/sousforum.gif"/>
  12. </div>
  13. <div id="droite"><img src="images/droitbienvenu.gif"/><img src="images/espacemembr.gif"/><img src="images/grosmembr.gif"/><img src="images/sousrecherch.gif"/>
  14. </div>
  15. <div id="centre">
  16. <img src="images/bienvenue.gif"/>
  17. <p class="auto" >
  18. partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
  19. partie avec du contenu occupant le reste de la largeur<br />
  20. partie avec du contenu occupant le reste de la largeur<br />
  21. partie avec du contenu occupant le reste de la largeur<br />
  22. partie avec du contenu occupant le reste de la largeur<br />
  23. </div>
  24. <div id="pied"><img src="images/bottom.gif"/></div>
  25. </div>
  26. </body>
  27. </html>

Page : [1] 
Page 1 sur 1

Vous devez être connecté pour participer à la discussion.
Cliquez ici pour vous identifier.

Vous n'avez pas de compte ? Créez-en un gratuitement !
Recevoir PC Astuces par e-mail


La Lettre quotidienne +226 000 inscrits
Avec l'actu, des logiciels, des applis, des astuces, des bons plans, ...

Les bonnes affaires
Une fois par semaine, un récap des meilleurs offres.

Les fonds d'écran
De jolies photos pour personnaliser votre bureau. Une fois par semaine.

Les nouveaux Bons Plans
Des notifications pour ne pas rater les bons plans publiés sur le site.

Les bons plans du moment PC Astuces

Tous les Bons Plans
44,96 €Boîtier PC ATX Fractal Focus G à 44,96 €
Valable jusqu'au 25 Juillet

Amazon propose actuellement le très bon boîter moyen tour Fractal Design Focus G à 44,96 € livré gratuitement alors qu'on le trouve ailleurs à plus de 69 €. Le boitier Fractal Design Focus G est une plateforme ultra-polyvalente douée de fonctions ultra pratiques (format ATX, filtres, USB 3.0, 2 ventilateurs LED inclus, emplacements 5,25 pouces pour lecteur DVD/Blu-Ray, montage facile).


> Voir l'offre
15,96 €24 Piles rechargeables AmazonBasics AAA 850 mAh à 15,96 €
Valable jusqu'au 25 Juillet

Amazon propose actuellement le lot de 24 piles rechargeables AmazonBasics AAA à 15,96 €. Ces piles ont une capacité de 850 mAh et sont livrés préchargées. Si vous avez besoin d'un chargeur de piles, vous pouvez vous tourner vers ce modèle.


> Voir l'offre
7,28 €Câble antivol Ewent EW1241 (1.5 m, à combinaison) à 7,28 €
Valable jusqu'au 26 Juillet

Amazon fait une promotion sur le câble antivol Ewent EW1241 qui passe à 7,28 € seulement au lieu de 12 €. Ce câble de 1,5 m est universel et facile à utiliser avec n'importe quel ordinateur portable ou de bureau avec un slot de sécurité. intégré. Protégez votre ordinateur contre le vol grâce à la serrure à combinaison à 4 chiffres.


> Voir l'offre

Sujets relatifs
gros problème d'affichage de mon site sous firefox
Problème d'affichage sous IE8
probleme affichage bannière sous IE
Problème d'affichage de Script sous Firefox
probleme d'affichage sous firefox
problème d'affichage sous firefox
IE sous tous le monde=>Probleme d'affichage
Problème affichage images sous IE => Résolu
[Resolu] Probleme d'affichage de tableaux sous Moz
Probleme d'affichage d'onglet dans Google
Plus de sujets relatifs à Probleme d''affichage de tableau sous IE...
 > Tous les forums > Forum Forum des Webmasters