Problèmes avec display:inline-block
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:
http://www.jeunesseavenir.ch/main/opera.jpg
Comment la plupart des navigateurs (Firefox2, IE7, Netscape8) me l'affiche:
http://www.jeunesseavenir.ch/main/firefox.jpg
Le code HTML:
Code:
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çais</a></h4>
<h4 class="o">4.07 Mo</h4>
<h4 class="p">Un utilitaire servant à compresser des fichiers. Très simple à 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ç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:
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} |
Voila, si quelqu'un a une autre solution que les tables...
:lol:
Christian
