Forum d'entraide PHPFrance

Bonjour à tous.

Encore un problème dont je ne trouve pas la solution...
Je gère un système simple de news dont la gestion se fait par un tableau.
Pour afficher des détails rapidement, j'ai un script javascript d'affichage/masquage de l'ID d'une ligne contenant les détails de la news qui s'exécute au click sur un bouton, et qui fait la largeur des 6 cellules de la ligne précédente.
Sous IE, tout est parfait, par contre, sous Firefox, ma seconde ligne fait la largeur de la première cellule et non des 6... comme le montre la capture suivante !

Donc voici le code HTML résultant pour l'entete et les premières lignes du tableau (les autres étant sur le même modèle) :

Code : Tout sélectionner

				<table id="news">
					<tr class="entete">
						<td class="entete_news_id">
							#Id
						</td>
						<td class="entete_news_date">

							Date
						</td>
						<td class="entete_news_auteur">
							Auteur
						</td>
						<td class="entete_news_titre">
							Titre
						</td>
						<td class="entete_news_portee">
							Portée
						</td>

						<td class="entete_news_action">
							Actions
						</td>
					</tr>

					
					<tr class="ligne1">
						<td class="news_id">
							8
						</td>
						<td class="news_date">

							2008-08-26 16:50:03
						</td>
						<td class="news_auteur">
							admin
						</td>
						<td class="news_titre">
							les n°1 c'est nous !
						</td>
						<td class="news_portee">
							Tous
						</td>

						<td class="news_action">
							<a href="#" onclick="javascript:afficheId('news8')" class="lien_bouton_action" title="Voir la news" alt="Voir la news"><img src="../../themes/classic/images/voir.png" /></a> 
<a href="../../pages/news/ajt_news.php?news=8&operation=Modifier la news" class="lien_bouton_action" title="Modifier la news" alt="Modifier la news"><img src="../../themes/classic/images/modifier.png" /></a> 
<a href="../../pages/news/sup_news.php?news=8" class="lien_bouton_action" title="Supprimer la news" alt="Supprimer la news"><img src="../../themes/classic/images/supprimer.png" /></a> 
						</td>
					</tr>

					<tr class="ligne1" id="news8">
						<td colspan="6" class="news_contenu">
							dsfljdsqmf <br />

dflmkj mj <br />
Test UTF-8<br />
A la pêche cet été nous en avons eu pour plusieurs euros.. (€ à é è ë ô)
						</td>
					</tr>

Pour le CSS, dont je ne suis pas un spécialiste...

, c'est principalement de la colorisation.
Voici le code du fichier css :

Code : Tout sélectionner

div#les_news {
	margin: auto;
	margin-top: 10px;
	margin-bottom: 20px;
	width: 900px;
	text-align: center;
}


div#barre_boutons_news {
	margin: auto;
	margin-right: 50px;
	margin-top: 10px;
	margin-bottom: 15px;
	font-size: 14px;
	text-align: right;
}


div#tableau_news {
	clear: both;
	margin: auto;
	margin-bottom: 10px;
	padding: 0;
	text-align: center;
}


.ligne1 {
	background-color: #B88C5B;
	font-size: 12px;
}

.ligne2 {
	background-color: #8D6237;
	font-size: 12px;
}


/* Entetes */
.entete {
	background-color: #5E3C21;
	font-size: 15px;
	font-style: bold;
	color: white;
	text-align: center;
	padding: 0px;
}

.entete_news_id {
	width: 30px;
	border: 1px solid #ffffff;
	padding: 1px;
}

.entete_news_date {
	width: 130px;
	border: 1px solid #ffffff;
	padding: 1px;
}

.entete_news_auteur {
	width: 120px;
	border: 1px solid #ffffff;
	padding: 1px;
}

.entete_news_titre {
	width: 250px;
	border: 1px solid #ffffff;
	padding: 1px;
}

.entete_news_portee {
	width: 120px;
	border: 1px solid #ffffff;
	padding: 1px;
}

.entete_news_action {
	width: 100px;
	border: 1px solid #ffffff;
	padding: 1px;
}


