Internet Explorer n'a pas la bonne police

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 :

 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;
}

Salut ,

tu dois savoir que chaque OS (et chaque navigateur) ne dispose pas de toutes les polices et c'est pour cela que dans l'attribut font-family on renseigne par ordre de préférence les polices de remplacements...

Pour plus d'infos, tu peux voir ce tuto sur la Typographie web ainsi que ce (vieux) topic qui en parle.

A+

Je savais que chaque OS, n’avait pas forcément les mêmes polices d’installées. Mais de là, à ce que a diffère également en fonction des navigateurs, je dois bien avouer que ça me la coupe. Surtout du fait que Safari (pour Windows) lis parfaitement Century Gothic.

Mais lorsque j’affiche ma page avec IE 7, le texte ne ressemble pas du tout à du Century Gothic. Pourtant si je procède à un copier/coller dans Word, l’éditeur de texte me confirme que c’est du Century Gothic, et l’affichage sous Word (re)devient identique à celui sous FF.

Je laisse deux captures d’écran :

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]

Ce serait pas simplement dû aux polices lissées ClearType, utilisées par défaut avec IE7 et pas au niveau du système?

+1

Tu pourrais essayer d'utiliser ClearType Tuner PowerToy pour voir si ça règle l'affichage.

Et effectivement, j'ai peut-être dit une bêtise au sujet des navigateurs qui n'auraient pas les mêmes polices installées ...

Ca me paraît aussi bizarre, mais bon...

Bonjour à tous,

J’ai utilisé le logiciel que vous m’avez conseillé à savoir ClearType Tuner PowerToy.

Et malheureusement rien n’y fait.

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.

Et ce problème se pose uniquement sur Internet Explorer.

J’ai également un autre problème, puisque au fur et à mesure, je navigue sur mon site, depuis plusieurs ordinateurs avec des navigateurs et résolutions différents, et je me rends compte que parfois (50% du temps en fait), et bien, la page s’affiche d’une drôle de façon.

Je m’explique :

J’ai mon header, puis en dessous sur a gauche un bandeau (qui affiche un fond grisâtre alors que je n’ai jamais mis de gris que ce soit dans l’image, dans la CSS ou dans le HTML), puis en dessous j’ai mon menu avec mon contenu suivi de mon pied de page.
Ce qui est tout à fait anormal, puisque dans la théorie, les <div> menu et page, devraient se trouver à droite de mon bandeau grisâtre…
Modifié par seby2027 (23 Aug 2007 - 11:15)

Arf j’ai compris d’où venait l’erreur.

Dans mon code CSS j’avais prédéfini ça :

body
{
font-weight : 600 ;
}

Mais 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.
Donc en mettant un

body
{
font-weight : bold ;
}

Ca passe tout seul

Mais ça ne règle pas pour autant mon problème lié aux div qui n’en font qu’a leur tête…

Hmmm sous IE6 tout ton design part en sucette. J'ai le header puis en dessous le menu, puis en dessous le contenu...
Et puis tu semble utiliser un png comme fond de ton menu, bien sur ça fait des trucs laids sous IE6, je te conseille plutot un .gif ici.

Oh et, précise une couleur de fond blanche à ton body, tout le monde n'a pas laissé du blanc par défaut sur son navigateur

Pour ton problème de div qui font n'importe quoi (si ce n'est pas le même que celui que je viens de te citer), peut tu indiquer sur quel navigateur (et quelle version) tu observe ce problème ?

Exact j’utilisais une image .png
En .gif le bord n’est pas lisse, j’ai donc opté pour une image .jpg, avec un affichage progressif de 5 passages.
Apparemment c’est positif comme résultat.

J’ai ajouté, suite à ton précieux conseil, un fond blanc à mon body.

Concernant le design qui part en sucette, oui c’est bien le problème que je rencontre et que j’ai peut-être bêtement appelé un problème de <div>, il n’apparaît que sur Internet Explorer 6 et Opéra.

Après avoir utilisé le site http://ipinfo.info/netrenderer/index.php, je me suis rendu compte que le problème était récurent sur tous les navigateurs infèrieur à la version 7 d'Internet Explorer