Page 1 sur 3
css IE<>FF !
Publié : 26 janv. 2005, 20:10
par jojaba
Bonsoir à tous,
Je me lance dans les css en utilisant simplement pspad et quelques connaissances basiques que j'ai pu glaner de ci de là :
http://www.alsacreations.com/articles/
http://dicolive.media-box.net/docCSS/cs ... erByType=1
http://www.commentcamarche.net/css/cssintro.php3
Je viens de modifier ma page d'accueil en conséquence.
Cependant, il y a des différences d'affichages au niveau de la taille de polices entre Internet Explorer et Firefox (la version FF est celle que je souhaiterais obtenir de préférence).
y-a-t-il possibilité de remédier à cela ?
Voici mon fichier css :
/*Document CSS*/
/*------------Partie commune à toutes les pages du site Jojaba-------------*/
/*Mise en page générale de la page*/
body {
background-color: rgb(255, 255, 204);
font-family: helvetica,arial,sans-serif;
color: rgb(153, 51, 0);
}
/*Apparence des liens*/
A:link { color:#004080; text-decoration: none;}
A:visited { color:#004080; text-decoration: none;}
A:hover { color:#FF6543; text-decoration: none; }
/*propriétés du tableau*/
table {
text-align: left;
height: 100%;
width: 100%;
background-color: rgb(255, 255, 204);
}
/*propriétés des listes*/
#puce {
list-style-image: url(images/puce.gif);
}
/*---Menu gauche---*/
/*Boutons du menu de navigation*/
#bouton {
font-size: small;
border-style: outset;
border-color: rgb(255, 153, 0);
text-align: center;
background-color: rgb(255, 204, 102);
}
/*listes dans le menu de navigation*/
.liste{
list-style-type: none;
margin: 0;
padding:5;
font-size: xx-small;
}
h2 {
font-size: medium;
text-align: center;
border-style: outset;
background-color: rgb(255, 255, 204);
border-color: rgb(255, 255, 204);
}
h3 {
font-size: small;
font-weight: bold;
background-color: rgb(119, 210, 255);
padding:5;
}
/*------------Fin de la partie commune à toutes les pages du site Jojaba-------------*/
/*------------Partie spécifique à index.html-------------*/
/*conteneur droit*/
.conteneur {
border-style: outset;
border-color: rgb(255, 204, 153);
background-color: rgb(255, 204, 153);
padding: 5px;
font-size: small;
}
/*Titre*/
h1 {
font-size: large;
text-align: center;
background-color: rgb(255, 204, 153);
border-style: outset;
border-color: rgb(255, 204, 153);
}
Et ma page d'accueil :
http://pagesperso.laposte.net/jojaba/
Merci d'avance !
Publié : 26 janv. 2005, 23:49
par FF_Olivier
Tu n'as pas de
font-size dans le
body, on y met normalement celui de base. N'oublie pas non plus que tu as p-ê réglé FF pour qu'il affiche une taille minimum pour les caractères.
Personnellement, je mets un
font-size absolu dans le
body (par ex.
body { font-size: 10pt ;}), et
tous les autres sont dérivés de celui-là par pourcentage (par ex.
h1 { font-size: 150%; }).
Ainsi, je n'ai qu'une valeur à changer pour tout modifier en conséquence.
Je choisis l'unité
pt plutôt que
px pour que les caractères aient la même taille apparente à l'écran quel que soit son dpi. C'est plus adapté à l'impression aussi. C'est un choix discutable mais il me convient
.
Je n'utilise pas du tout
x-small etc...
PS: ...et sur un 19" à 96 dpi, ta page d'accueil est à peine lisible, je dois zoomer pour que ce soit confortable
...
Publié : 27 janv. 2005, 06:42
par jojaba
merci pour les conseils que je vais appliquer dès que j'ai le temps.
Je te tiendrai au courant !
Publié : 27 janv. 2005, 06:44
par jojaba
FF_Olivier a écrit :PS: ...et sur un 19" à 96 dpi, ta page d'accueil est à peine lisible, je dois zoomer pour que ce soit confortable
...
Comment je règle ça ? Ou c'est du à la taille de caractères ?
Publié : 27 janv. 2005, 07:20
par jojaba
ça marche, super !!!
Merci encore !
J'attends tes commentaires (je ne suis pas sûr que le menu de navigation soit lisible chez toi
).
http://pagesperso.laposte.net/jojaba/
le nouveau css :
/*Document CSS*/
/*------------Partie commune à toutes les pages du site Jojaba-------------*/
/*Mise en page générale de la page*/
body {
font-size: 10pt;
background-color: rgb(255, 255, 204);
font-family: helvetica,arial,sans-serif;
color: rgb(153, 51, 0);
}
/*Apparence des liens*/
A:link { color:#004080; text-decoration: none;}
A:visited { color:#004080; text-decoration: none;}
A:hover { color:#FF6543; text-decoration: none; }
/*propriétés du tableau*/
table {
text-align: left;
height: 100%;
width: 100%;
background-color: rgb(255, 255, 204);
}
/*propriétés des listes à puces*/
#puce {
list-style-image: url(images/puce.gif);
text-align: justify;}
/*---Menu gauche---*/
/*Boutons du menu de navigation*/
#bouton {
font-size: 75%;
border-style: outset;
border-color: rgb(255, 153, 0);
text-align: center;
background-color: rgb(255, 204, 102);
}
/*listes dans le menu de navigation*/
.liste{
list-style-type: none;
margin: 0;
padding:5;
font-size: 55%;
}
/*---Fin menu gauche---*/
/*Titres de second niveau*/
h2 {
font-size: 120%;
text-align: center;
border-style: outset;
background-color: rgb(255, 255, 204);
border-color: rgb(255, 255, 204);
}
/*Titres de troisième niveau*/
h3 {
font-size: 110%;
font-weight: bold;
background-color: rgb(119, 210, 255);
padding:5;
}
/*------------Fin de la partie commune à toutes les pages du site Jojaba-------------*/
/*------------Partie spécifique à index.html-------------*/
/*conteneur droit*/
.conteneur {
border-style: outset;
border-color: rgb(255, 204, 153);
background-color: rgb(255, 204, 153);
padding: 5px;
}
/*Titre*/
h1 {
font-size: 150%;
text-align: center;
background-color: rgb(255, 204, 153);
border-style: outset;
border-color: rgb(255, 204, 153);
}
Publié : 27 janv. 2005, 12:40
par martin
Je fais presque la même chose que FF_Olivier, mais avec une nuance que je trouve importante.
Je déclare pour le body un font-size en em. Pourquoi ? Parce que c'est le seul moyen pour qu'un utilisateur d'IE puisse modifier la taille d'affichage des caractères (plus grand ou plus petit). Firefox lui peut changer cette taille d'affichage même si ce font-size est en px ou pt. Mais pas IE.
Exemple : body {font-size: 0.7em;}
Ce qui correspond à 8pt pour les réglages par défaut sous firefox et IE (taille du texte moyenne par défaut pour ce dernier).
Et ensuite toutes les autres tailles sont effectivement en unités relatives et découlent de cette première règle.
C'est important pour l'accessibilité, des utilisateurs d'IE (il en reste
)
Publié : 27 janv. 2005, 12:51
par martin
J'en oublié une remarque aussi.
Le doctype choisi a également son importance pour avoir des résultats approchants sous firefox et IE.
Un doctype indiquant HTML strict permet à IE de se comporter beaucoup mieux avec les CSS, plus en conformité avec les standards.
Par exemple pour les tailles de police, le contenu d'un TD devrait par défaut avoir la taille défini dans body, ce n'est le cas que si le doctype est strict.
Et le modèle des boites également, il est conforme aux standards uniquement en strict. Et bien sur il ne faut d'erreurs qui fasse basculer IE en mode quirk malgré ce doctype.
Publié : 27 janv. 2005, 14:21
par jojaba
ok martin, j'ai pris note et fait le changement ce soir.
ça veut dire quoi em d'ailleurs ?
Publié : 27 janv. 2005, 14:33
par jv2759
em c'est relatif à la taille par defaut.
Ainsi 1em = 1*la taille par defaut
Ainsi comme la taille par defaut et 16px quand tu met 0.5em cela fait 8px
Mais si l'utilisateur augmente cette taille le naviguateur recalcule tout et adapte automatiquement avec la nouvelle taille...
Publié : 27 janv. 2005, 15:13
par FF_Olivier
jojaba a écrit :ça marche, super !!!
Merci encore !
J'attends tes commentaires (je ne suis pas sûr que le menu de navigation soit lisible chez toi
).
En effet, il ne l'est pas
Je te mets ici une capture d'écran (taille 100% si tu cliques dessus) tu auras ainsi une idée de l'apparence chez moi :
J'ai laissé à dessein une partie de mon interface FF pour que tu puisses te faire une idée de la taille relative.
J'ai vu dans ton CSS que tu as choisi des
font-size de 55% et 75% pour le menu, cela donne respectivement des polices de 5,5
pt et de 7,5
pt par rapport aux 10
pt du
body, je trouve ça vraiment trop peu. P-ê devrais-tu partir d'un font-size de base de 12
pt, je ne sais pas...
Sinon, merci à Martin pour le truc des
em par rapport à IE, je ne connaissais pas.
l'em, en typographie, si je me souviens bien, est la largeur du «m» minuscule dans la police choisie, cele permet de calculer un espacement fixe suffisant, car c'est la lettre la plus large de l'alphabet. Dans ton cas, ce serait la largeur du «m» dans les polices helvetica ou arial ou sans-serif (le contenu de ton
font-family), selon ce que le navigateur-client va choisir d'utiliser.
PS : une petite explication des longueurs dans
la norme CSS2.
Publié : 27 janv. 2005, 15:34
par SB
FF_Olivier a écrit :En effet, il ne l'est pas
T'abuses. Avec un petit effort on y arrive.
Publié : 27 janv. 2005, 16:07
par FF_Olivier
SB a écrit :FF_Olivier a écrit :En effet, il ne l'est pas
T'abuses. Avec un petit effort on y arrive.
Disons un
gros petit effort et... une bonne paire de jumelles
!
Publié : 28 janv. 2005, 06:26
par jojaba
jv2759 a écrit :em c'est relatif à la taille par defaut.
Ainsi 1em = 1*la taille par defaut
Ainsi comme la taille par defaut et 16px quand tu met 0.5em cela fait 8px
Compris ! Merci
Publié : 28 janv. 2005, 06:27
par jojaba
martin a écrit :J'en oublié une remarque aussi.
Le doctype choisi a également son importance pour avoir des résultats approchants sous firefox et IE.
Un doctype indiquant HTML strict permet à IE de se comporter beaucoup mieux avec les CSS, plus en conformité avec les standards.
Par exemple pour les tailles de police, le contenu d'un TD devrait par défaut avoir la taille défini dans body, ce n'est le cas que si le doctype est strict.
Et le modèle des boites également, il est conforme aux standards uniquement en strict. Et bien sur il ne faut d'erreurs qui fasse basculer IE en mode quirk malgré ce doctype.
strict ? quirk ?
Désolé, je nai pas les compétences requises pour comprendre ça.
Un petit lien pour m'aider ?
Merci !
Publié : 28 janv. 2005, 06:34
par jojaba
Voilà, em défini, taille de police augmentée pour FF_olivier !
Prochaine étape, modification des 3 autres pages de mon site.
http://pagesperso.laposte.net/jojaba/
Je vous tiens au courant !
Merci à tous !
