IE affiche quand même des interlignes des éléments cachés

[josiasseb]

Bonjour,

J'ai une question, concernant l'affichage des lignes inter-TR d'un tableau caché que IE affiche quand même malgré les display:none et/ou visibility:hidden.

Les éléments contenus dans les lignes cachés ne sont affichés que lors des clics.

Mais malgré le display:none et le visibility:hidden, IE affiche les interlignes lorsque les blocks TR sont masqués.

Comment masquer aussi ces interlignes ?

Tout est bien caché avec tous les navigateurs, excepté IE qui affiche des lignes inter-TR:

http://bioinfo.unil.ch/download/capture1.png (Rendu avec IE)

http://bioinfo.unil.ch/download/capture2.png (Rendu normal, avec Firefox)

La page est disponible ici.

Merci

[wawa]

Salut,

tu peux rajouter les attributs cellspacing et cellpadding à l'élément table de cette manière :

<table summary="query builder" cellpadding="0" cellspacing="0">

ou ajouter une classe dans la table de cette manière :

<table summary="query builder" class="monTableau">

et dans le css :

table.monTableau td {
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
}

Voilà

[steph29]

supprime le visibility:hidden

IE reserve la place adequate pour le "futur" affichage, d'ou le decalage...

utilise uniquement le display:none

pour plus d'info:

http://www.google.fr/search?num=50&hl=...den&spell=1

[josiasseb]

Aucun changement en virant visibility:hidden !

**EDIT Administrateur (TheRec)** Inutile de citer le message précédent en entier lorsqu'il figure juste au-dessus. J'ai édité votre message dans ce sens. Merci de votre compréhension.

[josiasseb]

Salut,

tu peux rajouter les attributs cellspacing et cellpadding à l'élément table de cette manière :

<table summary="query builder" cellpadding="0" cellspacing="0">

ou ajouter une classe dans la table de cette manière :

<table summary="query builder" class="monTableau">

et dans le css :

table.monTableau td {
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
}

Voilà

Effectivement, avec ça j'ai le même rendu avec tous les navigateurs mais je n'ai plus la tableau type tableur !

Alors comment concilier les deux choses ?

[josiasseb]

Salut,

tu peux rajouter les attributs cellspacing et cellpadding à l'élément table de cette manière :

<table summary="query builder" cellpadding="0" cellspacing="0">

ou ajouter une classe dans la table de cette manière :

<table summary="query builder" class="monTableau">

et dans le css :

table.monTableau td {
  padding: 0px;
  border-spacing: 0px;
  border-collapse: collapse;
}

Voilà

En mettant

<table cellspacing='0' style='border-spacing: 2px;'>

J'ai toujours le bon rendu partout, sauf sous IE où cette fois les interlignes sont effacées.

C'est moins pire qu'avant mais je désespère d'obtenir le même rendu sous tous les navigateurs.

J'ai essayé border-collapse: separate; mais IE n'ajoute pas d'interlignes pour autant.

[Alonnka]

Salut,

Si dans la source de ta page tu modifies :

<style type="text/css">
td {
white-space: nowrap;
background-color:#B0C4DE;
}
th {
background-color:#483D8B;
color:#FFFFFF;
}
</style>

En :

<style type="text/css">
table {
border-collapse:collapse;
}
td {
white-space: nowrap;
background-color:#B0C4DE;
border-style:solid;
border-width:2px;
border-color:#FFFFFF;
}
th {
background-color:#483D8B;
color:#FFFFFF;
}
</style>

Le résultat te parait-il bon ?

Note que sous Firefox ça pose des petits soucis sur certaine cellule mais je pense que c'est plus du au code HTML qu'a l'interprétation CSS.

[josiasseb]

Les petits problèmes sous Firefox sont plus problématiques pour moi car la page sera majoritairement consultée sous Firefox (C'est une page Intranet et je "oriente" fortement les utilisateurs pour abandonner IE. Mais certains résistent).

Pour l'instant j'ai supprimé les interlignes sous IE mais en perdant le formatage type tableur.

[Alonnka]

Il semble que le souci sous Firefox c'est les cellules vides mais comme elle sont, apparemment, toujours vide il te suffis de leur donner une couleur de fond blanche.