Mauvais rendu de mon site sous différents navigateurs

[Webdesigneuse]

Bonsoir à tous

Je suis en train de créer un blog pour un évènement que j'organise avec le Syndicat d'Initiative de ma commune.

Je réalise ce blog sous le CMS WordPress. C'est le deuxième blog que je réalise ainsi, mais cette fois, j'ai quelques difficultés avec le rendu sous les différents navigateurs.

Je me suis rendue compte que le site n'apparaissait carrément pas sous OPERA 11.51 et je ne comprends pas pourquoi.

En revanche, si tout est ok sous FireFox 6.0.2, sous CHROME 12 et IE 9.08 j'ai des déplacements de calque au niveau de la zone navigation + le header qui s'étire sans respecter le "reapet-x" de l'image de fond uniquement sur la droite extrême du calque (= zone blanche donc). Pas testé sous Safari.

Voici le lien du blog en cours de construction

J'ai cherché des info, mais tjs pas de réponse concernant mon problème avec OPERA.

Pour les calques, il existe peut-être un script pour éviter ce genre de décalage entre les principaux navigateurs ? Bien sûr, je sais qu'on ne pourra pas réaliser un site compatible pour tous les navigateurs

Mais si je pouvais tout de même le rendre compatible à FF, IE, Chrome et Safari et qu'il soit visible sous Opéra, je serais ravie ! Si vous avez quelques pistes, merci

Modifié 19 Septembre 2011 par Webdesigneuse

[playmannba]

Le conseil que je peu te donner dans un premier temps c'est de rendre ton site valide W3C en utilisant leur site, site du w3c.

c'est vrai que c'est très compliqué à régler, il faut tenter pleins de trucs pleins de petite modifs en contrôlant à chaque fois sur les différents navigateurs.

Courage

[Webdesigneuse]

Bonjour et merci pour ta réponse

Je viens de valider... pour le reste je tatonne

Pour mon soucis Opera il semble que ce soit juste sur mon ordi car une réponse sur un autre forum m'a confirmé qu'ils pouvaient voir le site...

à suivre...

[playmannba]

Vérifie ton site avec chrome car j'ai sur chrome des petits problèmes d'affichage apparemment.

[Webdesigneuse]

Hello

Je viens de vérifier, tout est ok chez moi ( IE, Safari, Chrome, Opera et FF)

[Rizer]

Chez moi sous chrome le menu de droite s'affiche en bas.

Certainement un problème de CSS !

[Webdesigneuse]

Peux tu me dire sous quelle version Chrome tu es stp ? chez moi tout est ok... bizarre

[Rizer]

Version: 14.0.835.186 m

Si je fais un "CTRL + Molette" Effectivement le menu est à droite!

Mais le mot "Venir" est en bas de "Blog'Info"

[Tabouet]

Bonsoir,

J'ai déjà eu le même problème, un menu d'affichait normalement avec IE, Safari, Firefox et Opera

mais dès que je testais avec Chrome... tout allait de travers !

A bientôt,

Alexis

[Invité]

Le problème c'est que les navigateurs n'interprète pas le code exactement de la même façon. Je reprends ce qui a été dit plus haut: valide ton site avec des outils W3C ou semblables!

[Webdesigneuse]

Merci Rizer

J'utilise une typo perso (méthode _AT_font-face)... est ce que tu as la même que moi à l'écran ? (voir image ci-dessous) car si le navigateur ne prend pas en charge cette méthode, ça décale tout en effet, car la typo système par défaut est nettement plus grosse que ma typo perso.

Sinon, c'est étrange et je ne vois pas d'où ça peut venir chez moi tout est ok avec la dernière version Chrome (14.0.835.187) et "@font-face" fonctionne depuis sa version 2. Je sais par contre que Linux pose problème (je suis sous W7).

[Webdesigneuse]

Oups ! je n'avais pas lu les derniers messages en effet, je dois aussi re-valider depuis quelques changements ça m'a pas mal ajouté d'erreurs :/

[Rizer]

Non je ne vois pas la même typo que toi !

Le problème viens certainement de ça mais alors toutes les personnes n'ayant pas ta typo verrons mal le site non ?

Pourquoi tu n'utilises pas une typo de base ou des images?

[Ernestine]

Bonjour,

Chez moi, sous Firefox 6.0.2, c'est tout cassé : la sidebar qui est sensée se trouver à droite, se retrouve en dessous.

En regardant rapidement le code, on constate que tu as le #content en float left, et la #sidebar en float left également. Même si théoriquement ça devrait fonctionner, dans la pratique, ce n'est pas une bonne idée, et ces nombreux bugs d'affichage que tu rencontres selon les navigateurs en sont la preuve. Il serait plus logique de placer la #sidebar en float right et le #content en "normal". (en plaçant la sidebar avant le content dans le code).

[Webdesigneuse]

_AT_Rizer... eh bien je suis graphiste à la base voilà pourquoi j'use de méthode qui me permettent de garder une cohérence dans le design. J'aurais pu effectivement utilisé des images, mais j'avais aussi envie de tester cette méthode que je n'avais jamais utilisé jusque là. Normalement tout le monde doit être capable de voir cette typo puisqu'elle est sur mon serveur et se charge dès lors que le navigateur accepte la méthode que j'utilise (@fonte-face). Si je m'en tiens à mes recherches, aujourd'hui cette méthode semble acceptée par toutes les dernières versions des navigateurs courants (FF, Opera, Chrome, Safari, IE) ... Aujourd'hui, de mon côté tout est ok sur tous ces navigateurs (sauf les personnes qui sont sous Linux à priori).

