[Résolu] Problème avec Colspan sous Firefox

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écedente.
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 !


Voici le code qui génère les lignes concernées.

					<tr class="<?php echo $sCouleurLigne; ?>">
						<td class="news_id">
							<?php echo $uneNews["news_id"]."\n"; ?>
						</td>
						<td class="news_date">
							<?php echo $uneNews["news_date"]."\n"; ?>
						</td>
						<td class="news_auteur">
							<?php echo $uneNews["news_auteur"]."\n"; ?>
						</td>
						<td class="news_titre">
							<?php echo displayData($uneNews["news_titre"])."\n"; ?>
						</td>
						<td class="news_portee">
							<?php
							if($uneNews["news_destinataire"] == 1)
							{
								//Pour tous
								echo $aLang["news"]["news_portee_publique_court"]."\n";
							}
							else
							{
								//Pour les SW
								echo $aLang["news"]["news_portee_membres_court"]."\n";
							}
							?>
						</td>
						<td class="news_action">
							<?php
							//On affiche les liens
							//Voir la news
							echo "<a href=\"#\" onclick=\"javascript:afficheId('news".$uneNews["news_id"]."')\" class=\"lien_bouton_action\" title=\"".$aLang["news"]["action_voir"]."\" alt=\"".$aLang["news"]["action_voir"]."\"><img src=\"".$sRacineSite.PATH_IMAGES_SITE."voir.png\" /></a> \n";
							//Modification de l'enregistrement
							echo "<a href=\"".$sRacineSite."/pages/news/ajt_news.php?news=".$uneNews["news_id"]."&operation=".$aLang["news"]["action_modifier"]."\" class=\"lien_bouton_action\" title=\"".$aLang["news"]["action_modifier"]."\" alt=\"".$aLang["news"]["action_modifier"]."\"><img src=\"".$sRacineSite.PATH_IMAGES_SITE."modifier.png\" /></a> \n";
							//Suppression de l'enregistrement
							echo "<a href=\"".$sRacineSite."/pages/news/sup_news.php?news=".$uneNews["news_id"]."\" class=\"lien_bouton_action\" title=\"".$aLang["news"]["action_supprimer"]."\" alt=\"".$aLang["news"]["action_supprimer"]."\"><img src=\"".$sRacineSite.PATH_IMAGES_SITE."supprimer.png\" /></a> \n";
							?>
						</td>
					</tr>

					<tr class="<?php echo $sCouleurLigne; ?>" id="news<?php echo $uneNews["news_id"]; ?>">
						<td colspan="6" class="news_contenu">
							<?php echo displayData(nl2br($uneNews["news_contenu"]))."\n"; ?>
						</td>
					</tr>

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.
Modifié par Eagle2000 (30 Aug 2008 - 01:10)

Bonjour,

le code PHP n'est pas très intéressant pour nous contrairement au code HTML et CSS résultant
Est-ce que tu as fait un Ctrl-F5 et vidage de cache? J'ai pour ma part quelques soucis avec Fx3 ces temps-ci ...

Autant pour moi... désolé.
J'ai déjà bien fait Ctrl+F5 ainsi que le vidage du cache... en vain.

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

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

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

En espérant que cela puisse vous donner plus d'informations...

Bonsoir Eagle2000,

Ce code est fonctionnel et produit l'effet attendu sous Firefox également

A noter :

.entete {
	background-color: #5E3C21;
	font-size: 15px;
	font-[#red][b]weight[/b][/#]: bold;
	color: white;
	text-align: center;
	padding: 0px;
}

Une page en ligne peut-être ?
Cdt,
Sylvain

Bonsoir 6l20.

Merci pour ta réponse et la rectification (un stupide copier/coller sans vérifier... )

Pour mon problème, j'ai trouvé une solution tout à l'heure... car ça fonctionnait sur certaines versions et pas sur d'autres.
Pour info, c'est dans la fonction javascript qui affiche/cache les ID que j'ai remplacé un "display='block'" par "display=''".

Merci encore de ton aide.

Bonjour,

Pour information, ton code CSS pourrait être très largement optimisé. Tu crées des classes pour chaque type de cellule de ton tableau, mais les styles pour ses classes sont très similaires. Au lieu d'avoir ceci:

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

Tu pourrais avoir ceci:

#news td {
	border: 1px solid white;
	padding: 1px;
}
.entete_news_auteur {width: 120px;}
.entete_news_titre {width: 250px;}
...

et ainsi de suite.

Toujours penser à utiliser le sélecteur de descendants (c'est l'espace dans #news td) pour optimiser le code CSS.

Bonjour Florent V.

Merci pour cette information.
Je m'y colle tout de suite. Effectivement, c'est même plus clair.

En fait, j'avais fait ça pensant que par la suite, chaque cellule pourrait être modifiée plus facilement, mais d'un autre côté, ma réflexion est stupide... car un tableau, c'est un tableau, et les cellules sont rarement modifiées !