Problèmes avec display:inline-block

**NewbiePower** · 29/10/2007, 23h48

Hello,

J'essaie de remettre à jour mon site internet et de le rendre compatible avec la majorité des navigateurs existant. Pour cela, j'essaie de le mettre au norme de la W3.
J'ai essayé de virer les tables et de les remplacer par des "div". Mais je coince un peu sur les "display:inline-block". En fait, ceux ci ne fonctionne que sur "Opera". Il y a t il une autre astuce pour ça faire fonctionner sous FireFox et Internet Explorer?

L'adresse du site en question:
http://www.jeunesseavenir.ch/main/index.php?p=60000

Comment j'aimerais qu'il soit:

Comment la plupart des navigateurs (Firefox2, IE7, Netscape8) me l'affiche:

Le code HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<h3 class="q">Utilitaires :</h3>
<div>
	<h4 class="m"><img class="l" src="downloads/winzip.gif" alt="" name="winzip"></h4>
	<h4 class="n"><a tabindex="100" href="downloads/Winzip10fr.exe">WinZip 10 fran&ccedil;ais</a></h4>
	<h4 class="o">4.07 Mo</h4>
	<h4 class="p">Un utilitaire servant &agrave; compresser des fichiers. Tr&egrave;s simple &agrave; employer.</h4>
</div>
<div>
	<h4 class="m"><img class="l" src="downloads/winrar.gif" alt="" name="winrar"></h4>
	<h4 class="n"><a tabindex="101" href="downloads/wrar362fr.exe">WinRAR 3.62 fran&ccedil;ais</a></h4>
	<h4 class="o">1.07 Mo</h4>
	<h4 class="p">Un autre compresseur de fichiers.</h4>
</div>
<div>
	<h4 class="m"><img class="l" src="downloads/divx.gif" alt="" name="divx"></h4>
	<h4 class="n"><a tabindex="102" href="downloads/DivXInstaller6.5.1.exe">Divx 6.5.1</a></h4>
	<h4 class="o">14.0 Mo</h4>
	<h4 class="p">Un autre pour lire le Divx.</h4>
</div>
etc...

Et le CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
h3.q {padding:0;margin:1em}
h4.m {display:inline-block;border:0.1em solid #CCCCCC;vertical-align:text-bottom;margin:0.05em;width:2.4em;height:2.4em;text-align:center;margin-left:1em}
h4.n {display:inline-block;border:0.1em solid #CCCCCC;vertical-align:text-bottom;margin:0.05em;width:8em;height:2.4em;text-align:center}
h4.o {display:inline-block;border:0.1em solid #CCCCCC;vertical-align:text-bottom;margin:0.05em;width:7em;height:2.4em;text-align:center}
h4.p {display:inline-block;border:0.1em solid #CCCCCC;vertical-align:text-bottom;margin:0.05em;width:45em;height:2.4em}