Discussion :

[Daddy91]

Bonjour à toutes et à tous !

J’ai réalisé mon site web, en alliant PHP et CSS.
J’ai préféré utiliser la méthode des <div> à celle des tableaux.

J’ai vérifié mon site avec FireFox, Internet Explorer (version 6 & 7), Netscape, Safari (pour Windows), et Opéra.

Avec FireFox j’ai exactement le rendu que je désirais.
Safari ainsi que Netscape, ont un rendu quasiment identique à celui de FireFox donc je suis très satisfait.
Puis…
Puis j’essaie avec Opéra, et là c’est le drame. Mais ce n’est pas trop grave, car Opéra n’est pas le navigateur le plus répandu du net (heureusement pour moi). Je considère que ce n’est pas grave à partir du moment où tous les autres navigateurs affichent le site normalement (quoi que je n’ai pas testé sous Linux).
Mais évidement Internet Explorer, joue des siennes ! La police affichée n’est pas du tout identique à celle affiché par Safari/FireFox/Netscape. Et là ça me pose un énorme problème !

Auriez-vous une idée ?

Voici le code 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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 body
{
text-align: justify;
font-family: "Century Gothic", Verdana, Arial, serif; /* On essaie d'avoir Century Gothic en priorité, à défaut on obtiendra Verdane et ainsi de suite. Serif est une police présente sur TOUS les ordinateurs */
font-weight: 600;
font-size : 12px;
}
 
h1
{
font-size : 1.5em;
color : #CE9A44;
font-family: "Century Gothic", Verdana, Arial, serif; /* On essaie d'avoir Century Gothic en priorité, à défaut on obtiendra Verdane et ainsi de suite. Serif est une police présente sur TOUS les ordinateurs */
padding-left: 30px;
}
 
h2
{
font-size : 1.3em;
color : #CE9A44;
padding-left : 15px;
}
 
h3
{
font-size : 1.1em;
color : #CE9A44;
padding-left : 5px;
}
 
div#conteneur
{
margin : auto;
width : 900px;
height : 700px;
}
 
div#header
{
height : 150px;
width : 900px;
background-image : url("images/header.jpg");
}
 
div#actu
{
height : 525px;
width : 160px;
float : left;
border-right-color : #CE9A44;
border-right-width : thin;
background-image: url("images/fond_menu.png");
}
 
div#image
{
height:50px;
width:100%;
}
 
div#comm
{
height : 363px;
width : 100%;
}
 
div#bourse
{
height : 112px;
width : 100%;
}
 
div#corps
{
height : 525px;
width : 740px;
}
 
div#menu
{
height: 75px;
width: 740px;
}
 
div#page
{
height: 420px;
width: 680px;
padding-top: 30px;
background-image: url("images/esquise-index_07.jpg");
background-repeat: no-repeat;
background-attachment : fixed;
background: #FFFFFF;
padding-left: 30px;
padding-right: 30px;
color: #660033;
overflow : auto;
font-size: 1.2em;
}
 
div#footer
{
height : 25px;
width : 900px;
background-image: url("images/footer.jpg");
background-repeat: no-repeat;
text-align: center;
font-family: "Century Gothic", Verdana, Arial, serif; /* On essaie d'avoir Century Gothic en priorité, à défaut on obtiendra Verdane et ainsi de suite. Serif est une police présente sur TOUS les ordinateurs */
font-weight: 600;
font-size : 1.2em;
color: #660033;
}
 
#accueil
{
background-image: url("images/esquise-index_17.jpg");
color: #660033;
}
 
#liens_menu
{
color: #660033;
font-size: 1.2em;
text-align: left;
}
 
/* Propriétés stylistiques des liens hypertextes */
 
a
{
color: #660033;
text-decoration: none;
}
 
a:hover
{
background-color: #FFFF66;
}

[shawty]

Bonjour,

Je viens de tester ton css sous IE 7.0 et pour moi ca marche correctement, la police est bien Century Gothic.

[Daddy91]

A l'aperçu ça ne donne pas de Century...

Tiens je t'uploades deux images :

Avec FireFox

[img=http://img413.imageshack.us/img413/9264/ffsy1.th.gif]

Avec Internet Explorer 7

[img=http://img402.imageshack.us/img402/3092/ie7er4.th.gif]

Est-ce que tu vois où je veux en venir ?

[Bisûnûrs]

C'est plutôt l'inverse. IE qui affiche la police Century Gothic et les autres navigateurs qui ne l'affichent pas.

De manière générale, il ne faut pas utiliser des polices un peu folklo, peu de gens les ont installées sur leur PC et voient le site dans une autre police.

[Daddy91]

Ah bon... Pour moi c'est bien IE qui n'affiche pas la police Century Gothic.
En fait j'ai pris cette police au départ avec un logiciel peu connu '' : Photoshop.

Mais ce n'est pas vraiment un choix mais plutôt une obligation :
La Rapport Annuel de ma boîte est édité par un sous-traitant. Et pour avoir une certaine concordance, je les ai appellé pour connaître le nom de leur police. Et ils m'ont répondu Century Gothic. Conclusion, mon patron m'a dit, "écoutes Séb, tu prends ça, et le DG sera content". Donc j'ai suivi les ordres...

Perso je préfère Verdanna mais bon

Ce qui est d'autant plus troublant, c'est que sur une certaine page, j'ai le rendu que je veux sur une ligne de <th> et tout le reste devient gros et pas beau.

Voici l'URL de la page en question.

[Candygirl]

Peut-être bien que ton problème vient de là:

Code :

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

1
2
3
4
 body
{
font-weight: 600;
}

Les navigateurs ne supportent encore pas tous pleinement, voir pas du tout, les différentes graisses de police. Sur FF, à voir, il passe simplement à gras. En mettant un

Code :

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

1
2
3
4
 body
{
font-weight:bold;
}

obtiens-tu le même résultat sur IE ?

[Daddy91]

Je te remercie !

Tu es la meilleure

J'avais effectivement voulu jouer mon malin en prennant une valeur précise et non "générique". D'où ce gros caffouillage !

Merci à vous tous !