28173 sujets

CSS et mise en forme, CSS3

Hello,

Je viens de me heurter à un problème assez bizarre. Une collégue m'a envoyé un mail avec un fichier .html en pièce jointe, lorsque j'ouvre le fichier avec IE6, je me suis rendu compte de gros problèmes d'affichage. Alors que le fichier original, ouvert sur le poste de cette même collégue, avec IE6 n'avait lui, aucun problème.

Après investigation, j'en suis arrivé aux conclusions suivantes :

Lorsqu'Outlook envoie un mail avec un fichier .html en pièce jointe, il rajoute automatiquement au début du code la ligne suivante
<!-- saved from url=(0022)http://internet.e-mail -->


Pourquoi ? Parce que c'est une MOTW, une Mark Of The Web, une sombre idée saugrenue de Microsoft.
Ca aurait pu être utile (et encore), si ça avait été bien implémenté.
Plus d'infos ici : http://msdn2.microsoft.com/en-us/library/ms537628.aspx

Le soucis c'est que même s'il est indiqué dans la définition du MSDN que le code s'ajoute juste après le <!DOCTYPE, il n'en est rien, Outlook le mets juste avant.

Et comme vous le savez sans doute, si le <!DOCTYPE n'est pas le premier ordre d'une page, IE6 passe automatiquement en quirksmode, même si le <!DOCTYPE précise autre chose...

Bref, résultat, mes newsletters forwardées par Outlook subissent de grosses altérations sur leur mise en page.

La seule solution que je trouve pour le moment, c'est de dire à mes collégues soit de donner le lien de la newsletter en ligne, soit de zipper le fichier avant de l'envoyer, soit d'utiliser un autre client mail qu'Outlook...
Parce qu'il est hors de question que je recode toutes mes pages pour du quirksmode bien évidemment ^^

Si jamais vous avez une autre solution, je suis toujours preneur, rien qu'un moyen de désactiver l'ajout de cette MOTW sur les Outlooks de mes collégues ça me suffirait Smiley lol

Ah et pour info je suis tombé sur ce post aussi :
http://www.velocityreviews.com/forums/t369618-p-lt-saved-from-url0014aboutinternet-gt--vs.html
Qui a le même problème que moi, et qui n'a pas trouvé d'autres solutions non plus (et arretez-vous à la page 2, les pages 3 et 4 finissent en réglement de compte...)
Modifié par Tymlis (28 Sep 2007 - 14:23)
Tymlis a écrit :
mes newsletters forwardées par Outlook [...]

Parce qu'il est hors de question que je recode toutes mes pages pour du quirksmode bien évidemment ^^

Heu... ce sont des pages destinées à être affichées dans des navigateurs web, ou bien des newsletters au format HTML qui seront affichées par des clients mail et webmails?

Parce que les CSS (et le mode standard...) dans les clients mail, c'est pas encore ça, et ça va pas s'améliorer de sitôt.
Hello,
Je pense qu'Office et le html n'ont jamais été très bons copains...
Spécialement Outlook, qui n'est pas prévu pour composer en html.

Ceci dit, pour les newsletter de mon client qui ne dispose que d'Outlook, j'affiche la page sous IE, je copie tout le contenu de la page (ctrl+A ctrl+C) et je le colle dans un mail vide (au format hml, evidemment).
Ainsi, le code source du mail commence bien par Doctype.

Pour info, comment font tes destinataires qui ne disposent pas d'un client mail qui interprete le html ? c'est prévu ?
Alors... Pour la petite histoire et placer ça dans le contexte :
Pour simplifier, j'ai créé un système qui permet de générer des newsletters au format html directement à partir de modèles. L'utilisateur n'a qu'à taper son texte dans les champs prévus, ça les ajoute dans le modèle aux endroits qui vont bien, et ça génére une page web avec le contenu de la newsletter completée. La mise en page de tout ça se fait donc au moyen de feuilles de style.

Après ça le système permet l'envoi de cette newsletter à une liste de destinataires. Le mail est envoyé en multipart, une version text/plain et une version text/html (qui contient le code de la page ainsi générée), comme ça si les clients ne lisent pas le html, ils ont quand même l'information.

