Problème sous Firefox display none / block

**jeromed** · 14/03/2007, 12h38

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 :

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

**MasterOfChakhaL** · 14/03/2007, 13h32

Salut,

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

Code :

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

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

devient:

Code :

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

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

**cedsun** · 14/03/2007, 20h13

Hello,

Chez moi, ça marche bien sous Firefox...

**deY!** · 15/03/2007, 10h22

A la place de

Code :

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

display='block'

utilise

Code :

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

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.

**habibal** · 20/01/2009, 15h26

merci dey j'aurai j'amais eu l'idée pourtant c'est claire th n'est pas un block

**deY!** · 20/01/2009, 15h37

Ahaha, pas de quoi, mais c'était pas nécessaire de répondre à un post de presque 2 ans

**Bovino** · 20/01/2009, 16h02

Petite précision toutefois :

Code :

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

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.

**deY!** · 20/01/2009, 16h15

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

Code :

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

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 :

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

display:none;

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

**Bovino** · 20/01/2009, 16h22

je parlais de style CSS, pas de style inline.
Inclues le display: none; dans une feuille de style et tu verras la différence.

**deY!** · 20/01/2009, 16h27

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

**dandoo1** · 19/02/2009, 01h15

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

)

Comme indiqué par :

Envoyé par Bovino

Petite précision toutefois :

Code :

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

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 :

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

display='block'

pose problème sous FireFox...

**Bovino** · 19/02/2009, 06h42

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

**JL NaSh** · 05/02/2010, 17h08

Envoyé par dandoo1

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

)

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 :

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