Display:none et IE

Version imprimable

07/05/2008, 22h16
shaun_the_sheep

Display:none et IE

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
07/05/2008, 22h26
clb56

Citation:

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.
13/05/2008, 08h40
shaun_the_sheep

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:

Citation:

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

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

Citation:

.......

.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.
13/05/2008, 09h29
Er3van

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:

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.
13/05/2008, 12h14
shaun_the_sheep

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.

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

Code:

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

16/05/2008, 10h56
Candygirl

Citation:

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:

table {border-collapse:collapse;}
16/05/2008, 14h17
Auteur

Citation:

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.
16/05/2008, 14h23
Candygirl

Citation:

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 :( )
16/05/2008, 15h01
shaun_the_sheep

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
16/05/2008, 15h59
shaun_the_sheep

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
16/05/2008, 17h32
Auteur

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

Voila:

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

16/05/2008, 21h38
Auteur

ouh là :roll: 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()
19/05/2008, 11h18
shaun_the_sheep

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