Toutes les images et feuilles de style de la version html sont distantes, directement sur notre serveur.
En haut de la newsletter se trouve aussi le trés utile lien "Si la newsletter ne s'affiche pas correctement, cliquez ici", pour la voir directement dans une vraie fenetre du navigateur.
Parce que bon, on peut vraiment pas faire autant de choses dans un mail que dans une page web (pas de filter: pour IE -donc pas de png-, pas de javascript, sans compter toutes les altérations au code que font les différents clients mails et les webmails... Bref je suis tout à fait au courant que c'est pas encore au point ^^)

Mais au final ma question ne porte même pas sur ce point. En fait ma collégue a ouvert la page dans son navigateur, tout s'affiche comme il faut, elle affiche la source, enregistre la source au format html sur son pc. Quand on regarde ce fichier, il s'affiche parfaitement (les images/feuilles de styles étant distantes, y a pas de problème.)
C'est ensuite quand elle me l'envoie en fichier joint par mail avec Outlook, juste comme ça, le fichier que je reçois a été alteré et s'est vu rajouter la ligne que je citais plus haut...

Donc pour répondre à vos questions respectives, il ne s'agit pas ici d'envoyer un mail au format HTML, mais juste de joindre un fichier html, manuellement, à un mail sous Outlook.

Le problème en situation réelle qu'il s'est passé c'est qu'on avait donc une sauvegarde de la newsletter sur le bureau (fichier html, enregistré depuis la source d'un fichier en ligne), qui je le rappelle s'affiche trés bien.
Et quand on l'a envoyé à un client "manuellement" comme fichier joint, il nous a dit que la mise en page été partie en sucette (la faute au MOTW).

On cherche donc un moyen pour que cette MOTW n'apparraisse pas, et seulement le zippage semble fonctionner pour le moment.

Voili voilou, j'espère avoir été un peu plus clair
Smiley langue
Modifié par Tymlis (28 Sep 2007 - 15:10)
Oui, c'est tout à fait clair. Par contre, ça m'étonne que l'on puisse envoyer un e-mail text/html dont la bonne mise en page dépend du rendu en mode Quirks ou standard. Vu les lacunes des clients mail (qui empirent, côté microsoft, avec Outlook 2007...), ça me semble suicidaire.

Mais peut-être s'agit-il uniquement de différences minimes?

Edit: tu connais l'article suivant?
A Guide to CSS Support in Email: 2007 Edition
Modifié par Florent V. (28 Sep 2007 - 15:23)
Florent V. a écrit :
Oui, c'est tout à fait clair. Par contre, ça m'étonne que l'on puisse envoyer un e-mail text/html dont la bonne mise en page dépend du rendu en mode Quirks ou standard. Vu les lacunes des clients mail (qui empirent, côté microsoft, avec Outlook 2007...), ça me semble suicidaire.

Et bien, aussi surprenant que cela puisse paraitre, je n'ai jamais eu de problème d'interprétation du doctype dans les mails en text/html. Je ne peux bien sur pas tester sous tout les clients mails différents mais sous Outlook, Thunderbird et Foxmail ça passe (mais chacun de ces trois là modifie le code à sa façons...)
Enfin, si la mise en forme est vraiment trop cassée, les gens ont quand même le reflexe de cliquer sur le lien pour la voir normalement.

Cela dit... J'ai jamais regardé sous Outlook 2007... Tu me fais peur, je vais jeter un oeil à ton lien...




Smiley sweatdrop
Oh mon dieu...
a écrit :
Sadly, the most significant of these changes was in the wrong direction, with Microsoft's recent decision to use the Word rendering engine instead of Internet Explorer in Outlook 2007.
Considering Outlook's 75% domination over corporate email, you've got little choice but to bow down and stick to tables and basic CSS for all your email templates.

Bon, je reviens, je vais me pendre.

a écrit :
Very limited support in Notes and Outlook 2007, the most significant of which is no support for the <float> property, generally rendering CSS based layouts useless. Outlook 2007's padding support also leaves a lot to be desired.

*agonise encore un peu plus*



Plus sérieusement, j'irai me pendre une autre fois...
Revenons en à mon sujet de pièce jointe voulez-vous, parce que là je sens que je suis limite nervous-breakdown Smiley lol
Modifié par Tymlis (28 Sep 2007 - 15:42)
Ben voilà, ça c'est éclairci, et comme ça j'ai gâché ta journée. Smiley lol

Pour le sujet de départ, tout ce que je peux dire c'est merci pour l'info, tout à fait intéressante. Par contre, je ne saurais pas trop quoi faire pour éviter ça, mis à part ce que tu proposes.
Peut-être transformer la newsletter html en PDF et l'envoyer en piece jointe ?

(c'est vendredÿ, j'ai le droit) Smiley biggrin
Hmm, si t'as un bon moyen de passer de l'html au pdf je suis aussi preneur. Le seul que j'ai est un "simulateur d'impression" qui va mettre ça dans un fichier pdf au lieu de l'envoyer à l'imprimante mais... la mise en page pour le pdf est plutot casse-gueule (Firefox gère trés mal les overflow:hidden et les background-image).

Donc nan, on m'a déjà tué aujourd'hui, essayez pas de m'achever Smiley lol
Modifié par Tymlis (28 Sep 2007 - 16:47)
Oh, j'vais lire ça alors.
J'avais déjà vu Prince, mais le logiciel étant payant, je ne m'y étais pas attardé plus longtemps. Ca va mériter que j'y repasse un plus de temps alors Smiley cligne