Probleme table width: IE ok FF Nok

Version imprimable

Bonjour,

j'ai un souci avec un bout de code tout simple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>New document</title> </head> <body> <table width='800px' style='font-size: 8pt; border-collapse: collapse' border='1' cellpadding='0' cellspacing='0'> <tr> <?php for($cpt=1; $cpt <= 59; $cpt++) { $width = "1%"; echo "<td width='$width' align='center' valign='middle'> </td>\n"; } ?> </tr> </table> </body> </html>
Sous IE, chaque case a la meme taille et si on change la taille globale du tableau -> pas de souci
En revanche sous FF, les cases ont la meme taille au debut, mais les dernieres sont toutes ratatinées...

Je seche..si vous avez une idee, je suis preneur :roll:

merci d'avance

02/10/2006, 09h12
trotters213
:salut:
il y a un problème vu qu'elles font 1% de 800px et que tu fais 60 boucles, ça fait 60% pas 100% :koi:
Essaie de voir en faisant ceci :
Code:

1 2 3 4 for($cpt=1; $cpt <= 59; $cpt++) { echo "<td width='8px' align='center' valign='middle'> </td>\n"; }
02/10/2006, 09h48
naudjf

salut nalixis,

Tu mets en variable php la taille du nbre de colonnes (

Code:

$nbColonnes=59;

). Tu évalues (une seule fois, cad PAS A L INTERIEUR DE LA BOUCLE !!), la taille en % d'une cellule comme ceci (avant la boucle for, donc):

Code:

$width = 1/$nbColonnes*100."%";

ca fait qqchose comme 1.7%

A+
02/10/2006, 10h25
nalixis
salut,

1. En fait la taille de la table n'est pas fixe en réalité, elle est de 80%.

2. J'ai essayé de faire en sorte que la somme des largeurs des colonnes fassent 100% en rajoutant comme tu conseilles le code suivant :
Code:

1 2 3 $nbColonnes = 59; $width = ((1/$nbColonnes)*100)."%";
Le résultat est le même: les dernieres colonnes sont moins large.

J'ai essayé de répartir la taille globale avec du "1*" par exemple mais c'est encore pire !
02/10/2006, 10h38
trotters213

tu devrais essayer comme je t'ai expliqué : en donnant une taille fixe pour le coder en dur et après à partir de cette taille fixe, de la faire en dynamique pour voir d'où peut venir le problème.

PS : ça ne changera surement rien mais ton \n ici

Code:

"<td width='$width' align='center' valign='middle'> </td>\n";

doit afficher \n non? tu devrais plutôt utiliser <br />.
Aute petit truc, utilise un caractère d'échappement et les doubles-côtes pour les valeurs de tes attributs plutôt que les simples côtes ;)
02/10/2006, 11h43
naudjf

non, je pense que le "\n" permet juste aux lignes en

Code:

<td>...</td>

de s'afficher les unes sous les autres.

salut,

