SOS mon site est déformé sur explorer !

Bonsoir à tous,
Je suis novice dans la création de site et pourtant je viens de mettre en ligne mon site pro fait sur dreamweaver (sur mac) et son accessibilité est bonne sur safari et firefox mais complètement déformé sur explorer (titre décalé, photos flous, ect....) SOS Je voudrais comprendre pourquoi et que faire... Je vous remercie par avance et j'espère une réponse.
Merci. Voici mon site photographe-reportage2mariage.com

Salut,

C'est probablement parce que tu as calé tous tes éléments, ou la plupart d'entre eux avec du CSS. IE 6 les gèrent très mal, alors que Safari et Firefox - par exemple - supportent plutôt bien le CSS.

Tu as deux solutions - voire trois - sois tu te passes de certaines fonctions CSS que tu as utilisées mais que IE ne gère pas. Sois tu fais plusieurs versions de ton site : dont une notamment pour IE, à ce moment tu dois te lancer dans un script qui détecte le navigateur du client (donc tech php ou coldfusion, asp, etc. = programmation), sois tu annonces la couleur tout de go sur une page d'accueil : genre ce site sera "mieux vu avec Firefox" en proposant les liens en téléchargement.

A noter que IE 8, la dernière version, ne pose pas ce genre de problème.

Donc ne panique pas, tu rencontres un problème récurrent pour tous les webmasters, mais tu vas devoir faire un choix. Fais le bon .

Force les gens à DL et à changer leurs habitudes. Ne développe pas pour IE6. Ceux qui sont largués seront toujours largués, c'est pas à toi de faire du social, au contraire, tu dois tirer les applications par le haut...

tipi a écrit :
Bonsoir à tous,
Je suis novice dans la création de site et pourtant je viens de mettre en ligne mon site pro fait sur dreamweaver (sur mac) et son accessibilité est bonne sur safari et firefox mais complètement déformé sur explorer (titre décalé, photos flous, ect....) SOS Je voudrais comprendre pourquoi et que faire... Je vous remercie par avance et j'espère une réponse.
Merci. Voici mon site photographe-reportage2mariage.com

Ce serait tout de même parfait si tu nous donnais un liens vers ton site, en effet tu a sans doute une solution a ton probléme et nous saurons j' espéres t'y aider.

Par contre tu parles d'images floues ?? la par contre le navigateur n'a rien a voir dans l'affaire

tipi a écrit :
son accessibilité est bonne sur safari et firefox mais complètement déformé sur explorer

Voilà une bonne nouvelle mais ça n'a rien à voir avec l'accessibilité.

dourveil a écrit :
Sois tu fais plusieurs versions de ton site : dont une notamment pour IE, à ce moment tu dois te lancer dans un script qui détecte le navigateur du client (donc tech php ou coldfusion, asp, etc. = programmation), sois tu annonces la couleur tout de go sur une page d'accueil : genre ce site sera "mieux vu avec Firefox" en proposant les liens en téléchargement.

Est-ce vraiment un bon conseil ?

Bonjour Arsene,

Effectivement tes images sous IE sont pixellisées (bords découpés). Sous FF, Safari et Opéra ça passe très bien. Je ne suis pas un pro mais il me semble que cela provient du fait que ces images soient au format JPEG. Le format GIF ne pose en général pas ce genre de problème.

A+
DonVtt

Merci pour votre volonté de m'aider...
Je souhaite que mon site soit visible correctement par tous les navigateurs étant donné que c'est un site pro... Dourveil me parle d'un script qui détecte les navigateurs.. sa programmation est elle possible dans ce qui a été déjà crée ? si oui est-ce compliqué à mettre en place ? Peut-être avez vous une autre solution ? Pour les photo je vais déjà essayé le conseil d'Arsene... Pour FoxLeRenard je met en lien mon site http://www.photographe-reportage2mariage.com En attente de vos réponses merci encore.
tipi

Salut,

pour le titre il suffit de spécifier les marges : par exemple #Titre p { margin: 40px 0 }

pour les images cela vient peut-être du fait que tu les redimensionnes dans le html. Par exemple le 2 en haut à droite fait en réalité 281*259 et tu forces l'affichage à 148*126 (ce qui est de toute façon une mauvaise idée puisque le poids de la page tient compte de la vraie taille des images).

Heyoan a écrit :
Salut,
pour le titre il suffit de spécifier les marges : par exemple #Titre p { margin: 40px 0 }

Pour le titre il faudrait surtout utiliser en html une balise de titre hn

Igor a écrit :
Pour le titre il faudrait surtout utiliser en html une balise de titre hn

Ah oui tiens !

Je remarque aussi que tu laisses des espaces dans tes noms de pages ou images; ce qu'il ne faut jamais faire.

