Problème CSS inconnu

Bonjour à tous,

je me tourne vers la communauté car je bloque sur un problème de typo. En effet, le site dont je vous parle s'affiche correctement dans Firefox mais différemment (grands espaces entre les lignes) sous tous les autres outils que j'ai pus tester (IE, Opera, Safari, le navigateur de CSSEdit, de XyleScope,...) oui, un classique je sais...

J'ai chercher sur le forum, mais n'ai pas trouvé de réponse alors si quelqu'un peux m'apporter son aide...

Merci beaucoup,
Olivier
Modifié par Olivier06 (06 Aug 2007 - 11:14)

Bonjour et bienvenue à toi dans la communauté.

Je viens de jeter un rapide coup d'oeil à ton site (au fait, ton lien est mal configuré) et la seule différence notable que j'ai vu est un problème de police.
Tu semble avoir une police de type Arial sous Firefox et une police de type Times New Roman sous IE.
A ta place, je me tournerais de ce côté-là...

À vue de nez, j'ai sensiblement le même rendu avec tous les navigateurs testés (dont Firefox2 et IE6-7), notamment pour le texte du menu de droite.

Bonjour, merci de vos réponses rapides et de votre accueil.

Si je prend par exemple cette page, les lignes de texte sont beaucoup plus écartées sous IE ou Safari que sous Firefox.

De mon côté, je conserve la même famille de polices quelque soit le navigateur (sans shérif).
Modifié par Olivier06 (13 Jul 2007 - 12:20)

Comme tu peux le constater sur ces deux captures d'écrans, je n'ai pas de problèmes d'espacement de typo.
Cependant, comme évoqué précédemment, je rencontre bien un soucis de police (souligné en bleu).
De plus, il semble que tu as quelques problèmes de mise en page, ainsi que plusieurs identifiants similaires.

Ha oui, ce doit être un problème qui touche plus les navigateurs "mac" parce que de mon côté c'est plus visible. C'est vraiment "drôle" le changement de typo...

Comment trouver les problèmes de mises en page et d'ID ?

Olivier06 a écrit :
Comment trouver les problèmes de mises en page et d'ID ?

Voilà qui devrait t'aider : Firebug, un outil précieux d'aide au développement

Conseils génériques:
- choisir une police de caractères (ou plutôt une famille de polices... quelques exemples de familles ici[/url]) et l'appliquer à body;
- régler le line-height pour body, et aussi je crois pour les li.

Sinon, le rendu dans IE6 et IE7 pour la page indiquée me semble plus problématique qu'une simple histoire de hauteur de ligne. Tu as carrément des éléments qui ne s'affichent pas ou mal. Du joli bug de HasLayout qui traine, probablement...

Au passage, j'éviterais d'imbriquer des ul pour ta colonne de droite. Un seul ul pour la partie «menu» suffirait amplement. Ceci dit, je doute que ça soit lié à ton problème (quoique...).

Sinon, on peut avoir un aperçu des différences de rendu que tu observes (captures d'écran avec divers navigateurs)?

Bonjour,

voici 2 copies d'écran :


J'avais déterminé un line-height pour body de 1em, l'unité n'est pas bonne ?

Je vais me renseigner sur les HasLayout...

Bah le rendu du texte n'est pas exactement le même dans les deux navigateurs, mais c'est normal, non?

Pour le menu, essaie en attribuant un line-height précis (par exemple line-height: 1.2em) aux li, pour voir si ça change quelque chose (mais j'ai un doute, je crois que cette histoire de line-height sur les items de liste concerne surtout IE.

Tant qu'à faire, vérifie que les deux navigateurs:
- sont réglés pour afficher le texte à 100% (taille normale) de la taille par défaut;
- ont une même taille de texte par défaut.

Par ailleurs, pense à corriger le problème signalé par Cygnus, à savoir que tu n'as pas de fonte globale définie pour ta page (un petit font-family sur body devrait faire l'affaire).
Sans cela, tu t'expose à ce type de résultat (ici j'ai configuré une fonte par défaut un peu exotique...):


Il faudrait d'abord commencer par ce problème, et ensuite s'occuper du reste si besoin.

Ha oui, merci beaucoup. Je n'avais pas vu cet oublie... J'ai attribué une font-family et un line-height à body ce qui règle déjà certains problème effectivement. Pour mes navigateurs, ils sont tous configurés avec un taille de texte moyenne et à 100% de zoom.

Je n'ai pas encore eu le temps, mais je vais me renseigner sur les HasLayout.


Modifié par Olivier06 (12 Jul 2007 - 13:01)

Bonjour

A tout hasard chez moi (FF mac) ton site s'affiche sans CSS (à cette occasion on peut se rendre compte que le contenu est vraiment clairement structuré, super) et plusieurs messages d'erreur apparaissent :

1- les feuilles de style (classiqueartice.css, classiquearticleprint.css, nouveladh.css, etc) ne sont pas chargées car leur type MIME est incorrect (text/html au lieu de text/css)

2. un attribut invalide : <h1 align=center>

a écrit :
à cette occasion on peut se rendre compte que le contenu est vraiment clairement structuré, super)

Merci

a écrit :
les feuilles de style (...) ne sont pas chargées car leur type MIME est incorrect (text/html au lieu de text/css)

Ah, sur quelle page ? C'était peut être spip qui nous fait des "bétises" ? Je ne trouve pas de text/html

L'url donnée + haut : article4 (adhérents)

< au fait... > maintenant que je peux accèder à l'interface graphique je découvre horrifié que JS désactivé ton joli effet de montrer-cacher le formulaire d'inscription rend toute inscription impossible... à moins que tes futurs inscrits aient impérativement obligation être à la fois jardiniers et javascriptés - ce qui est une cible marketing comme une autre, après tout - je te conseillerais d'afficher prioritairement le formulaire (que tu t'es donné beacoup de peine à rendre conforme et tout et tout) et le masquer ensuite par JS si tu tiens à cet effet < fin de mode au fait...>
Modifié par Arsene (12 Jul 2007 - 15:40)

Oui, cela m'intéresse mais je n'ai pas réussit... Tu serait m'aider ?

En gros tu mets tout en display:block ou visibility:show (selon l'option choisie) par défaut et par un script JS tu demandes ensuite à masquer le formulaire : ceux qui n'ont pas JS l'affichent par défaut, ceux qui l'ont peuvent choisir... Reporte-toi aux topics JS du forum par une petite recherche genre "masquer-montrer une div", ça ne doit pas manquer

super, merci

Arsene a écrit :
visibility:show

Tiens, un nouvel attribut CSS?
Je suppose que tu pensais à visible en écrivant "show".

Pour les en-têtes HTTP, j'obtiens un "Content-type: text/css" pour toutes les feuilles de styles.

Benjamin D.C. a écrit :
Tiens, un nouvel attribut CSS?
Je suppose que tu pensais à visible en écrivant "show".

C'est le mode «faut qu'ça marche même si ça plante!»...

visibility: show-must-go-on;