Problème d'affichage d'un tableau

Problème d'affichage d'un tableau - HTML/CSS - Programmation

Marsh Posté le 11-04-2007 à 11:23:33    

Bonjour,
J'ai un problème mors de l'affichage de mon tableau sous IE alors que sous Firefox tout est nickel.
Voici mon code:

Code :
  1. <div style="width:100%;overflow:auto;">
  2.       <table id=mainTable1 cellpadding="0" cellspacing="0" style="width:100%;overflow:hidden;">
  3.         <tr>
  4.      <?echo "<td id=$th width=33px>Date</td>
  5.     <td id=$th width=13px>Lg</td>
  6.     <td id=$th width=57px>File</td>
  7.     <td id=$th width=57px>Type</td>
  8.     <td id=$th width=119px>Source text</td>
  9.     <td id=$th width=135px>Proposal</td>
  10.     <td id=$th width=133px>Query/Comment</td>
  11.     <td id=$th width=\"1%\">Status</td>";?>
  12.         </tr>
  13.       </table>
  14.     </div>
  15.    
  16.     <div style="width:100%; height:210px; overflow-Y:auto;">
  17.       <table id=mainTable1  cellpadding="0"  cellspacing="0" style="border-collapse: collapse; width:100%; overflow:; ">
  18.    <?
  19.            while($query51 and $data = mysql_fetch_array($query51)) {
  20.               $author=$data["Translator_name"];
  21.               $language=$data["language_name"];
  22.               $doc_type=$data["Query_type"];             
  23.               $doc_name=str_replace("\"\"","\"",$data["Doc_name"]);
  24.               $query=str_replace("\"\"","\"",$data["Query_text"]);
  25.               $reference=str_replace("\"\"","\"",$data["Reference"]);
  26.               $proposal=str_replace("\"\"","\"",$data["Proposal"]);
  27.               $replied=$data["Replied"];
  28.               $date=$data["Creation_date"];
  29.               $query_status=$data["Query_status"];
  30.               $query_id=$data["query_id"]; 
  31.              
  32.               $nb=mysql_num_rows($query51);
  33.              
  34.               $query53=mysql_query("select distinct ISO from Languages where language_name='$language'" );
  35.               while($query53 and $data = mysql_fetch_array($query53)){
  36.                 $iso=$data["ISO"];
  37.               }
  38.               if ($browser=='Firefox'){
  39.                 $size_date='50px';
  40.                 $size_lg='28px';
  41.                 $size_doc='80px';
  42.                 $size_type='80px';
  43.                 $size_src='160px';
  44.                 $size_proposal='180px';
  45.                 $size_query='180px';
  46.               }
  47.               else if ($browser=='Internet Explorer'){
  48.                 $size_date='50';
  49.                 $size_lg='28';
  50.                 $size_doc='80';
  51.                 $size_type='80';
  52.                 $size_src='160';
  53.                 $size_proposal='180';
  54.                 $size_query='180';               
  55.               }
  56.    
  57.               echo "<tr width=\"100%\">
  58.               <td width=$size_date><div class=fix_cell><font size=2>$date</font</div></td>
  59.               <td width=$size_lg><div class=fix_cell>$iso</div></td>
  60.               <td width=$size_doc><div class=fix_cell>$doc_name</div></td>
  61.               <td width=$size_type><div class=fix_cell>$doc_type</div></td>
  62.               <td width=$size_src><div class=fix_cell>$reference</div></td>
  63.               <td width=$size_proposal><div class=fix_cell>$proposal</div></td>
  64.               <td width=$size_query><div class=fix_cell>
  65.                 <a href=\"popup.php?query_id=$query_id\" onclick=\"return !window.open(this.href,null,'width=610,height=690, status=no, directories=no, toolbar=no, location=no, menubar=no, scrollbars=yes, resizable=yes');\"><font color=\"blue\">$query</font></a>     
  66.               </div></td>
  67.               <td id=td1 width=2% >";
  68.                 if ($status==1) echo "<img src=\"./../img/new.jpg\" title=\"New query\"></td>";
  69.                 else if ($status==4) echo "<img src=\"./../img/customer.gif\" width=\"21px\" height=\"30px\" title=\"Sent to customer\"></td>";
  70.                 else if (($status==3)||($status==5)) echo"<img src=\"./../img/reply.gif\" title=\"Answered\"></td>";
  71.                 else if ($status==2) echo "<img src=\"./../img/sablier3.jpg\" title=\"Pending\"></td>";
  72.                
  73.                 if ($nb<=4) echo "<td width=\"2%\"></td>";
  74.           }
  75.         ?>
  76.   </table>
  77. </div>


 
Je sais c'est un peu compliqué mais c'est pcq que je dois avoir une scrollbar pour le tableau et pour certaines cases si besoin. Le problème ici c'est que les cases prennent un scrollbar si le contenu est trop grand sauf la case "File" qui contient le nom du document et dont le code est:

Code :
  1. <td width=$size_doc><div class=fix_cell>$doc_name</div></td>


En complément je vous mets le code de la css:

