newsletter ne passe pas avec Netscape 7.0

[guillaumepali]

Bonjour,

Je souhaiterais un conseil en matière de CSS, au sujet d'une Newsletter que j'ai réalisée pour une connaissance et qui passe bien sous ie mais pas sous Netscape.

Je commence en matière de mise en page CSS et j'ai voulu expérimenter en réalisant une Newsletter sans tableaux. J'ai adopté un principe de mise en page simple :

1/ environ 800 px en largeur pour ne pas gérer les pb de taille d'écran

2/ positionnement de mes images et texte avec "float:left;" ligne par ligne et tenant compte de la largeur précitée c'est à dire en utilisant tte la largeur.

C'est plutôt basique et ça marche sous ie mais cela ne fonctionne pas sous Netscape 7.0 !. Les images sont déplacées comme si il n'y avait pas assez de largeur.

J'ai cherché une soluce et j'ai regardé le problème de mesure de div entre ie (width incluant padding et border) et les autres navigateurs mais apparemment le problème ne vient pas de là.

Si vous voulez bien jeter un coup d'oeil :

http://home.tele2.fr/erwansite/Marjo_newsletter/index.htm

et pour la css

http://home.tele2.fr/erwansite/Marjo_newsletter/example[1].css

Si quelqu'un a une idée sur la question, il éclaircira ma lanterne sur le positionnement par css (plutôt noir de noir pour l'instant).

Merci

[Perrine]

Bonjour guillaumepali

Je tente un début de réponse avec mes maigres connaissances sur le sujet

Pour le texte Et si vous faisiez le pont à AVIGNON ?!, il est préférable d'utiliser l'élément h1 pour bien définir que c'est un titre.

Pas la peine du div et le i sera spécifiée dans ta CSS

Tous les attributs align des div doivent être spécifiés dans la feuille de style.

Tes textes doivent être contenus par des balises p. Pour l'instant, ils sont contenus dans des balises div.

Les div id="ligne" disparaissent donc (puisque le premier est un h1 et le 2ème un p.

Déjà, ça va permettre de rendre quelque chose de plus cohérent dans Netscape je pense

Ensuite, il faut voir comment gérer les blocs oranges contenant les images.

Pour les 2 premières, je verrai bien quelque chose comme ça :

<img ... / id="1">le 11 Novembre<img ... id="2"/>

Dans la CSS, tu peux jouer avec les padding et margin pour bien placer les img dans le paragraphe.

Tu pourras aussi traiter dans un <p> la dernière image de la newsletter.

Pour les autres images, je suivrai le même chemin que toi : un div pour chaque bloc orange contenant une image et du texte.

J'espère que ça pourra déjà t'aider ... y'a des plus balèses que moi sur ce forum, j'espère que j'ai pas dit de boulettes

PS : mais le plus important, c'est que tu restructures ton doc à base de h1 et p

[Kimberlyclarko]

Bonjour Guillaumepali et bienvenue !

C'est bien de tester sur les navigateurs, mais n'oublies pas de tester également sur les différents webmails (Yahoo!, Hotmail, Wanadoo, Tiscali, Free).

Le mieux est d'analyser la base des destinataires, d'en sortir les webmails les plus représentatifs, et de tester au moins sur ceux là.

Bon courage

[Igor]

A propos de courriel, html et css il y a cet article traduit sur Pompage.net:

Quand CSS et Courriel s'embrassent sous le gui.

[guillaumepali]

Merci pour vos réponses,

Effectivement kimberlyclarko je n'ai pas testé avec différents Webmails la newsletter...

les Webmails souffrent-ils des mêmes différences que les navigateurs où ont ils leurs propres différences ? et si oui quelle est la source officielle des caractéristiques propres à chaque Webmail ? En fait où trouve-t-on les sources des standards Netscape ou IE par exemple pour arrêter de travailler par essais-erreurs mais plutot dans le cadre formel de chaque navigateur.

Azon,

J'ai bien lu tes remarques concernant mes DIV inappropriés (remplacent des P ou des H1 entre autres), je vais m'y attacher mais penses tu que cela peut-être la cause d'un mauvais affichage sous Netscape 7.01 ?

Je suis d'accord que le conteneur n'est pas le bon mais la boite selon moi devrait quand même se placer à coté de la boite précédente en positionnement flottant ...

Merci encore pour vos remarque et Merci au site d'exister !

[guillaumepali]

Merci Igor pour le lien... Edifiant et très instructif !

Je devrais voir ces problèmes par la suite,

Seulement moi cela ne marche pas même lorsque j'affiche

ma page via le Navigateur Netscape (sur un site Web)

[Perrine]

Effectivement, cela ne résoudra pas les problèmes mais ça permet d'y voir plus clair

Je me replonge donc dans ton code et la CSS.

Le div global "Inhalt" fait 780px de largeur. Or, les 2 div "ponts" font chacun 300px de largeur + les 2 padding de 10 px soit 20px en tout donc un div "pont" fait 320 px de large.

Entre les 2 ponts, tu insères un div CelluleTexte qui fait 160px. Donc ça déborde

Si on calcule, la première ligne fait 800px de largeur pour un conteneur qui fait 780px.

La différence qui existe entre IE et Netscape vient de la façon dont les navigateurs calculent leur largeur.

Netscape prend le width et ajoutent les padding/margin ce qui donne une largeur globale de 300px + 20px soit 320px.

IE prend le width et considère que dedans sont inclus les margin/padding donc 300px.

Voici des explications : http://openweb.eu.org/articles/dimensions_boites_css/

Donc en gros, dans IE, il y a la place de mettre les 2 div "ponts" et le div "CelluleTexte" sur la même ligne. Dans Netscape, c'est pas possible car trop large donc il fait passer le 2ème div "pont" à la ligne et comme il est positionné avec un float, c'est la balise suivante qui prend sa place sur la 1ère ligne. Je pense que c'est ça mais j'avoue que ça me rassurerait que quelqu'un confirme

[Kimberlyclarko]

les Webmails souffrent-ils des mêmes différences que les navigateurs où ont ils leurs propres différences ? et si oui quelle est la source officielle des caractéristiques propres à chaque Webmail ? En fait où trouve-t-on les sources des standards Netscape ou IE par exemple pour arrêter de travailler par essais-erreurs mais plutot dans le cadre formel de chaque navigateur.

<{POST_SNAPBACK}>

Sur le web, on tatonne toujours un peu :-)

