[Résolu] Mise en forme de table généré par de l'asp.net

Bonjour,

Je sais que je vais me faire frapper rien qu'en écrivant "table" et "asp.net", mais là j'ai vraiment besoin de votre aide.
Je "travaille" sur un forum (que je ne peux pas modifier au niveau du code) et j'ai découvert que l'affichage du tableau généré par de l'asp .net était différent selon les navigateurs... Voyez vous même:

Sous firefox ca donne ça

Sous IE ça donne ça

Sous Opéra ca donne ça

Je vous met des images, vu que ce forum n'est pas en ligne...

Bref, comme vous pourrez le remarquer, il y a des "lignes" qui apparaissent ou non (et de différentes facons) selon les navigateurs.
Ces styles ne sont pas définis dans la css et encore moins dans le code.
Je me suis dis que l'on devait pouvoir spécifier ce style en css... mais... Comment? Telle est ma question!

Si quelqu'un pouvait m'aider ca serait super gentil!

Merci d'avance!
Modifié par hellgy (18 Jul 2005 - 10:19)

hellgy a écrit :
Bonjour,

Je sais que je vais me faire frapper rien qu'en écrivant "table" et "asp.net"

Bah... non

Ce n'est pas parce que tu as besoin d'utiliser un tableau manifestement adapté à ton contenu, ou parce qu'il est difficile de générer un code bien maîtrisé (et valide) avec le framework .Net que ça donne une raison de te tomber dessus

hellgy a écrit :

Je "travaille" sur un forum (que je ne peux pas modifier au niveau du code) et j'ai découvert que l'affichage du tableau généré par de l'asp .net était différent selon les navigateurs... Voyez vous même:

asp.net différencie le code qu'il produit selon les navigateurs, pour des raisons théoriques de compatibilité. Problème : la discrimination se fait sur la base d'identificateurs périmés, et se révèle généralement injustifiée.

hellgy a écrit :
Bref, comme vous pourrez le remarquer, il y a des "lignes" qui apparaissent ou non (et de différentes facons) selon les navigateurs.
Ces styles ne sont pas définis dans la css et encore moins dans le code.
Je me suis dis que l'on devait pouvoir spécifier ce style en css... mais... Comment? Telle est ma question!

Pas de certitude sans avoir le code sous les yeux, mais il devrait être possible de forcer le style du tableau de manière classique, au moins pour les bordures ( Voir http://www.openweb.eu.org/articles/tableaux_css/ )

Sinon, je pose la question par acquis de conscience : as-tu vérifié sur http://msdn2.microsoft.com/library/bs302eat(en-us, vs.80).aspx ce que tu pouvais faire à la source ?

Merci,
je vais voir ce que je peux faire avec tout ca,
je passe le topic en Resolu dès que ca marche,
si ca marche pas, je reviens pleurer un peu ici

rooh, la honttteuuuh
un simple

th, td, tr{
	border:0;
}

A fait disparaitre mon problème sous Opéra, mais Firefox ne semble pas aussi coopératif...

Pistes :
- ajouter une règle !important: border:0 !important;
- augmenter le poids des sélecteurs: table tr th, table tr td, table tr
- vérifier l'utilisation de border-collapse: collapse;

Si tu ne trouves pas, reproduit ici un exemple du code HTML du tableau, que l'on puisse voir précisément le problème...

Coté Html ca ressemble à ca:

<table class="forum" cellspacing="0" cellpadding="0" rules="all" border="0" id="dotForumDisplay" width="100%">
	<tr>
		<td class="listheader" width="46%">
			  Titre(s)
		</td>
		<td class="listheader" width="14%">
          <center>Sujet(s)</center>
		</td>
		<td class="listheader" width="16%">
          <center>Message(s)</center>
		</td>
		<td class="listheader" width="8%">
          <center>Lu(s)</center>
		</td>
		<td class="listheader" align="Center" width="22%">
          <center>Dernier(s) message(s)</center>
		</td>
	</tr>
	<tr class="bglight">
		<td class="listColumnText">
			Texte		
		</td>
		<td class="listColumnNumber">
			3
		</td>
		<td class="listColumnNumber">
			2
		</td>
		<td class="listColumnNumber">
			266
		</td>
		<td class="listColumnText" align="Center">
			1-06-2005 05:12 <br />
			BERNARD
		</td>
	</tr>
</table>

Coté css:

table, .forum, th, td, tr{
	!important: border:0 !important;
}
.listheader { padding: 0.4em; font-weight: bold; color: #ffffff; background-color: #B2D66A; }
.listColumnText { padding: 0.8em; vertical-align: top; border-bottom: 1px solid #B2D66A; font-size: 10px; }
.listColumnNumber { padding: 0.8em; vertical-align: top; text-align: center; border-bottom: 1px solid #B2D66A; font-size: 10px; }
tr.bglight { background-color: #FCFDF5; }
tr.bgdark { background-color: #F0FCD8; }

Et ca coince encore sous firefox
De plus, l'ajout des regles !important fait que les saletés de lignes reviennent sous Opéra :'(
Modifié par hellgy (18 Jul 2005 - 09:53)

argh !

désolé, mon message ci-dessus aurait dû mieux baliser le code CSS

Ce n'est pas :

table, .forum, th, td, tr{
!important: border:0 !important;
}

C'est:

table, .forum, th, td, tr{
border:0 !important;
}

Mais en fait, le !important ne suffit pas à annuler l'effet de l'atribut rules="all" de l'élément table : c'est lui qui force FireFox à créer ces bordures.

Je vais voir ce que qu'on peut trouver... A moins quelqu'un n'ait une idée ?

Voilà qui devrait faire l'affaire :

table, .forum, th, td, tr{
[b]border:hidden;[/b]
}
.listheader { padding: 0.4em; font-weight: bold; color: #ffffff; 
background-color: #B2D66A; }
.listColumnText { padding: 0.8em; vertical-align: top;font-size: 10px; }
.listColumnNumber { padding: 0.8em; vertical-align: top; text-
align: center;font-size: 
10px; }
tr.bglight { background-color: #FCFDF5; }
tr.bgdark { background-color: #F0FCD8; } 

(Au passage, virer les border:... dans les classes .list... simplifie les choses)

(<edit>Pour la petite histoire, c'est un cas de conflit de bordures http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution , d'où l'utilisation du "hidden")
Modifié par Laurent Denis (18 Jul 2005 - 10:07)

Aheum, je connaissait même pas la valeur hidden pour les border, j'aurais au moins appris un truc durant ce stage! Merci

Comme je desirais garder les border dans les .listTrucs, j'ai modifié la css comme ca:

table, .forum, th, td, tr{
	border-left:hidden;
	border-right:hidden;
	border-top: 0;
}
.listheader { 
padding: 0.4em; 
font-weight: bold; 
color: #ffffff; 
background-color: #B2D66A;
[b]border-bottom:hidden;[/b]
}

Et ca marche nickel!

Merci beaucoup tout plein! \o/
Modifié par hellgy (18 Jul 2005 - 10:19)