Display:none et IE

**shaun_the_sheep** · 07/05/2008, 22h16

Bonjour,

j'ai un tableau html classique contenant des données textes. Je masque quelques lignes du bas de ma table pour les afficher si on clique sur un lien.

j'utilise la propriété de style display:none pour masquer mes cellules.

Sous FF mon tableau est correcte. Mes lignes sont correctement masquées.

Sous IE il masque bien mes lignes seulement il reste un espace en bas de mon tableau que je n'explique pas. comme s'il conservait une hauteur.

quelqu'un a une idée pour supprimer cet espace ?

Merci

**clb56** · 07/05/2008, 22h26

Envoyé par beegood

Bonjour,

j'ai un tableau html classique contenant des données textes. Je masque quelques lignes du bas de ma table pour les afficher si on clique sur un lien.

j'utilise la propriété de style display:none pour masquer mes cellules.

Sous FF mon tableau est correcte. Mes lignes sont correctement masquées.

Sous IE il masque bien mes lignes seulement il reste un espace en bas de mon tableau que je n'explique pas. comme s'il conservait une hauteur.

quelqu'un a une idée pour supprimer cet espace ?

Merci

Salut,

si tu pouvais mettre un peu de code, notamment html en exemple ce serait mieux.

**shaun_the_sheep** · 13/05/2008, 08h40

Salut,

Je peux toujours mais pas sur que cela aide:

voici donc une boucle en javascript qui me permet de masquer les parties non visible:

.............

//-> masque les colonnes sur les lignes visibles
for(var i=0;i<nbLigne;i++){ //-> boucle sur nbre de ligne
var cells = lig[i].childNodes;

for(var j=nbCols;j<maxCols;j++){
cells[j].style.display = "none";
}
}

//-> masque l'ensemble du bas de tableau
for(var i=nbLigne;i<lig.length;i++){ //-> boucle sur nbre de ligne
var cells = lig[i].childNodes;

for(var j=0;j<maxCols;j++){
cells[j].style.display = "none";
}
}

..............

rien d'exceptionnel.

J'applique ces classes de styles à mon tableau:

.......

.tab_calendrier{
border:1px solid black;
border-collapse:collapse;
border-spacing: 0px;
margin:auto;
margin-top:2px;
background:#ffffff;
}

.cell_calendrier{
text-align:center;
border:1px solid black;
height:60px;
width:50px;
background : #FFFFFF;
}

.........

