Problème avec les figcaption sous IE
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:
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é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. :
http://img835.imageshack.us/img835/1573/menuw.png
Sous Firefox, le texte apparaît au dessus de l'image (et pas à coté !)
Je vous balance également mon CSS :
Code:
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 !
