Aller au contenu

Mauvais rendu de mon site sous différents navigateurs

Webdesigneuse

Par Webdesigneuse
dans (X)HTML et CSS

 Partager

Sujets conseillés

Webdesigneuse

Webdesigneuse

Posté
Posté (modifié)

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é par Webdesigneuse
playmannba

playmannba

Posté
Posté

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

Webdesigneuse

Posté
  • Auteur
Posté

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...

Rizer

Rizer

Posté
Posté

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

Certainement un problème de CSS !

Rizer

Rizer

Posté
Posté

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

Tabouet

Posté
Posté

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é

Invité

Posté
Posté

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

Webdesigneuse

Posté
  • Auteur
Posté

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).

chrome.jpg

Webdesigneuse

Webdesigneuse

Posté
  • Auteur
Posté

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

Rizer

Posté
Posté

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

Ernestine

Posté
Posté

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

Webdesigneuse

Posté
  • Auteur
Posté

_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

Ernestine

Posté
Posté

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

Webdesigneuse

Posté
  • Auteur
Posté (modifié)

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é par Webdesigneuse
Rizer

Rizer

Posté
Posté

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

Webdesigneuse

Posté
  • Auteur
Posté

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 ^^

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...