Bonjour à tous !
Alors voilà, je viens de finir le site web de ma cliente, valide html et css, compatible avec ie7 et 8.
Sauf qu'elle m'a contacté car elle est passée sous ie9. Et boum, une erreur :
www.oec-translation.com
Mes titres ne s'affichent pas, sauf si on clique sur l'icone "problèmes de compatibilité".
Donc je voulais savoir si vous avez déjà eu des cas similaires, si vous avez quelques pistes?
Merci d'avance
un exemple d'un bout de code concerné par ce phénomène :
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 <aside> <div class="aside-tail"> <div class="aside-top"> <div class="aside-bot"> <div class="inner"> <div class="wrapper"> <article class="block-1"> <div class="indent"> <strong>Des besoins</strong> <p>Vous avez besoin d'interprètes, de traducteurs ou de matériel pour mener à bien la traduction de votre conférence ou de vos documents...</p> </div> </article> <article class="block-2"> <div class="indent-1"> <b>Aux solutions</b> <p>Nous sommes là pour vous ! Notre équipe d'interprètes et de traducteurs sera heureuse de réaliser votre projet.</p> </div> </article> </div> </div> </div> </div> </div> <a href="contact.php" id="aside-button">Contact</a> </aside>
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
81
82
83
84
85 aside { position: relative; width: 100%; padding: 0 0 43px 0; } aside .aside-tail { background: url(../images/aside-tail.jpg) repeat-y 0% 0%; } aside .aside-top { background: url(../images/aside-top.jpg) no-repeat 50% 0%; } aside .aside-bot { background: url(../images/aside-bot.jpg) no-repeat 50% 100%; width: 100%; } aside .inner { padding: 39px 0 58px 0; } aside .block-1 { width: 480px; } aside .indent { padding: 0 36px 0 40px; text-align: right; } aside .block-2 { width: 480px; } aside .indent-1 { padding: 0 36px 0 36px; } aside strong { display: block; padding: 0 15px 12px 0; line-height: 1.3em; font-size: 4em; font-weight: 500; color: #fff; } aside b { display: block; padding: 0 0 12px 0; line-height: 1.3em; font-size: 4em; font-weight: 500; color: #fff; } aside p { padding: 0 0 20px 0; line-height: 20px; font-size: 1.25em; color: #fff; } #aside-button { background: url(../images/aside-button.png) no-repeat 0% 0%; display: block; width: 175px; height: 83px; overflow: hidden; line-height: 74px; font-size: 3em; text-align: center; text-decoration: none; color: #fff; position: absolute; left: 393px; bottom: 26px; } #aside-button:hover { color: #fc817a; }
Partager