> Tous les forums > Forum des Webmasters

 Probleme d'affichage de tableau sous IE...
Statut du sujet : NON RESOLU Imprimer
 Wolf_toufu
  Posté le 20/12/2007 @ 16:27  
 Petit astucien

409 Messages

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>
 Afficher le profil de Wolf_toufu Envoyer un message privé à Wolf_toufu
 
 
Publicité
 jpbardiau  Posté le 20/12/2007 à 17:41  
Petit astucien


294 Messages

Bonjour,

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

Afficher le profil de jpbardiauEnvoyer un message privé à jpbardiau
 Revenir en haut de la page
 elle  Posté le 20/12/2007 à 17:57  
  Maîtresse astucienne


15850 Messages
Afficher le profil de elle Voir la configuration de elleEnvoyer un message privé à elle
 Revenir en haut de la page
 Wolf_toufu  Posté le 24/12/2007 à 17:33  
Petit astucien

409 Messages

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 !

Afficher le profil de Wolf_toufu Voir la configuration de Wolf_toufuEnvoyer un message privé à Wolf_toufu
 Revenir en haut de la page
 Malcolm  Posté le 24/12/2007 à 18:07  
  Astucien


7299 Messages
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 ...
Afficher le profil de Malcolm Voir la configuration de MalcolmEnvoyer un message privé à Malcolm
  Revenir en haut de la page
 Wolf_toufu  Posté le 26/12/2007 à 15:56  
Petit astucien

409 Messages

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

Afficher le profil de Wolf_toufu Voir la configuration de Wolf_toufuEnvoyer un message privé à Wolf_toufu
 Revenir en haut de la page
 Malcolm  Posté le 26/12/2007 à 17:49  
  Astucien


7299 Messages

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 ...

Afficher le profil de Malcolm Voir la configuration de MalcolmEnvoyer un message privé à Malcolm
  Revenir en haut de la page
 Wolf_toufu  Posté le 29/12/2007 à 18:24  
Petit astucien

409 Messages

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....

Afficher le profil de Wolf_toufu Voir la configuration de Wolf_toufuEnvoyer un message privé à Wolf_toufu
 Revenir en haut de la page
 selen  Posté le 29/12/2007 à 18:35  
  Maîtresse astucienne


10732 Messages

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 ....)

Afficher le profil de selen Voir la configuration de selenEnvoyer un message privé à selen
 Revenir en haut de la page
 Wolf_toufu  Posté le 29/12/2007 à 19:53  
Petit astucien

409 Messages

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. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>essai</title>
  6. <style type="text/css">
  7. body {
  8.   margin: 0;
  9.   padding: 0;
  10.  
  11. }
  12. .float {
  13.   float: left;
  14.   padding: 0;
  15.   margin: 0;
  16. }
  17. p,h1,h2 {
  18.   margin: 1em;
  19. }
  20. .flottante {
  21.   background-color: #00ff00;
  22.   border: 2px dotted #ffff00;
  23.   margin: 0px;
  24.   float: left;
  25.   width: 100px;
  26.   text-align: center;
  27.   padding: 0;
  28. }
  29. .conteneur {
  30.   width: 100%;
  31.   padding: 0px;
  32.   margin: 0px;
  33.   border: 0px dotted;
  34.  
  35. }
  36. .spacer {
  37.   clear: both;
  38. } 
  39. </style>
  40.  
  41. </head>
  42.  
  43. <body bgcolor="#eeeced" onload="MM_preloadImages('images/accOMO.gif')">
  44.  
  45.           <div class="conteneur">
  46.             <div align="center"><img src="images/top.gif"/></div>
  47.           </div>
  48.  
  49.           <div class="conteneur">
  50.               <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>
  51.  
  52.  
  53.            <div class="conteneur">
  54.               <div align="center"><img src="images/gauchbienvenu.gif"/><img src="images/bienvenue.gif"  /><img src="images/droitbienvenu.gif" /></div></div>
  55.  
  56.       <div class="conteneur" >
  57.           <img src="images/lassoc.gif" widht="248" height="126"/> <table width="500" border="1"><tr><td>blabla</td></tr></table></div>
  58.  
  59.  
  60.  
  61.  
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68.  
  69.  
  70.  
  71.  
  72. </body>
  73. </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?

Afficher le profil de Wolf_toufu Voir la configuration de Wolf_toufuEnvoyer un message privé à Wolf_toufu
 Revenir en haut de la page
 selen  Posté le 29/12/2007 à 21:37  
  Maîtresse astucienne


10732 Messages

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

Afficher le profil de selen Voir la configuration de selenEnvoyer un message privé à selen
 Revenir en haut de la page
 Malcolm  Posté le 29/12/2007 à 22:44  
  Astucien


