Firefox affiche mal si code trop long

**Bibicmoi** · 12/10/2009, 16h29

Bonjour tout le monde!

Je me retrouve avec un problème trop bizarre que je n'avais encore jamais vu (et jamais entendu parler non plus).
Je dois faire un tableau de 40 colonnes et 40 lignes, avec du contenu dans le tableau (forcément), et du contenu sous le tableau. Dans mon tableau, je place des info-bulles sur un lien hypertexte dans chaque case.
Au bout d'un certain nombre de lignes (ça doit dépendre du nombre de caractères dans le code), Firefox ne reconnaît plus l'info-bulle et la rend visible directement dans la page, sans qu'on ait besoin de passer la souris sur le lien. J'ai fait différents tests, et j'ai vraiment l'impression que Firefox plante si le code html de la page est trop long
Pour faire simple, voici un petit exemple :

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
 
<html>
	<head>
		<style>
                        .case{
                                font-size : 9px;
                                text-decoration : italic;
                                position        : relative;
                        }
                        
                        a.case {
                                text-decoration : none;
                                font-weight : normal;
                                color : #000000;
                        }
                        
                        a.case table{
                                position       :  absolute;
                                top            :  -2000em;
                                left           :  -2000em;
                                width          :  1px;
                                height         :  1px;
                                overflow       :  hidden;
                                border : 1px solid #000000
                        }
                        
                        a.case img{
                                border : none;
                        }
                        
                        a.case:hover table, a.case:focus table, a.case:active table 
                        {
                                top        :  20px;
                                left       :  0px;
                                width      :  200px;
                                height     :  auto;
                                overflow   :  visible;
                        }
 
                        a.case:hover {
                                border : 0;
                        }
 
                        .info{
                                background-color:#000000;
                                color:#ffffff;
                                width:200px;
                                border : none;
                        }
 
                        .info_hg{
                                width:12px;
                                border:none;
                        }
 
                        .info_h{
                                text-align:right;
                                border : none;
                                display : block;
                                padding : 0px;
                        }
 
                        .info_hd{
                                width:13px;
                                border : none;
                        }
 
                        .info_g{
                                vertical-align: bottom;
                                border : none;
                        }
 
                        .info_mid{
                                padding:5px;
                                border : none;
                        }
 
                        .info_d{
                                width:13px;
                                vertical-align:top;
                                border : none;
                        }
 
                        .info_bg{
                                width:12px;
                                border : none;
                        }
 
                        .info_b{
                                text-align:left;
                                border : none;
                        }
 
                        .info_bd{
                                width:13px;
                                border : none;
                        }
                </style>
	</head>
 
	<body>
		<br />
 
		<table>
			<tr>
				<td>
					<a class="case" href="#">1-1
						<table class='info' cellpadding='0' cellspacing='0'>
							<tr>
								<td class='info_hg'></td>
								<td class='info_h'></td>
								<td class='info_hd'></td>
							</tr>
							<tr>
								<td class='info_g'></td>
								<td class='info_mid'>??</td>
								<td class='info_d'></td>
							</tr>
							<tr>
								<td class='info_bg'></td>
								<td class='info_b'></td>
								<td class='info_bd'></td>
							</tr>
						</table>
					</a>
				</td>
			<tr>
		</table>
	</body>
</html>

Vous voyez, en passant la souris sur le lien, l'info-bulle apparaît. Tout va bien. Copiez maintenant la table une centaine de fois (113 pour moi), et les "??" vont apparaître en dur dans la page. Firefox a rajouté une ouverture de balise "a" avant la fermeture du tableau, donc il ne comprend plus le style.

Est-ce que quelqu'un a déjà rencontré le problème? Y a-t-il une solution?

Merci pour vos réponses!

**kaiser59** · 12/10/2009, 18h11

Salut,

Je ne pense pas me tromper en te disant qu'à l'origine ton code n'est sémantiquement pas correcte une balise table ne peut pas être entouré de la balise a et de plus tu ne lui mets pas un DOCTYPE afin de corriger des bugs.

**Bibicmoi** · 12/10/2009, 18h31

Merci pour la réponse!

Concernant le doctype, je les ai tous essayé, aucun ne corrige le problème. Donc pour l'exemple, je n'en ai pas mis.
Ensuite, pour faire une infobulle un peu stylée (dans mon exemple, j'ai tout épuré pour aller à l'essentiel), quelles balises pourrais-je utiliser pour pouvoir les imbriquer dans le "a"? (Pour info, ma vraie infobulle représente un cadre : un coin haut droit, un coin haut gauche, une bordure haut...)

**kaiser59** · 12/10/2009, 18h39

Pour créer ou améliorer le visuel d'une infobulle je conseille d'utiliser css ou javascript en cherchant vite fait j'ai trouvé ça

**Bibicmoi** · 12/10/2009, 18h41

Les span ne suffiront pas (sinon, j'aurais tranquillement recopié le tuto qu'on peut trouver ici

)
J'espère qu'on peut mettre des div, sinon, il me sera impossible de rajouter une belle infobulle

Merci pour tes réponses Kaiser!

**Bibicmoi** · 13/10/2009, 13h48

Bon, OK, j'ai remplacé mes table par 2 span : un pour mettre une image (celle de mon cadre) et un pour le texte.
Tout ça imbriqué dans la balise "a" fait très bien l'affaire.
Merci pour l'aide!

Firefox affiche mal si code trop long

HTML

Discussions similaires

Partager

Partager