Discussion :

[googlemania]

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 !

[Bovino]

C'est probablement dû au fait que IE ne reconnait pas le HTML5, donc tes tags figure et figcaption ne sont pas interprétés.

[googlemania]

Si justement j'ai repris un exemple de site qui utilise <figure> et qui fonctionne correctement en html5 et sur ma version de I.E.

[Bovino]

Si justement j'ai repris un exemple de site qui utilise <figure> et qui fonctionne correctement en html5 et sur ma version de I.E.

Mouais... pas trouvé en tout cas : http://msdn.microsoft.com/en-us/libr...(v=VS.85).aspx

Tu es sûr que ce n'est pas un site qui utilise le HTML5 et qui en émule le comportement pour IE ?

[Macmillenium]

En fait, le problème vient du fait qu'IE n'applique pas de styles sur les éléments qui lui sont inconnus (tous les éléments HTML 5), la règle suivante n'est donc pas appliquée:

Code css :

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

1
2
3
4
5
 
header, nav, footer, figure, section, article, figcaption, aside { /* @note : introducing new HTML5 elements */
	display: block;
	font-family : 'BorisBlackBloxxRegular';
}

Pour corriger cela, il faudrait créer ces éléments à l'aide de la méthode createElement() pour IE http://remysharp.com/2009/01/07/html5-enabling-script/

[googlemania]

Oui il s'agit bien d'un site ne HTML 5. Ok On va attendre qu'IE se mette à la page ... Retour sous Firefox, Safari et Chrome ....