28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Avant de poster ce message, j'ai cherché des solutions pour régler mon problème : sans succès.
En fait, une police différente s'affiche sous IE et sous Firefox alors que la police utilisée est Georgia. Sous IE, le texte et le menu s'affichent bien avec la police Georgia alors que sous Mozilla cela s'affiche avec la police Times New Roman. Je pense avoir un problème dans le CSS... mais où? Comment régler ce problème?

Merci d'avance ^^


Voilà le code CSS :

body 
{
	background-color: #E6E6E6;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#global
{
	width: 1024px;
	margin-right:auto;
	margin-left:auto;
}

#fond
{
	background-image: url(exposition/images/accueil/fondaccueil2.jpg);
	background-repeat: no-repeat;
	height: 764px;
	width: 1024px;
	position: absolute;
	top: 0px;
}

ul  {
	font-family: Georgia, "Times New Roman", Times, serif;
	list-style: none;
	margin: 0;
	padding: 0;
	}
	
#menu {
	width: 181px;
	position: absolute;
	left: 539px;
	top: 568px;
	}

#menu li a {
	font-family: Georgia, "Times New Roman", Times, serif;
  	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 22px;
	text-decoration: none;
	font-size:15px;
	}	
	
#menu li a:link, #menu li a:visited {
	color: #3D93AA;
	display: block;
	padding: 5px 0 0 5px;
	}
	
#menu li a:hover {
	color: #62843A;
	padding: 5px 0 0 5px;
	}
	
#menu li a:active {
	color: #62843A;
	padding: 5px 0 0 5px;
	}


#texteaccueil
{	
	font-family: Georgia, "Times New Roman", Times, serif;
	position: absolute;
	left: 21px;
	top: 602px;
	width: 466px;
	height: 86px;
	text-align: justify;
	line-height: 18px;
	padding-right: 10px;
	font-size: 14px;
	color: #3D93AA;
}


#pied_de_page
{
	width: 350px;
	position: absolute;
	left: 598px;
	top: 715px;
}

#lien
{
	width: 201px;
	height: 54px;
	position: absolute;
	top: 682px;
	left: 708px;
}

#logo
{
	width: 86px;
	height: 73px;
	position: absolute;
	top: 668px;
	left: 928px;
}

Modifié par fvsch (12 Apr 2011 - 14:56)
Bonjour,

Le seul problème que je vois, c'est que tu redéclares la même déclaration font-family alors que la déclarer sur l'élément BODY devrait suffire. Ça n'explique pas le problème dans Firefox.

Ce genre de problème est souvent lié à une configuration précise, et il est probable qu'il ne se manifeste pas sur d'autres configurations. Par exemple, il se peut que la version de Georgia installée sur ton système soit, pour une raison ou une autre, dans un format que Firefox (ou les librairies système qu'il exploite) n'arrive pas à lire correctement.

Pourrait-on:
- En savoir un peu plus sur ta configuration (version de Windows, versions d'IE et Firefox, rendu dans Chrome...)?
- Voir la page en ligne si elle est disponible?

En passant, je rappelle que si on veut qu'un site s'affiche correctement sur une résolution de 1024px de large, il ne faut pas définir une largeur globale de 1024px! En effet, la fenêtre du navigateur peut avoir des bordures, et le plus souvent on aura aussi une barre de défilement. Au final, l'espace disponible dans le viewport (zone de visualisation du navigateur) sera plutôt de 1000px ou mois. On recommande plutôt une largeur de 960 ou 980px.
Tout d'abord, j'ai modifié mon code et évité de redéclarer la propriété font-family.

Ensuite, concernant mon problème, j'utilise la version 7 d'IE, la version 4.0 de Firefox et je suis sous Windows XP (malheureusement).
Par contre, je ne peux pas encore mettre ma page en ligne.
Et merci quand aux recommandations par rapport à la largeur de ma page.

D'autres suggestions ??

Merci d'avance,
Bonjour,
Je viens de tester ton code dans la même configuration que toi : windows xp, IE7 et FF4 et je n'ai pas le problème chez moi Smiley decu
Tu as moyen de tester sur une autre machine peut-être?
Aurais-tu changé la font par défaut du navigateur (bien que je doute que ça joue)
Tu peux essayer de rajouter un !important à ta déclaration mais là encore pas sûre que ça change quelque chose vu qu'à priori tu n'as pas d'erreur dans ta css.

La police times et georgia sont assez proches dans leur rendu visuel, tu es sûre que firefox n'affiche pas georgia mais que, l'affichage des polices étant différent suivant les navigateurs, tu penses que c'est du times ?

Voilà une page test, est-ce que ton firefox affiche une différence entre les deux polices ?
Merci pour ta réponse InpIxelItrust.

J'ai testé sur autre machine (configuré de la même manière) et j'ai rajouté !important mais ça ne change pas.
Par contre, je me suis rendue compte grâce à ta page test que je me suis trompée : c'est IE qui ne n'affiche pas la police georgia!! et pas Mozilla.

??