Mais il y a quand même les recommandations du W3C, et le fameux validateur W3C qui permet de vérifier que ton code est valide.

Pour les webmails, il n'y a rien à ma connaissance. En revanche, imaginons que tu sois un gros annonceur, et que tu achètes une campagne email chez Yahoo. Yahoo! s'occupe du routage, mais tu dois lui livrer la créa aux formats txt et HTML. Dans ce cas, Yahoo! te fournit quelques spec techniques pour s'assurer que le mail passera bien sur les adresses en _AT_yahoo.fr

Je dois en avoir qui trainent quelque part, dès que je les retrouve, de mettrai ce post à jour.

Personnellement, je trouve qu'il est aujourd'hui risqué d'utiliser des CSS dans une newsletter (certains webmails suppriment le mot "style"). Autant je défend à fond la séparation du contenu et de la mise en page pour le Web, autant pour l'email les paramètres à prendre en compte sont trop importants et les résultats trop aléatoires : pour bien faire, le nombre de tests à effectuer est impressionnant - clients mails, webmails, navigateur, plateforme... De plus la valeur ajoutée est moindre que pour le web (on ne met pas le contenu d'un email à jour...)

A part ca, concernant la largeur de ton mail, n'oublies pas que les webmails ont généralement déjà une colonne à gauche, voire une autre à droite. A 800px de large, ton mail va être en partie hors du cadre. Mieux vaut rester dans les 500-600px de large.

Bien sûr, tous ces conseils ne s'appliquent qu'à des mails très graphiques et dont l'objectif est de vendre quelque chose. Dans le cas de newsletters rédactionnelles une mise en page linéaire voire au format texte uniquement suffit..

[guillaumepali]

Merci pour toutes ces infos,

Effectivement la démarche d'une Newsletter se complique ...

Azon,

concernant ton calcul de largeur de boite,

Je n'ai pas la même lecture de l'article que tu cites (cf article sur le DocType switching: http://openweb.eu.org/articles/dimensions_boites_css/)

les navigateurs récents (IE 5 Macintosh, Netscape 6+ et autres navigateurs basés sur Gecko, Opera 7.x...) exploitent la technique du DocType Switching, qui permet ici de choisir le modèle appliqué, en fonction de la Déclaration de Type de Document (DTD) spécifiée en tête de la page à afficher. Pour résumer, ces navigateurs récents opteront pour :

le modèle Microsoft en l'absence de DTD, ou en présence d'une DTD HTML 4.01 transitional sur le modèle : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  ;

or dans mon cas c'est le modèle :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ;

qui est utilisé donc c'est le modèle de boite Microsoft qui devrait être utilisé par Netscape 7.01, et Width chez Microsoft , 300px, inclue le padding déclaré par la suite(280px+20px de padding par boite).

Je devrais donc obtenir la même taille de boite et la même disposition que dans ie.

Modifié 13 Novembre 2004 par guillaumepali

[Perrine]

Effectivement, je n'ai pas fait attention. N'ayant pas Netscape, je me suis basée sur les différences que je voyais entre IE et Firefox ... d'où mon erreur de jugement. Je pensais que Netscape et FF réagissaient de la même façon.

Toutes mes excuses donc pour ces explications erronées

(Ceci dit, la page affichée dans Firefox est totalement différente de celle d'IE)

[Perrine]

Je viens d'installer Netscape ... et la page s'affiche de la même façon que dans FF.

Je crois que je ne vais pas t'être de grande aide vu mes connaissances

Ceci dit, as-tu quand même essayé de diminuer la largeur des div ?

Désolée et bonne chance