Le tableau HTML est quant à lui crée via du code javascript (c'est une sorte de grille de données) que je ne met pas pour pour le moment pour ne pas rendre le post illisible.

Merci de votre aide.

**Er3van** · 13/05/2008, 09h29

Le retour au taf est dur....

Mais c'est peut-être une histoire de line-height.
IE en mets par défaut, si tu mets qqchose comme

Code css :

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

td { line-height : 0 ; }

dans ton css ça devrait régler ton pb s'il vient de là. Par contre j'ai toujours un doute pour savoir si ça doit d'appliquer aux td ou à la table elle-même.

**shaun_the_sheep** · 13/05/2008, 12h14

Cela ne change pas grand chose. cela fait vraiment comme si ie considérait une hauteur par défaut quelque part.

mais je ne vais pas ou.

**shaun_the_sheep** · 16/05/2008, 10h35

Je reviens à la charge avec mon problème. Voici un extrait de code:

Code :

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

1
2
3
4
5
6
7
8
 
<table id='matable' border=0 cellpadding ="0"  cellspacing="0">
<tr><td style='border:1px solid black;margin:auto;' height="100px">1</td><td style='border:1px solid black;margin:auto;'>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td></tr>
<tr><td style='border:1px solid black;margin:auto;' height="100px">1</td><td style='border:1px solid black;margin:auto;'>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td></tr>
<tr><td style='border:1px solid black;margin:auto;display:none' height="100px">10</td><td style='border:1px solid black;margin:auto;display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td></tr>
<tr><td style='border:1px solid black;margin:auto;display:none' height="100px">15</td><td style='border:1px solid black;margin:auto;display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td><td style='display:none'>1</td><td style='display:none'>2</td></tr>
<tr><td style='border:1px solid black;margin:auto;' height="100px">1</td><td style='border:1px solid black;margin:auto;'>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td><td>1</td><td>2</td></tr>
</table>

Je constate que sous FF, mon tableau est bien , mes lignes cachés via display:none le sont bien.

Sous IE par contre, j'ai un espace en lieu et place de mes lignes masquées.

Quelqu'un a une idée ?

Merci

**Candygirl** · 16/05/2008, 10h56

Envoyé par beegood

Quelqu'un a une idée ?

Pourquoi n'appliques-tu pas ton display:none au niveau du tr ? Cela ne change rien, mais c'est quand même plus simple...

En utilisant un border-collapse, on réduit un peu le problème (l'espace disparait mais il reste la double bordure):

Code :

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

table {border-collapse:collapse;}

**Auteur** · 16/05/2008, 14h17

Envoyé par Candygirl

Pourquoi n'appliques-tu pas ton display:none au niveau du tr ? Cela ne change rien, mais c'est quand même plus simple...

+1 applique le display none sur la ligne et non sur les cellules !

Dire que ça ne change rien, je n'en suis pas aussi sûr : avec display="none" les objets sortent du flux de la page. S'il applique cette propriété uniquement sur les cellules (balises td) il ne reste que des tr dans le tableau, ce qui n'est pas conforme au DOM.

**Candygirl** · 16/05/2008, 14h23

Envoyé par Auteur

Dire que ça ne change rien, je n'en suis pas aussi sûr : avec display="none" les objets sortent du flux de la page. S'il applique cette propriété uniquement sur les cellules (balises td) il ne reste que des tr dans le tableau, ce qui n'est pas conforme au DOM.

Effectivement, niveau structurel ça change quelque chose. Par mon "ça ne change rien" je voulais juste parler de son problème d'espacement (j'avais testé et le bug est toujours présent en virant le tr

)

**shaun_the_sheep** · 16/05/2008, 15h01

Merci pour ces infos, je vais tester. Le code mis dans mon post est un extrait simplier de mon appli.

Le fait de mettre la propriété sur la cellule , non sur la ligne vient du fait , que je masque certaines lignes et colonne de ma table pour afficher par la suite certaines cellules du tableaux suivant condidtion.

Merci

**shaun_the_sheep** · 16/05/2008, 15h59

Pour completer mon problème, mon tableau est construit dynamiquement via une boucle en javascript.

Si dans mon code j' inclu des lignes hors boucle avec la propriete display:none, je n'ai pas de problème , je n'ai pas d'espace, à l'inverse de ma boucle.

J'avoue ne pas comprendre

**Auteur** · 16/05/2008, 17h32

Montre nous ton code complet. Sans ça il est difficile de voir où se trouve l'erreur.

**shaun_the_sheep** · 16/05/2008, 17h44

Voila:

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
 
		//corp du tableau  
		contenu=contenu+'<form action="" id="formJury">';
		contenu=contenu+'<table border=0 cellpadding ="0" cellspacing="0" width="100%" id="tblJury" class="tab_calendrier">';
		contenu=contenu+'<tr><td class="cell_calendrier2">Liste des Jurys</td></tr>';
		contenu=contenu+'<tr><td class="cell_calendrier2">&nbsp;</td></tr>';
 
		//remplissage de la liste des jurys
		var compteur=0;
		var id='';
		var style="";
		while(compteur<nbreDeJury)
		{
		  var idJury=data.valueListeJury[(compteur)].fill;
		  var txtJury=data.texteListeJury[(compteur)].fill;
 
		  //mise à jour de la liste
	      if(idJury!='null')
		  { 
	    	  if((compteur+2)>=nbLigne){style="style='display:none;'";}
	    	  //else {style="style='border:1px solid black;'";}
 
		      contenu=contenu+'<tr>';
		      //contenu=contenu+'<td style="border:1px solid black;">x</td>';	
		      contenu=contenu+'<td class="cell_calendrier2" '+style+' id="jJ_'+compteur+'"><input type="hidden" id="lng_'+compteur+'" value="'+idJury+'">'+txtJury+'</td>';
		      contenu=contenu+'</tr>';
		  }
          compteur++;
		}
 
		contenu=contenu+'</table>';
		contenu=contenu+'</form>';
 
		document.getElementById('tableJury').innerHTML=contenu;

**Auteur** · 16/05/2008, 21h38

ouh là

inclure du code javascript en utilisant innerHTML... qui plus est un formulaire.

Utilise les fonctions du DOM pour créer les objets (c'est plus long mais plus efficace) :
pour tout type d'éléments (table, form, input, etc)
- createElement()
- appendChild()
et pour le tableau, après avoir créé la balise table (tr, td) :
- insertRow()
- insertCell()

**shaun_the_sheep** · 19/05/2008, 11h18

Salut,

Quand j'ai commencé à ecrire cette partie , je n'ai pas très familier avec le DOM. Depuis , j'ai effectivement exploré cette voie pour d'autre partie.

Pour le moment ce code restra comme cela avant que je ne le ré-ecrive

Merci

Display:none et IE

CSS

Discussions similaires

Partager

Partager