[Résolu] Mauvais rendu d'un tableau CSS sous IE

Bonjour à tous,
J'avais toujours trouvé les réponses à mes interrogations jusqu'à présent en me baladant sur le site ou le forum, mais cette fois ci je suis vraiment désespéré! Je fais donc appel à vos connaissances en CSS, en espérant que vous pourrez m'aider.

Mon problème:
Je voudrais faire un tableau de deux colonnes en CSS sans passer par des <table>, je vous met ci-dessous le code html et css de la partie qui me pose problème, chaque <div> faisant office de ligne et chaque <a> de cellule :

<div>
    <a href="lien">
        <img src="images/1.gif" width="75" height="75" alt="" title="" />
	<span>Artiste</span>
	<span>Album</span>
    </a>
   <a href="lien">
        <img src="images/2.gif" width="75" height="75" alt="" title="" />
	<span>Artiste</span>
	<span>Album</span>
    </a>
</div>

<div>
    <a href="lien">
        <img src="images/3.gif" width="75" height="75" alt="" title="" />
	<span>Artiste</span>
	<span>Album</span>
    </a>
   <a href="lien">
        <img src="images/4.gif" width="75" height="75" alt="" title="" />
	<span>Artiste</span>
	<span>Album</span>
    </a>
</div>

etc etc etc...

div {
	width: 100%;
	display: table;
	text-align: left
}

a {
	width: 50%;
	display: table-cell;
         padding: 5px
}

span {
	display: block
}

a:hover {
	background-color: #222;
}

a img {
	margin-right: 10px;
	border: 5px solid #333;
	float: left
}

Le résultat est parfait sous Firefox et Opera, mais comme vous vous en doutez pas sous IE (vu qu'il ne connait pas les display:table). Je me suis arraché les cheveux pour trouver un moyen d'obtenir le même rendu sous IE, mais je n'ai pas trouvé (sachant que je veux garder les balises <a> pour pourvoir faire un effet lors d'un rollover sur chaque cellule sous IE).

J'éspère que vous aurez compris ce qui me chagrine.
Si vous avez une solution à mon problème, je vous remercie grandement d'avance.
Modifié par Sly (15 Dec 2006 - 21:31)

Bonjour,

Au vu de ton besoin il me semble dommage de se priver de l'élément <table>, il n'est pas déplacé dans ton contexte et offre l'avantage d'être reconnu de tous les navigateurs.
Sinon, tu peux passer par un design spécifique selon les navigateurs : display-table pour les uns, et inline-block pour les autres (IE) (en fait IE applique les caractéristiques inline-block sur un élément inline ayant la propriété Haslayout). Mais ce n'est pas le plus simple.

Xavier a écrit :

Sinon, tu peux passer par un design spécifique selon les navigateurs : display-table pour les uns, et inline-block pour les autres (IE) (en fait IE applique les caractéristiques inline-block sur un élément inline ayant la propriété Haslayout). Mais ce n'est pas le plus simple.

Je n'avais pas connaissance de cette caractéristique Haslayout sous IE dans ce cas précis. Du coup j'ai suivi ton conseil, j'ai essayé d'appliquer le inline-block sur les balises <a> et ca marche comme je voulais sous IE (j'éspère que ca ira aussi pour la version 7 que je ne peux pas installer pour le moment) !
J'ai laissé le display: table-cell dans un hack pour Mozilla et Opera et l'affaire est dans le sac!
Et cela sans passer par des <table>, ce qui me réjouit.

Merci Xavier pour ton aide fortement appréciée.