[CSS] décalage avec Firefox avec display:inline / none

**rebolon** · 24/03/2006, 17h11

Bonjour,

alors voilà, je viens de remarque un problème avec Firefox :
j'ai un tableau dont certaines cellules sont cachées (style="display:none").
Je les affiches ensuite avec un javascript ("display:inline").
Si je clique à nouveau, cela va cacher la ligne, et ainsi de suite.
Sous IE, pas de problème (pour une fois) les lignes apparaissent puis se remettent en place à chaque clic.
Sous Firefox 1.5 les lignes apparaissent bien la première fois, par contre lors de la disparition, les lignes du dessous ne remontent pas à leur position d'origine et cela laisse donc une zone vide.

Voici un code exemple : cliquez plusieurs fois sur 'line 1' sous IE et Firefox pour voir la différence.

Si vous avez une solution, je suis preneur.
Merci

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
 
<HTML>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<script language="javascript">
        function showConfig(id){
           var temp = document.getElementById(id).style.display;
           if (temp == 'none') {
              document.getElementById(id).style.display = 'block';
           }else{
              document.getElementById(id).style.display = 'none';
           }
        }
</script>
<style>
* {
	font: medium Arial;
}
h1 {
	font: large Arial;
}
table {
    background-color: #FFF;
    border: 1px #FFF solid ;
	padding: 0px;
	empty-cells: show;
}
tr {
    background-color: #eacc74;
}
th{
	font: large Arial;
}
td {
    padding: 5px;
}
a:link{
    font-weight: bold;
    color: #1256B5; 
    text-decoration: none
}
a:visited {
    color: #1256B5; 
    text-decoration: none
}
a:hover{
    color: #FF3300; 
    text-decoration: underline
}
 
</style>
</head>
 
<body>
 
<table>
<tr>
<th> col 1 </th>
<th> col 2 </th>
<th> col 3 </th>
<th> col 4 </th>
</tr>
<tr>
<td class="label">
    <a href="javascript:showConfig('id0x0d006028');"> line 1 </a>
</td>
<td class="expr"> data </td>
<td class="expr"> data </td>
<td class="expr"> data </td>
</tr>
<tr class="param" id="id0x0d006028">
<td colspan="4">
<table with="100%">
<tr class="vxmlroute">
<td class="label"> subtitle 1.1 </td>
<td class="expr"> true </td>
</tr>
<tr class="vxmlroute">
<td class="label"> subtitle 1.2 </td>
<td class="expr"> true </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="label">
    <a href="javascript:showConfig('id0x0c3a7080');"> line 2 </a>
</td>
<td class="expr"> data </td>
<td class="expr"> data </td>
<td class="expr"> data </td>
</tr>
<tr class="param" id="id0x0c3a7080">
<td colspan="4">
<table with="100%">
<tr class="vxmlroute">
<td class="label"> subtitle 2.1 </td>
<td class="expr"> true </td>
</tr>
<tr class="vxmlroute">
<td class="label"> subtitle 2.1 </td>
<td class="expr"> true </td>
</tr>
</table>
</td>
</tr>
</table>
 
 
</body>
</html>

**virgul** · 27/03/2006, 09h17

Salut,

Je ne vois pas trop en quoi XML ou XSLT est impliqué dans ton problème.

Il existe sur développez un forum dédié a Html! Ton sujet sera plus à l'aise la-bas dans un premier temps.

Mais comme il s'agit d'un problème relatif a Firefox je te conseil de poster plutot ici:

http://www.geckozone.org/forum/viewforum.php?f=5&sid=70dc25920dc2149d803c69bc7ddfc8b0

Merci la prochaine fois de faire un peu attention et de réfléchir avant de poster! Car certe on est la pour vous aidez, mais la prochaine fois ca risque de rester un sujet sans réponse...

++

Thierry

[CSS] décalage avec Firefox avec display:inline / none

CSS

Discussions similaires

Partager

Partager