[Résolu] Font-size IE FF probleme Tableau

Bonjour tout le monde,

Je viens vers vous pour demande vos lumiere car les miennes me lache

Voilà le probleme j'ai voulu bien faire en utilisant les font-size: small; ou j'avais lu que c'etait bien d'utilisé cela

Ensuite je suis tomber sur le billet avec les em et me suis dit que ca allait peut etre regler mon probleme.

Après une recherche sur le forum j'ai trouver que les navigateurs se baser sur une taille de police par default. Pour mon FF par default c'est un taille de 16. Mais pour IE je ne sais pas.

Mon probleme et que la taille de ma police pour mon menu est trop grand sous IE... Alors que le contenu est à la bonne taille. Je comprend pas pourquoi seulement pour mon menu il n'aime pas font-size:small; meme apres l'avoir spécifier cela ne changer rien. Mais si je met un font-size: 11px; (meme si c'est mal ) là il comprends.

Donc je deviens un peu fou car je ne comprend pas pourquoi IE me fait cela que pour mon menu

le code css du menu

div#menulien{
	background-color: #019444;
	margin-left: 15%;
	margin-top: -12px;
	position: relative;
}
img.blanc {
	margin-left:5px;
	margin-right:5px;
	
}
#menulien A:hover{
	background-color: #EF4B00;
	font-weight: bold;
}
#lienactif{
	background-color: #EF4B00;
	padding: 5px;
}

Et le code de mon menu

<div id="menulien">
	<!-- Le echo $listemenu[] est utilisé afin d'afficher l'id du menu  en php-->
	<a href="./groupe.htm" id="groupe" onFocus="show('groupe','ssmenu1');" onMouseOver="show('groupe','ssmenu1');" onMouseOut="hidden('groupe','ssmenu1')">Le Groupe</a>
	<img src="./images/blancdefault.gif" class="blanc" alt=""/>

	<a href="./nutrition.htm" id="nutrition" onMouseOver="show('nutrition','ssmenu2');" onMouseOut="hidden('nutrition','ssmenu2')">Nutrition Animale</a>
	<img src="./images/blancdefault.gif" class="blanc" alt=""/>
	<a href="securite.htm" id="securite" onMouseOver="show('securite','ssmenu3');" onMouseOut="hidden('securite','ssmenu3')">Sécurité Alimentaire</a>
	<img src="./images/blancdefault.gif" class="blanc" alt=""/>
	<a href="rh.htm" id="rh" onMouseOver="show('rh','ssmenu4');" onMouseOut="hidden('rh','ssmenu4')">Ressources Humaines</a>
	<img src="./images/blancdefault.gif" class="blanc" alt=""/>
	<a href="./eleveur/" id="mprofessionnel" >Professionnel</a>
</div>

Edit : En faite il ne prend pas en compte les small et x-small j'ai l'impression oO
Modifié par Halindel (07 Aug 2007 - 17:12)

Bonjour,

juste pour info, combien de ppp as-tu dans (Panneau de Configuration ou clic-droit sur le papier-peint du Bureau) les Propriétés d'Affichage / Paramètres / Avancé / onglet Général: 96ppp ou bien plus?

J'ai 96 ppp c'est la dessus que ce base IE pour la taille du texte ??

Je me permet de revenir à la charger car j'aimerai evité d'utiliser les px pour mettre la taille du texte

Donc il y a bien une difference avec le 16 de FF et le 96 de IE ?

bon personne alors n'a une petit idée.

Je vais donc devoir repasser en mode pixel pour mes font-size
car si cela le fait chez tout le monde, je prefere pas tenter le diable surtout pour le menu...

Halindel a écrit :
Donc il y a bien une difference avec le 16 de FF et le 96 de IE ?

Ben oui, ça n'a rien à voir. D'un côté il s'agit d'une taille de texte (16px), de l'autre d'une résolution (96ppp). Mais la taille du texte par défaut dans IE est bien 16px, si tu as gardé les paramètres de base et que tu es bien en affichage «Taille normale» pour le texte.

Par contre, il me semble qu'IE comprend mal le mot-clef small, donc mieux vaut l'éviter.

Je suppose que tu as lu l'article suivant?
Typographie web : gérer la taille du texte avec les « em »
En appliquant les conseils de cet article, qu'est-ce qui ne passe pas?
Modifié par Florent V. (07 Aug 2007 - 09:31)

Oui j'avais lu cette article, et j'avais changer mes small par des em, mais la difference était toujours la même.

Donc je pense que je vais mettre une taille fixe pour mon menu afin qu'il ne se trouve pas sur deux ligne et je mettrai des em pour le reste.

Je suppose que cette solution n'est pas très conforme ?

Halindel a écrit :
Je suppose que cette solution n'est pas très conforme ?

