Au final j'ai remplacé mes tableaux par des <p> et des <div> et cela fonctionne sur les deux navigateurs, je laissais le sujet ouvert pour tenter d'avoir la solution malgré tout pour voir si je pouvais comprendre et réparer...

Mais bon en un sens c'est résolu ;)

Merci à tous.

Pas bien possible de faire des discernements car grosse crève... mais sur le principe quand je bute sur ce genre de pb j'essaie de modifier mon html plutôt que d'essayer des formules magiques avec les CSS dont je ne sais pas si le rendu sera ok dans tous les navigateurs.
Et si tu essayais de mettre chaque tableau dans une balise DIV ou un truc dans le genre?

:(
J'ai tenté d'appliquer la propriété CSS display:table à la place de display:block car effectivement cela s'applique à un tableau... (j'ai remplacé dans la fonction javascript...)

Résultat : parfait sous FireFox mais cela ne s'affiche plus du tout sous IE (7)...

une solution proposé cité dans ce forum (je ne sais plus ou !), on peut en faire un derivé pour une table.

applique un span a chaque cellule
dans ton css tu appliques ton hover au span plus la mention display:block;

:D

[quote="d0m"]J'ai le même problème, Firefox gère très mal le fait de cacher des éléments de tableau, que ce soit des cellules ou des lignes entières...[/quote]

Non, le coupable n'est pas Firefox qui gère très bien... L'erreur vient du fait que [b]guilt92[/b] essaye d'appliquer la propriété CSS [b]display:block[/b] à une cellule de tableau. Mauvaise idée :wink:

C'est en train de devenir l'erreur la plus courante en CSS : la balise display est très puissante, et il ne faut pas juste utliser les valeurs block et none (qui sont les plus courantes, certes, mais pas les seules) en espérant que tout marche :s

Et hop, un petit tour par la doc pour bien apprendre : [url]http://www.w3.org/TR/CSS21/visuren.html#display-prop[/url]

J'ai le même problème, Firefox gère très mal le fait de cacher des éléments de tableau, que ce soit des cellules ou des lignes entières...

Bonjour,

je réalise un système simple (je pensais) de petits onglets sous forme de tableaux. Le premier tableau contient un colonne onglet 1 et une colonne onglet 2 et le fait de cliquer sur l'un ou sur l'autre fait apparaitre un autre tableau avec un contenu approprié. Jusqu'ici tout va bien.

Dans mes sous tableaux je veux que lorsque l'on passe la souris sur un item la couleur de fond de ce dernier change (surlignage comme dans un menu).
Tout cela fonctionne très bien sous IE mais sous FireFox tant que je n'ai pas changé de catégorie tout va bien, mais dès que je selectionne une autre catégorie il me redimensionne les tableaux qui ne font plus la taille de la zone (100%) mais au contraire la taille du plus grand élément du tableau, comme si il ne prenait plus en compte le parametre 100%....

Merci d'avance !

Code HTML :

[code]<div id="overall">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="categories1" class="categories_selected" onclick="show_categories(this.id);">Catégorie 1</td>
<td id="categories2" class="categories_unselected" onclick="show_categories(this.id);">Catégorie 2</td>
</tr>
</table>
<table width="100%" class="menu_item_general" cellpadding="0" cellspacing="0" id="contenu1">
<tr>
<td>Item1_1</td>
</tr>
<tr>
<td>Item1_2</td>
</tr>
</table>
<table width="100%" class="menu_item_general" cellpadding="0" cellspacing="0" id="contenu2">
<tr>
<td>Item2_1</td>
</tr>
<tr>
<td>Item2_2</td>
</tr>
</table>
</div>
[/code]

Code CSS

[code]#overall
{
width:335px;
}

.categories_selected
{
color:#FFFFFF;
background-color:#000000;
padding-left:5px;
font-weight:bold;
}

.categories_unselected
{
padding-left:5px;
background-color:#AEAA63;
}



.menu_item_general td
{
background-color:#000000;
font-size:12pt;
color:#FFFFFF;
font-weight:normal;
text-decoration:none;
padding:1px 1px 1px 5px;
width:100%;
}


.menu_item_general td:hover
{
width:100%;
background-color:#AEAA63;
color:#000000;
cursor:pointer;
}
[/code]

Code JAVASCRIPT (au cas ou)
[code]
function show_categories_projets(id)
{
for(i=1;i<3;i++)
{
if(id==''+'categories'+i)
{
document.getElementById(''+id).className = 'categories_projets_selected';
//document.getElementById('contenu'+i).style.visibility = 'collapse';
document.getElementById('contenu'+i).style.display = 'block';
}
else
{
document.getElementById('categories'+i).className = 'categories_projets_unselected';
//document.getElementById('contenu'+i).style.visibility = 'hidden';
document.getElementById('contenu'+i).style.display = 'none';
}
}
}[/code]