Problème Firefox et IE encore

[yves8]

Bonjour,
J'ai fait mon nouveau site avec Kompozer, et j'ai toujours le même problème. Avec Firefox, il se présente exactement comme je le voulais, mais avec IE, c'est la cata. Les listes à puces ne s'affichent pas, les listes de liens sur une ligne se mettent sur deux lignes et j'en passe.
Est-ce que quelqu'un pourrait m'éclairer svpl ?
http://www.auxbonsliens.com/Service_pyrogravure.html
Merci d'avance
yves8

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.15) Gecko/20080623 Firefox/2.0.0.15

[Mongo Bob]

Je ne vois aucune différence entre les affichages FF et IE6, y compris en petite définition 800x600.

[yves8]

Personnellement, je suis sous IE7, et je n'ai pas les listes à puces, et les liens du dessus "pyrogravure - tournage - chantournage - menuiserie" sont sur deux lignes au lieu d'une.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[Mongo Bob]

OK, je rectifie, exact : IE6+IE7 :
"Menuiserie" passe à la ligne dans toutes les définitions 600x800 > 1280x1024, on pourrait appeler cette liste là "sous-menu horizontal"...

je n'ai pas les listes à puces

"les"? Y'en a plusieurs? De quoi parles-tu? je ne vois que le menu vertical de gauche "Accueil > Contact" qui pourrait correspondre à ce que tu dis, mais y'en a qu'un?!
Si, oui, IE6 et 7 OK de 600x800 à 1280x1024 pour ce dernier.
Pour le sous-menu horizontal, je crois que le div id "container" devrait avoir sa largeur en "%" pas en pixels, en css, tu as :

Code : Tout sélectionner

#container {
  margin: 0 auto 10px;
  width: 750px;
  font-family: "Courier New",Courier,monospace,sans-serif;
  font-size: 12px;
  color: #333333;
  background-color: #f7f2e3;
  line-height: 1.6em;
}

Je mettrais plutôt :

Code : Tout sélectionner

#container {
  margin: 0 auto 10px;
  width: 40%;(...)

tâtonner un peu...
En fait, toutes les grandes largeurs, au-dessus de 400px devraient être "converties" en "%", je n'ai remarqué que le div "container" mais il y a peut-être autre chose...
Euh... ton code c'est un peu "soupe de tags", comme on dit traditionnellement, mais je ne sais pas si je peux te faire un cours, là. Je veux dire qu'il y a sans doute d'autres erreurs de codage qui peuvent occasionner ces problèmes d'affichage... Entre autres, les fameux "big" et "small" créés par la barre de mise en forme... Bon courage.

[yves8]

Rebonjour,
Merci pour ta réponse.
J'ai des captures d'écran pour mieux m'exprimer :
Firefox :


IE7


Les listes à puces que je disais :
Firefox


et IE7


Voilà mon problème. Pour la soupe de tags, il est vrai, j'avoue, c'est un kit graphique que j'ai pris car je ne suis que novice dans ce domaine. D'origine, je travaille le bois et pas l'informatique.



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[Mongo Bob]

Donc, on est d'accord : "Menuiserie" passe à la ligne sous IE6-7.
C'est bien une liste à puces, mes excuses, pas de puces sous IE? Je crois qu'il ne voit que les puces-images...
Comment l'as-tu créée qu'on puisse te conseiller?

[yves8]

Exactement pour menuiserie
Pour la liste à puces, je l'ai faite simplement en cliquant sur le bouton "puces" dans la barre d'outils dans Kompozer.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[chinon37]

Bonjour,
Pour le passage du "menu" sur deux lignes, je pense que c'est dû à l'usage de l'outil "plus petit"(<small>) ou "plus grand" (<big>) de Kompozer. En l'occurence, ici, on a des <big> après la balise de lien <a> qui ne doivent pas être interprétés pareil sous Firefox et sous Ie.
Il faut proscrire ces balises du 19eme siècle et définir les tailles de polices par style css.

