Problème sous Firefox display none / block

Version imprimable

Bonjour,

j'ai une table que je veux pouvoir cacher ou afficher en cliquant sur un lien.
Voici un code qui fonctionne bien sous IE et mal sou FIrefox. Je ne sais pas comment resoudre mon problème :

Sous Firefox, si je clique sur "Hide" puis sur "Show", la cellule du tableau ne prend pas toute la largeur et donc mon texte "test" ne se retrouve pas à droite....

D'avance merci,

Jerome
-----------

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
<html>
<body>
	<br>
	<br>
	<table width=100% border=1 id=testTable>
		<tr>
			<td align=right>
				test
			</td>
		</tr>
	</table>
	<a href="javascript:;" onclick="HideTable();">Hide</a>
	<a href="javascript:;" onclick="ShowTable();">Show</a>
	<script>
                function ShowTable() {
                        var myTable=document.getElementById('testTable');
                        if (myTable) {
                                myTable.style.display = 'block';
                        }
                }               
                function HideTable() {
                        var myTable=document.getElementById('testTable');
                        if (myTable) {
                                myTable.style.display = 'none';
                        }
                }               
        </script>
</body>
</html>

14/03/2007, 13h32
MasterOfChakhaL

Salut,

Je pense que tu devrais mettre des guillemets autour de la valeur de tes attributs

Code:

<table width=100% border=1 id=testTable>

devient:

Code:

<table width="100%" border="1" id="testTable">
14/03/2007, 20h13
cedsun

Hello,

Chez moi, ça marche bien sous Firefox...
15/03/2007, 10h22
deY!

A la place de

Code:

display='block'

utilise

Code:

display=''

Comme ça tu ne forceras pas le display de ta table, et tu l'afficheras avec ces proprieté de display de base.

Utilise display='block', seulement si tu veux forcé un element inline à devenir un block.
20/01/2009, 15h26
habibal

tu est un genie

merci dey j'aurai j'amais eu l'idée pourtant c'est claire th n'est pas un block :yaisse2:
20/01/2009, 15h37
deY!

Ahaha, pas de quoi, mais c'était pas nécessaire de répondre à un post de presque 2 ans :D
20/01/2009, 16h02
Bovino

Petite précision toutefois :

Code:

display=''

force l'affichage selon la déclaration CSS d'origin et s'il n'y a pas de règle CSS définie, le style par défaut.
En gros, si tu déclares display: none dans ta feuille de style, le display='' reviendra à none.

Je ne suis pas d'accord.
Lorsque j'utilise

Code:

1
2
3
4
5
6
7
8
9
10
<div id="bob" style="display:none;background-color:#F00;width:100px;height:100px"></div>
<script type="text/javascript">
        var i = 0;
        function test() {
                if (i%2 == 0) document.getElementById('bob').style.display = '';
                else document.getElementById('bob').style.display = 'none';
                i++;
        }
        var timer=setInterval("test()", 2000);
</script>

Mon <div> apparait et disparait, alors que par défaut, il est à display:none.

Code:

display:none;

Annule complètement la valeur indiquée, et utilise le display par défaut de l'élément ciblé.

20/01/2009, 16h22
Bovino

:nono: je parlais de style CSS, pas de style inline.
Inclues le display: none; dans une feuille de style et tu verras la différence. ;)
20/01/2009, 16h27
deY!

On est d'accord.
Il s'agit de deux sources différentes, si on annule le style inline qui est prioritaire sur la feuille il se redirigera sur la feuille.

J'avais mal compris ta remarque... Toutes mes confuses... :aie:
19/02/2009, 01h15
dandoo1

Je suis désole de revenir à la charge pour ce post (pourtant pas tout neuf :lol: )

Comme indiqué par :

Citation:

Envoyé par Bovino

Petite précision toutefois :

Code:

display=''

force l'affichage selon la déclaration CSS d'origin et s'il n'y a pas de règle CSS définie, le style par défaut.
En gros, si tu déclares display: none dans ta feuille de style, le display='' reviendra à none.

Alors se pose la question: comment peut-on faire apparaître proprement un TABLE ou un TR qui était caché dans la feuille de style?
Car le

Code:

display='block'

pose problème sous FireFox...
19/02/2009, 06h42
Bovino

Valeurs possibles pour display :
none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
05/02/2010, 17h08
JL NaSh

+1

Citation:

Envoyé par dandoo1

Je suis désole de revenir à la charge pour ce post (pourtant pas tout neuf :lol: )

Comme indiqué par :

Alors se pose la question: comment peut-on faire apparaître proprement un TABLE ou un TR qui était caché dans la feuille de style?
Car le

Code:

display='block'

pose problème sous FireFox...

+1.

Pour moi l'astuce de mettre style.display = ''; marche mais vu les commentaires précédents je crains des régressions...