Discussion :

[jolivier]

Bonjour tout le monde,

je souhaite afficher un calendrier dans une page web, j'utilise donc une structure de tableau avec une case par jour. Je met une CSS par dessus pour obtenir ce résultat :
Affichage d'un mois.
Mais comme vous le remarquerez surement, au premier affichage de la page, le tableau est très mal affiché : il n'y a pas 7 cellules par ligne, firefox rajoute des lignes etc...
Cependant, actualisez la page et vous verrez que le tableau s'agence parfaitement au 2ème coup , alors que c'est exactement le même code (html). (à part les ? qui sont du à l'encodage des caractères qui a mal supporté la copie).
Je donne l'extrait de la CSS qui régit le calendrier :

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
 
.navigation a{
text-decoration:none;
color:#66aaf0;
}
.navigation a:hover{
color:#1fb4a4;
background-color:#bcebc4;
}
.navigation b{
font-size:32px;
color:#2bd181;
}
.ajout{
border-left:1px solid #cccccc;
border-bottom:1px solid #cccccc;
color:#000000;
text-align:center;
font-size:11px;
float:right;
width:14px;
height:14px;
}
.ajout a{
text-decoration:none;
}
.ajout a:hover{
color:#1fb4a4;
background-color:#bcebc4;
}
.aujourdhui{
border:1px solid #0e8ad5;
background-color:#d9edff;
float:left;
height:200px;
}
.bouton{
border:1px solid #cccccc;
background-color:#ededed;
height:20px;
margin-bottom:5px;
margin-left:auto;
margin-right:auto;
width:300px;
text-align:center;
}
.cadre{
margin-top:100px;
margin-left:auto;
margin-right:auto;
width:500px;
background-color:#f9f9f9;
padding:5px;
text-align:center;
border:1px dashed #cccccc;
}
hr{
width:90%;
color:#000000;
}
.moisactuel{
border:1px solid #cccccc;
float:left;
}
.moisdiff{
border:1px solid #cccccc;
float:left;
background-color:#ededed;
}
.navigation{
font-size:12px;
}
#calendrier td div{
background-image:url(images/fond_entrees_calendrier.png);
-moz-border-radius:3px;
margin-bottom:4px;
padding-bottom:3px;
}
.comm{
color:#000000;
font-size:9px;
border:1px solid #000000;
background-color:#FFFFFF;
margin:1px;
-moz-opacity:0.5;
 
}
#calendrier .suppr{
float:right;
font-size:12px;
height:20px;
margin-top:-5px;
text-align:center;
}
#calendrier .suppr a{
text-decoration:none;
}
#calendrier .suppr a:hover{
color:#000000;
background-color:#ffffff;
}
#calendrier{
border:1px solid #cccccc;
/*-moz-border-radius:15px;*/
width:889px;
}
#calendrier td{
width:120px;
margin:1px;
height:145px;
}
#calendrier h1{
font-size:16px;
}

Ce bug ne touche que firefox (IE affiche "correctement" le calendrier (c'est bien le seul truc d'ailleurs).
Alors j'aimerais savoir si vous voyez dans la CSS des éléments qui pourraient être la source de ce problème.
Merci d'avance.
Jolivier

[Neroptik]

Bonjour,
Je suis sous FF 2.0.0.4 et je n'ai pas ce probleme

[Candygirl]

Bonjour,
Je suis sous FF 2.0.0.4 et je n'ai pas ce probleme

de même pour moi ici sous FF même version ou seamonkey 1.1.1

[jolivier]

Oui, le problème est aléatoire, mais en quittant firefox et en réouvrant cette page normalement le problème apparait. Apparement il a une probabilité non nulle d'apparaitre au premier chargement de la page, mais aux suivants (dans la même session de firefox) il n'apparait plus sur la même page. Par contre quand on demande l'affichage d'un autre mois le problème recommence même si auparavant firefox a bien affiché un autre mois. Donc vous pourrez observer le problème en réouvrant firefox et en demandant la même page (je suis désolé j'ai pas choisi le bug et ça m'embête de demander ça).

NB : vous n'avez accès qu'au mois d'Aout, cette page est une copie d'une page générée par le script qui lui demande une authentification

[kaiser59]

Salut,

Ben écoute moi j'ai FF 2.0.0.4 est cela fonctionne nikel que je sorte ou que je rafraichisse la page j'ai toujours le même résultat.

Par contre ta mis un ü au lieu d'un û à août c'est le seule reproche qu'on puisse faire à la page

++

[Neroptik]

Moi aussi j'ai tester et retester mais impossible de reproduire le decalage que tu obtient... c'est plutot une bonne chose non ?

Le probleme viens peut être de chez toi.... tu a quelle version de FF ?

[petchos]

ben oui ça marche nickel, suis sous Firefox 2.0.0.4

[jolivier]

je rage, moi non plus je n'arrive plus à avoir ce bug avec cette page, mais je l'obtiens en regardant d'autres mois. J'ai Firefox 2.0.0.4 aussi. Mais j'ai déjà eu ce bug avec cette page là et une autre personne m'a confirmé l'avoir...je vous montre ce que ça donne, avec le même mois, mais généré par le script (le code tu tableau reste le même, seules quelques textes changent dans la page, et le fait que Firefox ne reconnaisse pas exactement la page html que je vous ai montré joue apparement un rôle) :

C'est en train de confirmer une règle empirique : les bugs n'arrivent jamais quand les personnes pouvant les résoudre sont là pour les observer.
J'éspère que le screenshot vous aidera, et je corrige le ü de ce pas :p

[kaiser59]

Re,

Bien que personne n'est de problème d'affichage hormis toi je pencherais plutôt à un problème dans ton code que dans le css vue que tu utilises un tableau pour afficher ton calendrier.

Ce que je peux te proposer s'est d'utiliser modulo par contre en php je ne sais pas trop comment cela fonctionne. Ainsi toutes les 7 cellules tu indiques qu'il faut revenir à la ligne avec le "</tr>".

++

[jolivier]

Et bien c'est ce que j'utilise, la congruence modulo 7, enfin plus simplement je fait un </tr><tr> entre dimanche et Lundi.
Mais en fait j'ai trouvé d'ou venait le problème : dans une version précédente je n'utilisais pas un tableau mais plein de div avec dans leur css un float:left; pour que ça fasse comme un tableau. Et j'ai du oublier de l'enlever en passant au tableau, parce que maintenant en les enlevant je n'ai plus du tout le bug
Conclusion : c'est pas bien les float sur les td....

Merci à vous tous d'avoir cherché, je vais mettre que c'est résolu