Problème d'alignement vertical de police entypo

Wapaca
Les bases HTML/CSS

Bonjour,

Je suis actuellement en pleine intégration sur un site web et le graphiste m'a fourni des polices entypo pour les icônes, après avoir testé le site web sous linux (firefox et chrome) tout est nickel mais quand je passe sur l'ordi d'un ami tout est décalé.

Après investigations j'ai remarqué que ça vient des polices entypo qui ne s'aligne pas au même niveau mais au final je n'arrive pas à définir l'alignement que je voudrais afin de ne plus être embêté par les réglages de certains navigateurs.

[strike]Voici une page du site que je suis en train de dev. ainsi qu'un screenshot de ce que je vois.[/strike]
Suite à une discution avec mon partenaire nous avons décidé de ne donner le lien qu'en message privé, si vous voulez m'aider et que vous avez besoin du html/css pour me guider il vous faudra donc me le demander.

Comme on peut le voir, ici la police du caddie de supermarché est bien au centre du span mais malheureusement chez mon ami elle est aligné plus bas ce qui place le caddie hors du cadre :s

Quelqu'un aurait des idées ? j'ai testé le vertical-align:middle mais sans succès :(

6 réponses

Natà
Réponse acceptée

Salut,
Effectivement ça serait bien de pouvoir tester mais la comme ça, je dirais qu'il faut jouer avec la propriété line-height en lui donnant une valeur égale à la div parente.

Xtr3me
Réponse acceptée

C'est donc un span ? Si c'est le cas un line-height comme l'a dit Natà est de mise.

Petite question quelle résolution d'écran a ton ami et sur quel navigateur ? C'est peut être aussi un problème de marge par exemple IE applique des marges un peu partout alors que Firefox non etc...
Essayes de passer le span en display:inline-block; sinon ;)

Wapaca
Auteur
Réponse acceptée

Problème résolu, c'était en faite les formats qui étaient incomplet, j'ai donc retéléchargé les polices dans plusieurs formats.

antho07

Bonjour, il faudrait pouvoir tester pour comprendre ce qu'il se passe oui ..

Wapaca
Auteur

C'est bête mais je n'y avais pas pensé donc je testerai et en cas si ça ne fonctionne pas je vous enverrai le lien du site à tout les deux ;)

Wapaca
Auteur

Je suis en train de bosser sur le problème mais apparemment c'est à la fois un problème de line-height non défini donc chaque navigateur y va à sa sauce mais aussi de police qui n'était pas aux formats compatible sur windows et mac, je n'avais qu'un format pour linux lol

Sinon pour tout ce qui est margin et padding j'ai une règle *{margin:0;padding:0;} au début de mon css, je repasserai vous donner des nouvelles dès que j'aurai repassé toutes les pages une par une afin d'ajuster les font-size et line-height.