[Mongo Bob]

mais c'est qu'il pourrait bien avoir raison...

pour les puces, leur non-affichage IE pourrait-il être dû à la largeur trop grande de <ul>?
Dans Kpz, peux-tu cliquer n'importe où dans la liste, clic droit ensuite sur <ul> dans la barre d'état (tout en bas à gauche)/clic droit sur Styles internes/Onglet boîte/dans "Largeur", tape 40% à la place de "493px"?
Aussi, onglet Listes/"Position de la puce", défiler pour faire "intérieure" ou "extérieure", tâtonner avec tous ces paramètres là... est-ce que IE boude encore?

[yves8]

Merci à vous deux pour les astuces, ça a l'air de marcher.

J'ai fais comme Chinon37 me l'a conseillé pour le menu horizontal, la grandeur des polices en css et non big. L'affichage est bon sur les deux navigateurs, mais un peu petit à mon goût. IE7 interprète la taille de l'écriture plus grande que Firefox.

Et pour les puces, ah ces fameuse puces. Là aussi, j'ai suivi les conseils de Mongo Bob, mais non sans mal. Une fois ça marche, le coup d'après, plus de puces, et ainsi de suite. Il y a même sur une page une puce qui est trois lignes plus bas qu'elle devrait être (sur IE7 bien sûr), donc à la fin du paragraphe, m'enfin, je laisse comme ça.

Au fait, est ce que vous trouvez ce site http://auxbonsliens.com plus professionnel que l'autre ? http://lambert-pyrogravure.com car il est fait pour remplacer ce dernier.

Merci de vos réponse et à bientôt


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[Fabrice.Tres.Net]

Merci à vous deux pour les astuces, ça a l'air de marcher.

J'ai fais comme Chinon37 me l'a conseillé pour le menu horizontal, la grandeur des polices en css et non big. L'affichage est bon sur les deux navigateurs, mais un peu petit à mon goût. IE7 interprète la taille de l'écriture plus grande que Firefox.

cela dépend comment tu as déclaré la taille des fontes et/ou selon le réglage par défaut dans le navigateur.

Les mal-voyants choisiront plutôt des grandes tailles de fontes dans les préférences de leur navigateur...l'affichage des fontes se fera donc en proportion SI la taille n'a pas été fixée en dur, genre 12px!
Préférable d'utiliser l'unité em pour les fontes.

[yves8]

Merci pour ce conseil
J'ai utilisé la taille 1,2em pour les liens, ce qui me fait un peu petit, mais celle qui est juste un plus grande en em, je ne sais plus laquelle c'est, me passe carrément le menu sur deux lignes.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16

[chinon37]

Et pour les puces, ah ces fameuse puces. Là aussi, j'ai suivi les conseils de Mongo Bob, mais non sans mal. Une fois ça marche, le coup d'après, plus de puces, et ainsi de suite. (/quote]
c'est bien connu, les puces, ça n'arrête pas de sauter (Bon ok, j'ai honte, mais je ne sors pas de suite )

Au fait, est ce que vous trouvez ce site http://auxbonsliens.com plus professionnel que l'autre ? http://lambert-pyrogravure.com car il est fait pour remplacer ce dernier.

C'est une question de goût,mais une chose est sûre: le nouveau site aura un code plus valide que l'ancien, ce qui est un plus indéniable.
Personnellement, j'aèrerais un peu en mettant plus d'espace entre les paragraphes, avec par exemple un espacement en bas des paragraphes de 50px.
Pour le fond des liens, je ne mettrais pas une couleur déjà utilisée pour les titres h1 et le pied de pages car cela amène de la confusion et nuit à la clarté de la navigation.

Mais c'est un avis personnel. Et je pense que des professionnels de la couleur comme Ymai ne seront pas forcément d'accord avec moi
ça y est, je sors maintenant