/* Contenu */
.news_id {
	width: 30px;
	border: 0px solid #ffffff;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.news_date {
	width: 130px;
	border: 0px solid #ffffff;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.news_auteur {
	width: 120px;
	border: 0px solid #ffffff;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.news_titre {
	width: 250px;
	border: 0px solid #ffffff;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

.news_portee {
	width: 120px;
	border: 0px solid #ffffff;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

.news_contenu {
	width: 100%;
	border: 0px solid #ffffff;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}

.news_action {
	width: 100px;
	border: 0px solid #ffffff;
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}

Auriez-vous une idée de ce qui ne va pas ?
Je commence à ne plus avoir de cheveux...

Merci d'avance pour votre aide.
Cordialement.

Par défaut les détails sont affichés ? Sinon comment sont ils masqués ? Aussi fait voir la fonction afficheId() mais de base je vois rien de suspect...

A noter que si je copie colle ton code dans une page cela fonctionne sous IE et sous FF, avec les détails affichés dès le début...

Bonjour,

Ton code marche très bien sous Firefox 3.0.1, je viens de le tester...
Upload ta page quelque part et donne nous l'url car là je vois pas de soucis.

Désolé pour la réponse tardive...

Bon donc, pour compléter la chose.
J'ai retesté de nouveau (de chez moi et d'ailleurs, en vidant le cache...), et le problème est identique !

Au chargement de la page, je cache tous les détails à l'aide de la fonction javascript suivante :

Code : Tout sélectionner

function cacheId(baliseId)
{
  if (document.getElementById && document.getElementById(baliseId) !=  null)
  {
    document.getElementById(baliseId).style.visibility='hidden';
    document.getElementById(baliseId).style.display='none';
  }
}

Et pour les réafficher en cliquant sur la loupe..., j'utilise la fonction javascript suivante :

Code : Tout sélectionner

var idDivAffichee=null;

function afficheId(baliseId)
{
  if (idDivAffichee)
  {
    cacheId(baliseId);
  }
   if (idDivAffichee)
    cacheId(idDivAffichee);
  
  if (idDivAffichee==baliseId)
   {
      var show=false;
      idDivAffichee=null;
   }
    else
    {
      var show=true;
      idDivAffichee=baliseId;
    }
  

  if (show && document.getElementById && document.getElementById(baliseId) != null)
  {
     document.getElementById(baliseId).style.visibility='visible';
     document.getElementById(baliseId).style.display='block';
	 
  }
}

Pour la page de test... elle se trouve [url=http://gest_news_test.php]ici[/url]
Par contre, le site est en phase de test bien avancé..., j'ai supprimé la gestion des droits car cette page fait partie de la zone admin avec login/pwd, et ça aurait été embêtant.

Sinon, au passage, vu que c'est aussi le même forum... est-ce que quelqu'un aurait une idée sur le fait que mon tableau n'est pas centré, alors que le CSS le centre (normalement), et que sous IE, je n'ai pas de problème aussi... ?
(C'est le fichier CSS dans le premier post).

Voilà.
Merci à vous pour votre aide.

Tu dois remplacer le code :

Code : Tout sélectionner

document.getElementById(baliseId).style.display='block';

Par :

Code : Tout sélectionner

document.getElementById(baliseId).style.display='';

Pour éviter de spécifier un mode d'affichage et ainsi activer l'affichage en évitant la valeur 'None'. Car apparemment la valeur 'block' ou 'inline' réinitialise l'état d'origine de la cellule.

Sadeq... tu es génial !
Merci, merci...

(les autres aussi... mais c'est Sadeq qui a donné la solution

).

Par contre, le problème de centrage du tableau avec CSS... quelqu'un sait pourquoi ça ne fonctionne pas ?

Merci encore.

Pour center un tableau avec FF il ne faut pas mettre

Code : Tout sélectionner

text-align : center;

mais

Code : Tout sélectionner

margin-left: auto;
margin-right: auto;

Et ben... rapidité et efficacité ! =D>
Merci à vous tous !

Tout est fonctionnel maintenant.

Pour center un tableau avec FF il ne faut pas mettre

Code : Tout sélectionner
text-align : center;
mais

Code : Tout sélectionner
margin-left: auto; margin-right: auto;

C'est aussi valable pour IE à partir de la version 6 (sauf en cas de "doctype switching" le faisant basculer en mode Quirks).

Forum d'entraide PHPFrance

Problème avec Colspan sous Firefox

Problème avec Colspan sous Firefox