Réponse à tes conseils:
en effet, en fixant la largeur du tableau et celles des cellules ca marche sous IE et FF (sachant que c'est la taille du tableau qui predomine)

en revanche des qu'on passe en % ca deconne de nouveau sous FF.

En poussant un peu les recherches je me suis apercu que ca ne marchait pas lorsque la valeur de width est un nombre décimal !
Il semblerait qu'IE l'interprete ou l'ignore alors que FF galere..bizarre

Mais je pense avoir trouvé une solution:
si je laisse la taille du tableau en dynamique (ex 80%) et que je fixe la taille des cellules a une valeur supérieure à la réalité, alors ca marche !

ex: tableau 80%, 59 cellules, ecran 1024px:
largeur cellules = (80%*1024)/59 = 13.8px
On fixe alors la largeur a 20px -> ca roule
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>New document</title> </head> <body> <table width="80%" style='font-size: 8pt; border-collapse: collapse' border='1' cellpadding='0' cellspacing='0'> <tr> <?php $width = "20"; for($cpt=1; $cpt <= 59; $cpt++) { echo "<td width='$width' align='center' valign='middle'> </td>\n"; } ?> </tr> </table> </body> </html>
Merci pour votre aide,

A+

PS: le "\n" va avec le "echo" du code php, il a simplement pour effet d'ecrire le code html a la ligne lors de l'interpretation.

02/10/2006, 11h59
naudjf

[...après 20 minutes de tests...] il est chelou ce problème !!!
02/10/2006, 12h03
naudjf

Effectivement, ta solution empirique fonctionne bien !

Il n'y pas un expert CSS, ici, qui pourrait nous éclairer sur le pourquoi de ce "ratatinement" ?

je suis :(
02/10/2006, 12h05
naudjf

par contre, suis le conseil de trotters213 :
mets des guillements, pas de cotes, autour de la valeur des attributs HTML.

Si tu codes du HTML dans du php, utilises le

Code:

\"

à la place de

Code:

'

EX. :
echo "<td width=\"$width\" align=\"center\" valign=\"middle\"> </td>\n";
02/10/2006, 12h22
trotters213
Ton problème de décimale peut avoir plusieurs causes:
:fleche: les navigateurs n'apprécient pas vraiment les virgules, ils préfèrent le point :

Citation:

3,7 pas bien
3.7 bien

:fleche: utilise round() si tu veux arrondir un nombre ;)

PS :
Code:

1 2 3 4 5 6 7 8 <?php $width = "20"; for($cpt=1; $cpt <= 59; $cpt++) { echo "<td width='$width' align='center' valign='middle'> </td>\n"; } ?>
ça sert à rien de donner la valeur 20 à width si c'est une valeur fixe et qui plus est, que tu ne modifies pas :mrgreen:
02/10/2006, 13h05
nalixis

j'avoue qu'il est vraiment chelou ce pb.

en fait, j'ai pas trouvé LA solution, parce que quand je rajoute du texte maintenant dans les cases...ben certaines s'agrandissent (alors qu'il y a la place) et d'autres pas...

j'mexplique: je mets 2 lignes comme celle du dessus. sur la deuxieme j'alterne un 'colspan 4' et une cellule simple jusqu'a la fin. dans les grandes cellules je met du texte et selon la longueur ben ca me change la largeur de mes cellules, et les dernieres sont de nouveau toutes ratatinées..

c'est un vrai merdier.
02/10/2006, 13h07
nalixis

pour l'histoire des décimales, j'ai pas trouvé pourquoi. J'utilise bien le point comme séparateur.

PS: faut pas m'en vouloir pour les absurdités grammaticales de code...c'est du test !
02/10/2006, 13h56
trotters213

t'utiliserais pas cellpadding ou padding?
tu peux nous montrer ton code?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>New document</title>
</head>
 
<body>
<table width="80%" style='font-size: 8pt; border-collapse: collapse' border='1' cellpadding='0' cellspacing='0'>
 <tr>
  <?php
  $width = "20";
 
  for($cpt=1; $cpt <= 59; $cpt++)
  {
    echo "<td width='$width' align='center' valign='middle'>&nbsp;</td>\n";
  }
  echo "</tr>
           <tr>";
  for($cpt=1; $cpt <= 12; $cpt++)
  {
    switch($cpt)
    {
        case 5: $nom = "Guillaume"; break;
        case 6: $nom = "Eric"; break;
        case 7: $nom = "Régis"; break;
        case 8: $nom = "Samuel"; break;
        default: $nom = "&nbsp;";
    }
 
    echo "<td colspan='4' align='center' valign='middle'>$nom</td>\n";
    if($cpt < 12)
    {
      echo "<td align='center' valign='middle'>&nbsp;</td>\n";
    }
  }
 
  ?>
 </tr>
</table>
</body>
 
</html>

02/10/2006, 14h25
trotters213

tu les utilises mais ils sont à zéro :mrgreen:.
tu devrais les mettre dans un fichier CSS et leur donner une unité et pas laisser 0 seul (c'est une bonne habitude à prendre).
Ensuite

Code:

"<td colspan='4' align='center' valign='middle'>$nom</td>\n";

td crée une colonne et à chaque colonne créée tu veux en fusionner 4 puisque je te rappelle que colspan définit le nombre de cellules à fusionner horizontalement.
Je comprends pas vraiment ce que tu veux faire :koi:
02/10/2006, 14h35
nalixis

ok pour le css, en fait c'est deja fait dans la vrai page mais la c'est un test alors...

ce que j'essaye d'avoir c'est une ligne avec 59 cases, et une dessous avec 12 "grandes" cases (d'ou le colspan 4) separées par une case.
ca fait donc bien: 4*12 + 11 = 59

La finalité de tout ca c'est que j'ai une BD de toute ma grande famille et je suis en train de mettre au point un algo en php pour generer une arbre genealogique (donc symétrie parfaite oblige pour les liaisons). En fait l'algo en lui meme est bouen c'est juste la mise en page qui chie..

essaie ceci :

Code:

1
2
3
4
5
echo "<td colspan=\"4\" align=\"center\" valign=\"middle\">$nom</td>\n";
    if($cpt < 12)
    {
      echo "<td colspan=\"4\" align=\"center\" valign=\"middle\">&nbsp;</td>\n";
    }