_AT_Ernestine... Merci pour ta remarque je ne sais pas si j'aurai le temps de tout revoir le script du CMS (la mise en ligne officielle du site est la semaine prochaine et mon temps -en bénévolat - est également très limité ) ... en outre, chez moi ça fonctionne nikel sous tous les navigateurs cités plus haut, testés sur 4 ordi différents... sauf l'ordi qui est sous Linux. Tu es sous Linux aussi ?

Du coup, ma question aujourd'hui est plutôt : pourquoi diable ça pose soucis chez vous puisque ça marche pour tous les navigateurs chez moi ? (sauf celui sous Linux qui ne reconnait pas ma typo).

[Ernestine]

Bonjour,

La mise en page est cassée sur Chrome et sur Firefox (pas testé sur les autres navigateurs). Parce que la police "Angelina" n'est pas chargée. Si ça fonctionne chez toi et nulle part ailleurs, c'est pour la simple et bonne raison que le fichier de police est installé sur ton propre ordinateur ! Il est donc évident que chez toi la police Angelina soit appliquée, puisque le navigateur va la chercher non pas sur le serveur, mais sur ton disque dur. Pour te mettre dans les conditions réelles d'un internaute, tu devrais supprimer la police de ton ordi (sur Windows les polices sont dans le répertoire c:/windows/fonts).

Un simple font-face ne suffit pas pour que la police se charge correctement partout. L'utilisation de cette propriété est un vrai chantier, qui demande notamment de convertir la police dans différents formats de fichiers de police : ttf, eot, woff, svg. Au final tu devrais avoir un truc du style :

@font-face {
	font-family: 'Angelina';
	src: url('font/Angelina-webfont.eot');
	src: local('☺'), url('font/Angelina-webfont.woff') format('woff'), url('font/Angelina-webfont.ttf') format('truetype'), url('font/Angelina-webfont.svg#webfontGQeY2qCy') format('svg');
	font-weight: normal;
	font-style: normal;
}

Un article qui fait le tour de la question : http://sixrevisions.com/css/font-face-guide/

En résumé : embarquer une police de caractères non standard n'est pas une mince affaire. Mais c'est tout à fait possible, il suffit de bien suivre les recommandations

Cela dit, il n'est pas normal que la mise en page soit toute cassée juste pour une question de police. Que la police de caractères ne se charge pas correctement, c'est une chose dommage mais acceptable, mais qu'elle démolisse toute la mise en page, là par contre, ça la fout mal !

[Webdesigneuse]

Merci Ernestine voilà qui apporte de l'eau à mon moulin... par contre ce qui est étrange, c'est que j'ai testé sur plusieurs ordi (4 !) et tous n'ont pas cette typo perso installée sur leur disque dur...

Je cours lire l'article et rectifier mon script !

Modifié 5 Octobre 2011 par Webdesigneuse

[Rizer]

Bonjour,

La mise en page est cassée sur Chrome et sur Firefox (pas testé sur les autres navigateurs). Parce que la police "Angelina" n'est pas chargée. Si ça fonctionne chez toi et nulle part ailleurs, c'est pour la simple et bonne raison que le fichier de police est installé sur ton propre ordinateur ! Il est donc évident que chez toi la police Angelina soit appliquée, puisque le navigateur va la chercher non pas sur le serveur, mais sur ton disque dur. Pour te mettre dans les conditions réelles d'un internaute, tu devrais supprimer la police de ton ordi (sur Windows les polices sont dans le répertoire c:/windows/fonts).

Un simple font-face ne suffit pas pour que la police se charge correctement partout. L'utilisation de cette propriété est un vrai chantier, qui demande notamment de convertir la police dans différents formats de fichiers de police : ttf, eot, woff, svg. Au final tu devrais avoir un truc du style :

@font-face {
	font-family: 'Angelina';
	src: url('font/Angelina-webfont.eot');
	src: local('âº'), url('font/Angelina-webfont.woff') format('woff'), url('font/Angelina-webfont.ttf') format('truetype'), url('font/Angelina-webfont.svg#webfontGQeY2qCy') format('svg');
	font-weight: normal;
	font-style: normal;
}

Un article qui fait le tour de la question : http://sixrevisions.com/css/font-face-guide/

En résumé : embarquer une police de caractères non standard n'est pas une mince affaire. Mais c'est tout à fait possible, il suffit de bien suivre les recommandations

Cela dit, il n'est pas normal que la mise en page soit toute cassée juste pour une question de police. Que la police de caractères ne se charge pas correctement, c'est une chose dommage mais acceptable, mais qu'elle démolisse toute la mise en page, là par contre, ça la fout mal !

Voilà ce qu'on attendez!

Merci pour cette excellente remarque !

[Webdesigneuse]

Bon... eh bien rien de mieux :/ c'est même pire ! car maintenant, même chez moi, ça bug sous FF... Je vais devoir faire un choix qui ne m'enchante pas... bouhh ! j'aurai pourtant aimé réussir ce petit défit