Problème rendu de font différent sous IE et Opéra?

Bonjour à tous,

j'ai un problème avec la police Trebuchet MS, qui ne s'affiche pas pareil entre Firefox et IE/Opéra.

Je met la police en gras avec "font-weight: bold;", mais elle s'affiche plus grasse sur ces navigateurs.


> Trebuchet MS est-elle une police "exotique" aux rendus aléatoires ??

> Comment régler ce problème sans passer par des images ??

> De meilleurs choix de police à faire ??


Le problème se situe sur mon mur de photos, ici : http://arthur.andre69.free.fr/photo/

J'ai également remarqué des tailles d'affichage différentes des polices, malgré une taille en em.
(Référence Firefox, plus petit sur IE et Chrome, mais plus grand sur Opéra...)

> Un problème avec les em ?

Salut Arthur69,

En lisant vite fait ton cs, il me semble que ton soucis est en rapport avec ceci.

++

nb : Au passage, oublie la mise en page tableau et également, n'oublie pas de mettre une valeur à l'attribut alt de tes images.
Modifié par Nolem (16 May 2009 - 22:33)

Salut, la syntaxe de mon commentaire est correcte, c'est le gte qui te pose souci ?? (ça veut dire supérieur ou égal à)

Et cela n'explique pas le problème avec Opéra.


Faut vraiment que je vire ce tableau...

Salut Arthur69,

Arthur69 a écrit :

...
la syntaxe de mon commentaire est correcte,
...

Quand j'ai lu ton code source, tu m'as mis dans le doute. Je te propose de bien relire cet article notamment le paragraphe : « Adresser des correctifs CSS spécifiques aux versions d'Internet Explorer Windows ». Puis tu regardes ton erreur On en perd sa tête avec ces petits soucis Html (...)

Également, je vois des erreurs de sémantique. La structure de ton tableau est erronée. Je ne vois que des balises th. Logiquement, je verrais plutôt des tags td dans ton cas. Je dirai que dans l'absolu, une la mise en page tableau, faut oublier. Tu brides le potentiel du CSS.

<<<EDIT
Je te propose de lire le tuto : « Construire-un-site-sans-tableaux » de notre ami Raphaël.
EDIT;

Dans le cas d'un en-tête et d'un corp de tableau, je crois que cela devrait être :

<table>
	<thead>
		<tr>
			<th>titre 1</th>
			<th>titre 2</th>
			<th>titre 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>texte 1</td>
			<td>texte 2</td>
			<td>texte 3</td>
		</tr>
	</tbody>
</table>

Je ne comprends pas pourquoi tu as ouvert plusieurs miniatures. Une seule suffit amplement.

<!-- code source précédent -->	
<td class="miniature"><a href="photos/montagne/montagne.html">Montagne</a></td>
<td class="miniature"><a href="photos/mozart/mozart.html">Mozart</a></td>
<!-- code source suivant-->

.miniature{
	/*propriété css*/
}

Par soucis d'optimiser le tout je dirai même :

<!-- code source précédent -->	
<td><a href="photos/montagne/montagne.html">Montagne</a></td>
<td><a href="photos/mozart/mozart.html">Mozart</a></td>
<!-- code source suivant-->	

td{
	/*propriété css*/
}

S'il ya un table dans le site, ce serait du style

<div id="ma_galerie_photo">
	<table>
		<tr>
			<td><a href="photos/caramel/caramel.html">Caramel</a></td>
			<td><a href="photos/choranche/choranche.html">Choranche</a></td>
			<td><a href="photos/fete des lumieres/fete_lumieres.html">Fête des Lumières</a></td>
			<td><a href="photos/foret noire/foret_noire.html">Fôret Noire</a></td>
			<td><a href="photos/macros/macros.html">Macros</a></td>
		</tr>
		<tr>
			<td><a href="photos/montagne/montagne.html">Montagne</a></td>
			<td><a href="photos/mozart/mozart.html">Mozart</a></td>
			<td><a href="photos/printemps/printemps.html">Printemps</a></td>
			<td><a href="photos/reglisse/reglisse.html">Réglisse</a></td>
			<td><a href="photos/textures/textures.html">Textures</a></td>
		</tr>
	</table>
</div>

#ma_galerie_photo td{
	/*propriété css*/
}

++

ps : le code fait de tête. Je peux mettre trompé.
Modifié par Nolem (18 May 2009 - 00:38)

Je vais essayer de faire sans tableau, c'est trop prise de tête^^

Et comme j'utilise une image en background, je suis obligé de mettre une class par cellule.


C'est vraiment moche quand même...

Sinon pour le rendu des polices, il y a de fortes chances que ce soit le rendu du navigateur (ClearType) qui fasse une différence, point.

Tu ne peux donc rien y faire (sauf modifier les préférences de ton navigateur).

D'accord, merci de votre aide !

Salut,

en complément quelques lectures intéressantes.