28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

C'est la première fois que je poste un problème ici car je n'en peux plus : je n'arrive pas à trouver où est mon erreur sous Internet Explorer dans la conception d'un mailing que je suis en train de concevoir.

Tout roule sous Ffox et Chrome mais IE m'ennuie et a littéralement fait exploser mes images dans le bas de mon mailing Smiley decu

Voici l'URL de l'engin : http://www.rhumantic.net/bsh/espresso_mailing/espresso_mailing.html

Ca fait maintenant 3 jours que je rame là-dessus et je m'adresse à vous pour que vous puissiez m'éclairer et me dire ce que je fais mal pour arriver à un résultat pareil Smiley decu

Tout est construit en tableaux pour être envoyé par mail évidemment ...

Merci d'avance pour votre aide

Ohmygoodweb
Administrateur
Bonjour,

tu veux dire la version web d'un mailing ? Parce que perso j'utilise un client mail ou un webmail pour lire un mailing Smiley smile

IE : quelle(s) version(s) ?? IE6 et IE7 je viens de voir que ça explose Smiley jap . Et pour IE8, IE9 ?

Est-ce que tu as essayé de voir si un contenu trop large à gauche ne repousserait pas l'image à droite ? Pour ça, colorer le fond de chaque contenu à gauche avec du red, yellow, pink, etc vérifier si un contenu fait pas beaucoup plus que prévu puis supprimer la moitié de ce contenu, vérifier. Si toujours pas OK, enlever l'autre moitié du contenu et vérifier, etc.

Tester l'effet de hasLayout méthode mégabourrine (uniquement pour des tests et pas en production !) :
* {
  zoom: 1;
}

(c'est pas moi, c'est IE6/7 le bourrin Smiley biggol )

Ha ! C'est une table ton contenu texte.
Imbriquée Smiley confus (qu'est-ce qui t'empêche de découper en plus de cellules ta table principale ? Avec une seule table ça marcherait dans IE)
Flottante : il comprend ça IE ? Remplace par un div de même dimension et flottant également.

Sinon tu as un maximum d'images sans attribut alt. Les attributs alt vide c'est pas pour les chiens ... Smiley decu
Merci bcp pour ta réponse je vais essayer de faire ça en une table, mais il faut bien que ma tasse "fit" bien avec l'autre image de ma tasse côté droit : ) j'vais m'en sortir Smiley smile je reviens vers vous si j'ai encore des soucis, j'vais tenter avec une seule table plutôt que des tables imbriquées qui posent des soucis visiblement Smiley smile
Bonjour,

je viens de regarder ton tableau et c'est un travail assez bourrin que tu as fait la.
Tu as appliqué un colspan="3" sur la dernière ligne et ajouté un tableau au milieu, alors que tu aurais pu mettre trois colonnes, celle du milieu ayant plusieurs lignes, tout bêtement..
Idem pour la ligne juste au-dessus, tu as gardé tes trois colonnes et mis une image dans chacune, tu aurais pu mettre ici ton colspan="3" et ne mettre qu'une image..

De plus, tu utilises beaucoup de css inline inutile (des float, display etc..). L'intérêt d'un tableau (car il y en a) c'est que les cellules ont un display bien particulier (table-cell) qui empêche les éléments de s'enfuir ou se promener, ce qui rend inutile des float et display..

Consulte également ce lien :
http://www.campaignmonitor.com/css/
Ca pourrait t'aider.

Le mailing est un domaine bien particulier, et il faut savoir que même si les navigateurs ont une incidence sur la lecture des mailings, c'est avant tout les clients de messagerie qui causent des différences d'interprétation. Plutôt que d'optimiser ton mailing sur les navigateurs, tu devrais lancer des tests sur diverses boites mails, ouvertes sous divers clients, afin de constater le rendu.

Dernier conseil : quasiment aucun client de messagerie n'affiche les images lors de l'ouverture d'un mailing, il est donc absolument nécessaire de renseigner l'attribut "alt" pour chacune de tes images, faut de quoi il ne s'affichera pas grand chose..

Bon courage!!
Modifié par Ten (17 Feb 2011 - 14:22)