Tableau en css : ff = OK, IE = KO comment corriger ?

[Invité]

Voici un exercice de style d'un tableau converti en div dont la source originel est le tableau comparatif de cette page.

L'html:

Code : Tout sélectionner

<div class="compar">
<div class="hs"><div>&nbsp;</div><div>Scanneur</div><div>Protection permanente</div><div>Prix</div><div>Editeur</div><div class="l">Outils inclus (hors analyse et résident)</div></div>

<div class="li"><div class="log">Ad-Aware SE Personal</div><div class="scan">Oui</div><div class="prot">Oui (payant)</div><div class="prix">Gratuit ou payant</div><div class="lien"><a href="http://www.lavasoftusa.com/software/adaware/" target="_blank">Lavasoft</a></div><div class="pas-outils">Aucun</div></div>

<div class="lp"><div class="log">Spybot Search&Destroy</div><div class="scan">Oui</div><div class="prot">Oui</div><div class="prix">Gratuit</div><div class="lien"><a href="http://www.safer-networking.org" target="_blank">Safer Networking</a></div><div class="outils"><ul><li>Suivi des modifications IE</li><li>Incohérences du registre</li><li>Démarrage système</li><li>Effaceur de sécurité</div></div>

<div class="li"><div class="log">SpySweeper</div><div class="scan">Oui</div><div class="prot">Oui</div><div class="prix">29,95€</div><div class="lien"><a href="http://www.webroot.com/fr/index.php" target="_blank">Webroot Software</a></div><div class="outils"><ul><li>Suivi des démarrages automatiques</li><li>Suivi des modifications IE</li><li>Suivi des fichiers hôtes</li><li>Protection service Windows Messenger</li></ul></div></div>

<div class="lp"><div class="log">Effaceur Expert 8</div><div class="scan">Oui</div><div class="prot">Oui</div><div class="prix">29,95€</div><div class="lien"><a href="http://www.microapp.com" target="_blank">Micro Application</a></div><div class="outils"><ul><li>Suivi des démarrages automatiques</li><li>Effacement des traces (Internet, applications, Windows)</li><li>Effacement définitif</li><li>Popup blocker</li><li>Défragmenteur mémoire</li></ul></div></div>

<div class="li"><div class="log">Pest Patrol</div><div class="scan">Oui</div><div class="prot">Oui</div><div class="prix">39,95€</div><div class="lien"><a href="http://www.pestpatrol.com/" target="_blank">Computer Associates</a></div><div class="pas-outils">aucun</div></div>

<div class="lp"><div class="log">Microsoft Antispyware</div><div class="scan">Oui</div><div class="prot">Oui</div><div class="prix">Gratuit</div><div class="lien"><a href="http://www.microsoft.com/athome/security/spyware/software/default.mspx" target="_blank">Microsoft</a></div><div class="outils"><ul><li>Suivi des démarrages automatiques</li><li>Suivi des fichiers hôtes</li><li>Suivi des modifications IE</li><li>Effacement des traces (Internet, applications, Windows)</li><li>Restauration IE</li></ul></div></div>

<div class="li"><div class="log">McAfee Antispyware</div><div class="scan">Oui</div><div class="prot">Oui</div><div class="prix">29,99$</div><div class="lien"><a href="http://fr.mcafee.com/" target="_blank">McAfee</a></div><div class="pas-outils">aucun</div></div>
</div>

avec comme style :

Code : Tout sélectionner

.compar {
	margin-left: auto;
	margin-right: auto;
	display : table;
	border-width: 1px 0px 0px 1px;
	border-style: solid;
	border-color; black;
	font-size: 11px;
}
.compar .hs{ display: table-row; }
.compar .hs div{
	display: table-cell;
	font-weight: bold;
	border-style: solid;
	border-color: rgb(0, 0, 0);
	background-color: rgb(201, 234, 251);
	border-width: 0px 1px 1px 0px;
	text-align: center;
	vertical-align: middle;
	padding: 2px;
}
.compar .li, .lp { display: table-row; }
.compar .li div{
	display: table-cell;
	border-style: solid;
	border-color: rgb(0, 0, 0);
	border-width: 0px 1px 1px 0px;
	vertical-align: middle;
	padding: 2px;
}
.compar .lp div{
	display: table-cell;
	border-style: solid;
	background-color: rgb(204, 204, 204);
	border-color: rgb(0, 0, 0);
	border-width: 0px 1px 1px 0px;
	vertical-align: middle;
	padding: 2px;
}
.compar .scan, .prot, .prix, .lien, .pas-outils { text-align: center; }
.compar .outils ul{ margin: 0px;}
a { text-decoration: none; }
a:hover { text-decoration: underline; }

Les questions sont :

• * Est-il possible de faire mieux sans utiliser de table ?
  * Comment aménager ce code ou son amélioration et/ou le style pour que ie 6 l'affiche à l'identique ?

PS je ne suis absolument pas lié au site sus-mentionné.

[calimo]

Réponse rapide : il ne faut pas vouloir "faire comme avec les tableaux", c'est totalement inutile et contre-productif. À la place, utilise les balises sémantiques du HTML (p, h1, h2...h6, ul, li etc.), puis mets tout ça en page avec CSS, ça viendra naturellement

Edition : je viens de comprendre de quel tableau tu parlais.
Pourquoi vouloir le remplacer par des div dans ce cas ? Il a tout son sens ici... il n'est pas là dans le but de faire de la mise en page, il est là pour présenter des données. Je te conseille de lire l'article d'accès pour tous sur les tableaux pour savoir comment on fait un vrai tableau

Edit2 : pour ta question, IE ne connait pas display:table et laisse donc les divs en simples blocs. Mais ça n'a aucun intérêt de remplacer des table par des div si c'est pour faire un tableau

[EmmaZL]

Pourquoi vouloir le remplacer par des div dans ce cas ?

Bah... l'învité il dit que c'est un "exercice de style", c'est peut-être juste pour le sport... pour l'art, quoi !!