Bonsoir,

Je suis en train de développer un site :

Sous Firefox les "figure" font correctement leur boulot Cependant, (et comme toujours) sous I.E. le résultat est différent. Etonnant, non ?

Le code des "figure" le voici :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<div id="nav" class="slide">
				<a href="depannage.html" id="sites">
					<figure>
						<figcaption >Depannage</figcaption>
						<img src="img/competences_depannage.png" alt=""/>
					</figure>
				</a>
				<a href="/sites.html" id="sites">
					<figure>
						<figcaption>Cr&eacute;ation Web</figcaption>
						<img src="img/competences_sites.png" alt=""/>
					</figure>
				</a>
				<a href="/formations.html" id="sites">
					<figure>
						<figcaption>Formations</figcaption>
						<img src="img/competences_formations.png" alt=""/>
					</figure>
				</a>
				<a href="/montage_ordinateurs.html" id="sites">
					<figure>
						<figcaption>Montage d'ordinateurs</figcaption>
						<img src="img/competences_montage.png" alt=""/>
					</figure>
				</a>
				<a href="/logiciels.html" id="sites">
					<figure>
						<figcaption>Logiciels</figcaption>
						<img src="img/competences_logiciels.png" alt=""/>
					</figure>
				</a>
				<a href="/conseils.html" id="sites">
					<figure>
						<figcaption>Conseils</figcaption>
						<img src="img/competences_conseils.png" alt=""/>
					</figure>
				</a>
			</nav>

Voici le rendu sous I.E. :



Sous Firefox, le texte apparaît au dessus de l'image (et pas à coté !)

Je vous balance également mon CSS :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
header, nav, footer, figure, section, article, figcaption, aside { /* @note : introducing new HTML5 elements */
	display: block;
	font-family : 'BorisBlackBloxxRegular';
}
header nav {
  float: right;
  margin: 15px 0 0 0;
  font-family: 'BorisBlackBloxxRegular';
}
header nav li {
  margin: 0 4px 0 0;
  display: inline;
}
 
header nav a, header nav a:visited, header nav a:link {
  padding: 4px 12px;
  color: #000;
  font-size: 20px;
  font-weight: bold;
  font-family: 'BorisBlackBloxxRegular', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
}
 
header nav a:hover, header nav a:focus {
  background: #E4E9ED;
  background: rgba(255,255,255,0.3);
  text-decoration: none;
  -moz-border-radius: 10px;
  -wekbit-border-radius: 10px;
  border-radius: 10px;
  -moz-outline-radius: 10px;  /* a11y : on arrondit le focus, si un focus carré pose problème */
  -webkit-outline-radius: 10px;
  outline-radius: 10px;
  outline: none;
}
header nav {
	margin-bottom:30px !important;
	display:none!important
	}
header #logo,header nav {
	float:none!important
	}
	#competences nav a {
	display:block!important;
	font-size:.8em !important;
	border:none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	border-radius: 10px;
	background-color:#abc !important;
	color:#fff !important;
	width:85% !important;
	min-height:30px !important;
	line-height:30px !important;
	margin-bottom:3px !important;
	padding:6px 18px !important
	}
 
	section #competences nav a {
	font-size:.9em !important
	}
 
	#competences nav a img {
	float:left!important;
	height:30px !important
	}
 
	#competences nav a figcaption {
	float:right!important
	}
 
	#competences figcaption {
	color:#fff !important
	}
 
	figcaption,#apropos_home #presentation,#projet #etapes p,#contact label {
	font-size:1.5em !important
	}
Bon j'ai balancé tout le code avec l'id "nav". Cela vous permettra de voir une vue d'ensemble !

Merci !