Ben si, ça valide.
Ensuite, conforme aux règles d'accessibilité (notamment au RGAA), non, ça ne l'est pas.

Je serais curieux de voir ces différences de taille de texte, ceci dit.

En faite j'ai triché j'ai utilisé le ctrl+molette pour reduire la taille du text sous ie

mais j'ai toujours un probleme dans mon mini menu qui est en x-small.

Arf ... j'ai oublie de changer le nom des images et ca a modifier aussi ici

Et je fais changer tout mes smalls en em maintenant sauf pour le menu je pense car sinon j'ai deux ligne si les caracteres sont trop gros.
Modifié par Halindel (07 Aug 2007 - 11:40)

bon je comprend plus rien moi :'(

j'ai tout modifié pour des em ... le menu c'est bon mais voilà ce que j'obtient quand je modif l'em sur un text ( la il se trouve a 1.2 pour le titre en gras et 1 pour le chapeau text en dessous)
FF :

IE:

Quand je dis «Je serais curieux de voir ces différences de taille de texte», il faut comprendre: «Où est la page?»

Comme je suis particulièrement flemmard, je ne suis pas très enthousiaste à la perspective d'écrire encore quatre ou cinq messages dans lesquels je proposerais vaguement des pistes de solution, sans avoir la moindre idée du fond du problème vu que je ne peux pas faire de test sur la page ou même constater les choses directement. Surtout que ces pistes de solutions pourraient tomber dix fois à l'eau avant de tomber juste.

Et si on s'évitait un peu de temps perdu?
Si je suis malade, je vais chez le médecin, je lui envoie pas un mail pour lui décrire mes symptômes.


PS: si si, je suis zen...
Modifié par Florent V. (07 Aug 2007 - 12:38)

Désoler :'( j'avais mon ftp qui buguer donc je pouvait pas mettre la page en ligne. Mais mon herbergeur viens de corriger le probleme.

Voilà la page

Par contre aucun lien ne marche donc pas la peine de cliquer, on peut voir la difference entre ff et ie6 j'ai pas IE7 donc pas pu regarder...

Après test: le rendu de la taille du texte est sensiblement le même dans IE7, IE6 et FF2, pourvu que la taille du texte soit toujours réglée sur la valeur moyenne/par défaut. Dans Internet Explorer: Affichage > Taille du texte > Moyenne.

Par contre, tu n'as pas pris de précaution contre le bug d'IE 5-6 lors du redimensionnement du texte. Ce bug est pourtant clairement mentionné (ainsi que le moyen de l'éviter) dans l'article que je citais ci-dessus, et que tu as lu. Pour rappel, ça se trouve à la fin de la «bonne pratique» intitulée «Utiliser une taille de texte “globale” pour l'ensemble de la page». Ton problème ne vient pas de là, mais autant s'occuper de ça.

Ensuite: le rendu avec IE5 et IE5.5 est effectivement problématique, c'est à dire que tout le texte contenu dans le tableau de mise en page (fils de div#corpsarticle) est plus gros.
Or, nous savons qu'en mode Quirks, les tableaux n'héritent pas de la taille du texte définie ou calculée pour leur parent. Donc en gros, si on ne précise pas de taille de texte pour les tableaux, ils auront pour taille de texte la taille de texte par défaut, soit le plus souvent 16px.

Ce comportement non standard n'intervient pas en mode Standard, justement. Donc il suffit de s'assurer que la page n'est pas rendue en mode Quirks, et on devrait l'éviter (ainsi qu'une foule d'autres problèmes liés au mode Quirks). Le problème, c'est qu'IE5.x ne connait que le mode Quirks, ce qui ne nous arrange pas vraiment. Si on utilise des tableaux, et notamment des tableaux de mise en forme, et que l'on doit supporter IE 5.x, on utilisera alors un commentaire conditionnel pour adresser à cette version d'Internet Explorer une taille de texte spécifique pour les tableaux. Par exemple:

<!--[if lt IE 6]><style type="text/css" media="screen">
table {font-size: 12px;}
</style><![ endif]-->

Voili voilou, je crois qu'on a fait le tour.

arg >< je savais pas que pour les tableaux il fallait lui redefinir une taille ainsi qu'une couleur je pensait que c'etait toujours herité enfin.

Ton hack ne marche pas si je le met ma page ne s'affiche plus, j'ai donc opter pour quelque chose de plus simple.

table#articletable{
	font-size: 1em;
	color: #6A6A6A;
}

Et IE et FF sont content. Faudrai que je fasse attention donc pour mes autres tableaux. (arg oui apres verification j'ai le meme probleme sur mon autre tableau... )

Merci bien en tout cas Florent, et pour le bug avec le html a 100% j'ai rajouter.

Encore merci