Probleme table width: IE ok FF Nok

**nalixis** · 02/10/2006, 03h34

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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'>&nbsp;</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

merci d'avance

**trotters213** · 02/10/2006, 09h12

il y a un problème vu qu'elles font 1% de 800px et que tu fais 60 boucles, ça fait 60% pas 100%

Essaie de voir en faisant ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
for($cpt=1; $cpt <= 59; $cpt++)
  {
    echo "<td width='8px' align='center' valign='middle'>&nbsp;</td>\n";
  }

**naudjf** · 02/10/2006, 09h48

salut nalixis,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ca fait qqchose comme 1.7%

A+

**nalixis** · 02/10/2006, 10h25

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**trotters213** · 02/10/2006, 10h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

"<td width='$width' align='center' valign='middle'>&nbsp;</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

**naudjf** · 02/10/2006, 11h43

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td>...</td>

de s'afficher les unes sous les autres.

**nalixis** · 02/10/2006, 11h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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'>&nbsp;</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.

**naudjf** · 02/10/2006, 11h59

[...après 20 minutes de tests...] il est chelou ce problème !!!

**naudjf** · 02/10/2006, 12h03

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

**naudjf** · 02/10/2006, 12h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

\"

à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

EX. :
echo "<td width=\"$width\" align=\"center\" valign=\"middle\"> </td>\n";

**trotters213** · 02/10/2006, 12h22

Ton problème de décimale peut avoir plusieurs causes:

les navigateurs n'apprécient pas vraiment les virgules, ils préfèrent le point :

3,7 pas bien
3.7 bien

utilise round() si tu veux arrondir un nombre

PS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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'>&nbsp;</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

**nalixis** · 02/10/2006, 13h05

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.

**nalixis** · 02/10/2006, 13h07

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 !

**trotters213** · 02/10/2006, 13h56

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

**nalixis** · 02/10/2006, 14h19

si

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**trotters213** · 02/10/2006, 14h25

tu les utilises mais ils sont à zéro

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

**nalixis** · 02/10/2006, 14h35

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

**trotters213** · 02/10/2006, 14h47

essaie ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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";
    }

Probleme table width: IE ok FF Nok

HTML

Discussions similaires

Partager

Partager