Code :
  1. .fix_cell{
  2. height:40px;
  3. overflow-y:auto;
  4. text-align:center;
  5. border-style:solid;
  6. border-width:1px;
  7. border-color:#AF0F01;
  8. }


J'espère que vous connaissez la raison de ce problème car j'y ai déjà perdu beaucoup de temps!!
Merci d'avance

Reply

Marsh Posté le 11-04-2007 à 11:23:33   

Reply

Marsh Posté le 11-04-2007 à 17:39:11    

déjà, tu oublies php à l'ouverture du php : <?php ... ?>
Ensuite, ton

Code :
  1. .fix_cell{
  2. height:40px;
  3. overflow-y:auto;
  4. text-align:center;
  5. border-style:solid;
  6. border-width:1px;
  7. border-color:#AF0F01;
  8. }


peut etre remplacé par

Code :
  1. .fix_cell{
  2. height:40px;
  3. overflow-y:auto;
  4. text-align:center;
  5. border:1px solid #AF0F01;
  6. }


Message édité par dartyduck le 11-04-2007 à 17:42:32

---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 11-04-2007 à 17:46:29    

Je te remercie mais maleheureusement ça ne résoud pas mon problème...

Reply

Marsh Posté le 11-04-2007 à 22:08:39    

tu as pas mis de " à ton id de table:

Code :
  1. <table id="mainTable1"  cellpadding="0"  cellspacing="0" style="border-collapse: collapse; width:100%; overflow:; ">

et utilise ta fauille css pour son style.
Ensuite, ton

Code :
  1. <div style="width:100%; height:210px; overflow-Y:auto;">

n'est pas tres xhtml ! utilise ta feuille css.
tu dois mettre des " à chaque div ou class. Et <div class=""> n'existe pas. c'est <span class=""></span> ou <div id=""></div>
Ensuite, faudrait que je prenne le temps de me plonger dans tes variables et là j'ai pas trop le temps.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 12-04-2007 à 11:16:01    