7299 Messages
à 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
Afficher le profil de Malcolm Voir la configuration de MalcolmEnvoyer un message privé à Malcolm
  Revenir en haut de la page
 Wolf_toufu  Posté le 29/12/2007 à 23:04  
Petit astucien

409 Messages

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

les rowspan sont bons je pense...

je vais aller voir

Afficher le profil de Wolf_toufu Voir la configuration de Wolf_toufuEnvoyer un message privé à Wolf_toufu
 Revenir en haut de la page
 selen  Posté le 29/12/2007 à 23:09  
  Maîtresse astucienne


10732 Messages
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

Afficher le profil de selen Voir la configuration de selenEnvoyer un message privé à selen
 Revenir en haut de la page
 Wolf_toufu  Posté le 31/12/2007 à 14:03  
Petit astucien

409 Messages

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.  
  11. #header {
  12. position: relative;
  13. height: 118px;
  14. background-repeat:no-repeat;
  15. }
  16.  
  17. #conteneur {
  18. position: relative;
  19. width: 988px;
  20. margin: auto;
  21. }
  22.  
  23. #centre {
  24. position: relative;
  25. margin-top:27px;
  26. margin-left: 243px;
  27. margin-right: 230px;
  28. margin-bottom: -2px;
  29. height: 647px;
  30. }
  31.  
  32. #topcentre {
  33. position: absolute;
  34. width: 1400px;
  35. height: 47px;
  36. margin:auto;
  37. top: 118px;
  38. left: 0px;
  39. right: 0px;
  40. }
  41.  
  42. #gauche {
  43. position: absolute;
  44. left: 0;
  45. top: 146px;
  46. bottom: 107px;
  47. width: 248px;
  48. height: 600px;
  49. }
  50.  
  51. #droite {
  52. position: absolute;
  53. right:0;
  54. width: 240px;
  55. top: 146px;
  56. bottom: 107px;
  57. height: 600px;
  58. }
  59.  
  60. #pied {
  61. position: relative;
  62. bottom:0;
  63. height: 107px;
  64. }
  65.  
  66.  
  67. p {margin: 20px 20px; }
  68.  
  69. .auto {overflow: auto; height: 500px;}
  70.  
  71. a img{
  72.    border: none;
  73. }
  74. div img
  75. {
  76.    display: block;
  77. }
  78.  
  79. div { 
  80.   border:none;
  81.   padding:0;
  82.   margin-top:0;
  83.   margin-bottom:0;
  84.  
  85. }
  86.  
  87. .membr {
  88.   position:relative;
  89.   width: 100px;
  90.   height: 100px;
  91.   right: 0;
  92. }

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. <head>
  4. <title>sanstitre</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
  7. </head>
  8. <body>
  9.  
  10. <div id="conteneur">
  11.  
  12.          <div id="header"><img src="images/top.gif"/>       </div>
  13.  
  14.       <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"/>
  15.     </div>
  16.  
  17.  
  18.  
  19.  
  20.          <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"/>
  21.          </div>
  22.  
  23.          <div id="droite"><img src="images/droitbienvenu.gif"/><img src="images/espacemembr.gif"/><img src="images/grosmembr.gif"/><img src="images/sousrecherch.gif"/>
  24.            </div>
  25.  
  26.          <div id="centre">
  27.      <img src="images/bienvenue.gif"/>
  28.  
  29.      <p class="auto" >
  30.      partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
  31.  
  32.          partie avec du contenu occupant le reste de la largeur<br />
  33.          partie avec du contenu occupant le reste de la largeur<br />
  34.          partie avec du contenu occupant le reste de la largeur<br />
  35.          partie avec du contenu occupant le reste de la largeur<br />
  36.  
  37.  
  38.        </div>
  39.  
  40.          <div id="pied"><img src="images/bottom.gif"/></div>
  41. </div>
  42.  
  43.  
  44. </body>
  45. </html>

Afficher le profil de Wolf_toufu Voir la configuration de Wolf_toufuEnvoyer un message privé à Wolf_toufu
 Revenir en haut de la page
Haut de la page 
Inscrivez-vous !
- Posez vos questions

- Résolvez vos problèmes

- Aidez les autres

- Participez et créez vos discussions

- Dialoguez en privé avec d'autres membres

- Suivez vos sujets préférés

- Affichez les signatures des membres

TOUT EST GRATUIT !

Je crée mon compte




Vous avez besoin d'aide ?
Des centaines d'experts sont à votre disposition sur les forums PC Astuces pour vous aider gratuitement, 24h/24, 7j/7.

Les derniers sujets résolus !
 

 > Tous les forums > Forum des Webmasters

 
Forum PC Astuces© 1997-2008 WebastucesAller en haut de la page