Il faut absolument que tu redimentionnes tes images avec un logiciel tierce (en ligne, t'as http://www.splashup.com/ ) aussi et non avec dreamweaver, car tes images gardent le même poids. Sur ta page nos missions.html (qui devrait être nosmissions.html ou missions.html) t'as une petite image de 2 Mo et une autre de 1,8 Mo. Deux images qui ne devraient peser que quelques Ko normalement.

Pour le script de detection du navigateur, je pense que tu peut tout simplement le faire en javascript. Et a la place de faire deux site, tu fait un fichier CSS different special pour IE. Comme ce que je te met ci-dessous :

<script type="text/javascript">
//Verification du navigateur
if((navigator.appName.substring(0,9))=="Microsoft" ) //Si Internet Explorer
{
          document.write('<link href="data/css/TonStyleIE.css" rel="stylesheet" type="text/css" />')
}
else //Sinon, pour Firefox, et les autre...
{
          document.write('<link href="data/css/TonStyleNormal.css" rel="stylesheet" type="text/css" />')
}
</script>

et tu place tout ca dans le head de tes pages.
Modifié par Lust (28 Apr 2009 - 17:47)

@Lust > Non !

Si on a besoin de faire cela on utilise les commentaires conditionnels.

Je ne connaissait pas... Désoler, je suis toujours passer par du js.

dourveil a écrit :
sois tu te passes de certaines fonctions CSS que tu as utilisées mais que IE ne gère pas.

Éventuellement.

dourveil a écrit :
Sois tu fais plusieurs versions de ton site

Non.

dourveil a écrit :
ce site sera "mieux vu avec Firefox" en proposant les liens en téléchargement

Non. (Sauf site perso, mais certainement pas pour un site pro.)

dourveil a écrit :
Force les gens à DL et à changer leurs habitudes. Ne développe pas pour IE6. Ceux qui sont largués seront toujours largués, c'est pas à toi de faire du social, au contraire, tu dois tirer les applications par le haut...

Non, pour des raisons évoquées dans d'autres sujets (politiques de systèmes d'information, utilisateur pas en capacité de mettre à jour leur navigateur, utilisateurs qui ignorent même le concept de «navigateur web» et qui se contentent d'utiliser «internet»).

Si je peux me permettre :

- tes alt des images sont inutiles car ne sont pas représentatifs des images en cas de non chargement de celles-ci (images décoratives), met donc des alt vides, ou alors des alt apportant une vraie information.
Exemple : "cible" pour ton image de cible.

- Tu définis trop de polices de typographie différentes : Arial, Times New Roman, Lucida, Lucida Console...

- La taille de la police est définie en unité fixe (pixels), ce qui rendra très mal d'une résolution d'écran à l'autre, provoquant des dépassements de conteneur ou des textes illisibles.

- Ton design manque un peu d'aération (la faute au positionnement fixe et aux tableaux...)

Messieurs,
Je vous remercie pour vos conseils. Je vais retravailler mon site en suivant vos remarques. Pour le message d'Arthur69, j'ignore ce qu'est un alt... je pensais que varier la typo n'avait pas de conséquence et enfin que la taille de la police était toujours en pixel (je ne vois pas comment faire pour améliorer la lisibilité de mes textes) Pardonné mon incompétence, mais j'ai appris dreamweaver sur un bouquin... de plus... tipi est une fille et blonde de surcroît !!!! merci à tous

Bonjours à tous,
Je reviens vers vous pour savoir pourquoi lorsque je mets des commentaires conditionnels pour que mon site puisse être non déformé sur explorer... c'est sur safari que cela ne va plus.. merci

tipi a écrit :
Je reviens vers vous pour savoir pourquoi lorsque je mets des commentaires conditionnels pour que mon site puisse être non déformé sur explorer... c'est sur safari que cela ne va plus..

C'est à priori sans rapport. Sauf si le code utilisé pour les commentaires conditionnels est invalide, n'est pas interprété comme un commentaire, et pose alors un problème. Difficile à dire sans voir les pages en question.

tipi a écrit :
Je souhaite que mon site soit visible correctement par tous les navigateurs étant donné que c'est un site pro...

Auquel cas, la logique aurait voulu que l'on fasse appel à un professionnel.

Bonjour,
pour ma part rien remarqué de particulier, mais je suis étonné que tu mettes 2 charset ?

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"  />

Tu n'as rien remarqué FoxLeRenard, car j'ai retiré les commentaires conditionnels et le script qui m'a été conseillé.. cela déformait le site sur safari. Pour les deux charsets j'ai suivi les conseils d'adobe ... faut il en retirer un ? Penses tu que le fait d'avoir beaucoup de "position absolue" dans les pages justifie que je ne passe pas le test du validateur htlm ?
merci