Bon vu que tu as l'air de t'y connaître je te lache pas!! J'ai corrigé mon code selon tes remarques..ms ça marche toujours pas...En fait, toutes mes cases sous IE s'affichent bien avec des scrollbars qd le texte est trop long..toutes..sauf une! j'ai pensé que c'est à cause du texte (c'est un nom de fichier assez long donc il n'y a pas d'espace entre les mots) et dc la césure ne peut pas se faire ms apparement c pas ça...
Je te remets le code:

Code :
  1. <div id="maindiv">
  2.       <table id="mainTable1" cellspacing="0"  cellpadding="0">
  3.         <tr>
  4.      <?php
  5.           echo "<td id=$th width=33px>Date</td>
  6.     <td id=$th width=13px>Lg</td>
  7.     <td id=$th width=57px>File</td>
  8.     <td id=$th width=57px>Type</td>
  9.     <td id=$th width=119px>Source text</td>
  10.     <td id=$th width=135px>Proposal</td>
  11.     <td id=$th width=133px>Query/Comment</td>
  12.     <td id=$th width=\"1%\">Status</td>";?>
  13.         </tr>
  14.       </table>
  15.     </div>
  16.    
  17.     <div id="maindiv">
  18.       <table id="mainTable1"  cellspacing="0" cellpadding="0">
  19.    <?php
  20.            while($query51 and $data = mysql_fetch_array($query51)) {
  21.               $author=$data["Translator_name"];
  22.               $language=$data["language_name"];
  23.               $doc_type=$data["Query_type"];             
  24.               $doc_name=str_replace("\"\"","\"",$data["Doc_name"]);
  25.               $query=str_replace("\"\"","\"",$data["Query_text"]);
  26.               $reference=str_replace("\"\"","\"",$data["Reference"]);
  27.               $proposal=str_replace("\"\"","\"",$data["Proposal"]);
  28.               $replied=$data["Replied"];
  29.               $date=$data["Creation_date"];
  30.               $query_status=$data["Query_status"];
  31.               $query_id=$data["query_id"]; 
  32.              
  33.               $nb=mysql_num_rows($query51);
  34.              
  35.               $query53=mysql_query("select distinct ISO from Languages where language_name='$language'" );
  36.               while($query53 and $data = mysql_fetch_array($query53)){
  37.                 $iso=$data["ISO"];
  38.               }
  39.               if ($browser=='Firefox'){
  40.                 $size_date='50px';
  41.                 $size_lg='28px';
  42.                 $size_doc='80px';
  43.                 $size_type='80px';
  44.                 $size_src='160px';
  45.                 $size_proposal='180px';
  46.                 $size_query='178px';
  47.               }
  48.               else if ($browser=='Internet Explorer'){
  49.                 $size_date='60px';
  50.                 $size_lg='35px';
  51.                 $size_doc='95px';
  52.                 $size_type='96px';
  53.                 $size_src='186px';
  54.                 $size_proposal='210px';
  55.                 $size_query='210px';               
  56.               }
  57.    
  58.               echo "<tr class=\"totr\">
  59.               <td width=$size_date><div class=\"totd\"><font size=2>$date</font></div></td>
  60.               <td width=$size_lg><div class=\"totd\">$iso</div></td>
  61.               <td width=$size_doc><div class=\"totd\">$doc_name</div></td>
  62.               <td width=$size_type><div class=\"totd\">$doc_type</div></td>
  63.               <td width=$size_src><div class=\"totd\">$reference</div></td>
  64.               <td width=$size_proposal><div class=\"totd\">$proposal</div></td>
  65.               <td width=$size_query>
  66.                 <div class=\"totd\">
  67.                   <a href=\"popup.php?query_id=$query_id\" onclick=\"return !window.open(this.href,null,'width=610,height=690, status=no, directories=no, toolbar=no, location=no, menubar=no, scrollbars=yes, resizable=yes');\"><font color=\"blue\">$query</font></a>     
  68.                 </div> 
  69.               </td>
  70. ...
  71.         ?>
  72.   </table>
  73. </div>


et voici le contenu de ma feuille de style:

Code :
  1. table#mainTable1{
  2.    width:100%;
  3.    text-align:center;
  4.    border:1px solid #AF0F01;
  5.    border-collapse : separate;
  6.    background-color:#E3E4E8;
  7.    overflow: auto;
  8. }
  11. .totd{
  12.   padding: 0px;
  13.   height:40px;
  14.   overflow:auto;
  15.   text-align:center;
  16.   border:1px solid #AF0F01;
  17. }
  19. .totr {
  20.     padding: 0px;
  21.     font-style: italic;
  22.     text-align: center;
  23.     background-color: #E3E4E8;
  24. }
  26. .maindiv{
  27.     width:100%;
  28.     height:210px;
  29.     overflow:auto;
  30. }


Merci d'avance

Reply

Marsh Posté le 12-04-2007 à 11:56:53    

tu aurais un lien pour montrer de quoi ca a l'air ?
Et le php je connais un peu, mais y'a des personnes plus compétentes que moi pour t'aider.
Moi je t'ai corrigé ton style pour qu'ensuite il ne reste que le php à regarder. mais envoie un lien.


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 12-04-2007 à 13:06:30    

Il me semble que le <tr> du dernier echo n'est pas fermé...
 
 
Bignose

Reply

Marsh Posté le 12-04-2007 à 14:31:23    

Merci vous 2 mais après 2 jours intenses, je crois avoir trouvé la source de mon problème...mais toujours pas la solution! J'explique: en fait qd il y a une longue chaîne de caractère sans espace Firefox mets automatiquement une scrollbar horizontale (car ds ma css j'ai overflow:auto;) seulement IE semble ne vouloir mettre que des scrollbar verticales (ce qui n'est pas posible si il n'y a pas d'espace ds le texte car il ne peut pas couper le texte). Do,nc ma question est: comment forcer l'affichage des scrollbar horizontales sous IE!!
Merci

Reply

Marsh Posté le 12-04-2007 à 16:19:25    

bon alors tu figes la largeur de ta boite (tableau, div, je sais pas moi) et dans ton css tu lui mets un "overflow-x: auto;"
et tu reviens nous donner le résultat


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 12-04-2007 à 16:38:16    

Ben j'ai déjà essayé...et là je viens de m'apercevoir que qd je mets overflow-x: auto; ça ne me mets même plus les barres verticales!!
J'ai trouvé une solution provisoire qui consiste à raccourcir les textes trop long si il n'y a pas d'espace ds le texte et qu'on est sous IE ms c du bricolage j'aime pas trop ça...
Merci de m'aider!

Reply

Marsh Posté le 12-04-2007 à 16:38:16   

Reply

Marsh Posté le 12-04-2007 à 23:23:27    

ce que tu peux faire c'est un css juste pour IE ou tu n'y mets que les trucs spécifiques pour IE, et tu mets un

Code :
  1. <!--[if IE]>
  2. <link rel="stylesheet" type="text/css" href="/style-ie.css" />
  3. <![endif]-->

dans ton <head>


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Marsh Posté le 13-04-2007 à 09:14:24    

oui ms je vois pas à quoi ça sert puisque je ne sais toujours pas comment faire pour que ça s'affiche bien sous IE!!

Message cité 1 fois
Reply

Marsh Posté le 13-04-2007 à 13:18:31    

T'as essayé de fermer le <tr> ?

Reply

Marsh Posté le 13-04-2007 à 14:24:24    

oui oui!!

Reply

Marsh Posté le 14-04-2007 à 12:46:31    

acorsa a écrit :

oui ms je vois pas à quoi ça sert puisque je ne sais toujours pas comment faire pour que ça s'affiche bien sous IE!!


le code que je t'ai mis est là pour appeler un code css spécial IE ou tu ne mets que les parties que tu veux adapter à l'affichage IE. Et du coup, ca s'affichera bien et sous IE et sous FF ! tu auras 2 feuilles de style.
La principale qui marche bien sous FF et une petite qui permettra aux trucs qui s'affichaient mal sous IE de bien s'afficher sous IE !


---------------
Nikon D7000 + 18-105VR + 35mm 1.8
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed