Discussion :

[Rmodevv]

Bonjour à tous,

dans l'emailing que je suis en train de programmer, j'ai à un moment deux éléments disposés l'un en dessous de l'autre comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a target="_blank" href="#"><img style="margin:0; padding:0; float:right;" src="adressedemonimage"/></a>
<div style="width:585px; height:40px; margin:0; padding:5px;">contenu de la div</div>

Normalement mon image et ma div devrait se "coller", se superposer verticalement sans laisser d'espace blanc entre eux, ce qui est le cas dans la version navigateur de mon emailing ainsi que sur certains clients mail (laposte, free), mais par exemple gmail et yahoo mail, eux, me mettent un petit espace blanc d'environ 2 ou 3 px de hauteur entre les deux éléments, et ça vient casser l'effet graphique, comme ceci :



Normalement les logos facebook twitter et google+ sont collés à la ligne noire juste en dessous.

Avez-vous une idée de ce qui peut générer ce petit espace ?

Merci anticipé pour vos retours,

Rom.

[Rmodevv]

Est-il possible de déplacer ce topic dans le forum http://www.developpez.net/forums/f81...ing/e-mailing/ svp ?

Merci par avance.

[customer34]

Il semble que le problème vienne de ta div, enlève le padding

[Rmodevv]

Bonjour,

merci pour ta réponse, j'ai essayé mais cela ne change rien.
Et comme l'emailing s'affiche correctement en mode navigateur je ne pense pas que ça vienne de ça.

J'ai l'impression que certains webmails attribuent d'office un tout petit padding à certain éléments comme <table> et <div>.
On a systématiquement ce petit écart de quelques px lorsqu'on déclare une div ou une table, du moins dans mon cas ça m'est arrivé plusieurs fois.

EDIT : Pour info, ce mini padding s'enlève lorsqu'on met un float: sur l'élément en question, moi ça a résolu mon problème maintenant tout s'affiche correctement

Bonne journée !

[Candygirl]

Bonjour,

Le code donné est insuffisant; il ne correspond pas à l'image qui montre 3 liens-images et pas juste un.

Le reste du code est essentiel pour déterminer s'il s'agit peut-être de l'espace prévu pour les jambages (sur les moteurs de rendu en mode strict), en-dessous de la baseline sur laquelle serait posée l'une des tes images restées dans le flux.

[Rmodevv]

Effectivement je n'avais pas mis tout le code, le voici :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<a target="_blank" href="#"><img style="margin:0; padding:0; float:left;" src="facebook.png"/></a>
<a target="_blank" href="#"><img style="margin:0; padding:0;" src="twitter.png"/></a>
<a target="_blank" href="#"><img style="margin:0; padding:0; float:right;" src="google.png"/></a>
<div style="width:585px; height:40px; margin:0; padding:5px;">
<p style="margin:0 auto; width:533px;">mon texte</p>
</div>

Vous remarquerez que l'image du milieu ne possède pas de float.
Depuis que j'en ai mis un ça a résolu le problème (sur certains webmails seulement, mais pas tous).
J'ai donc maintenant ce code-ci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<a target="_blank" href="#"><img style="margin:0; padding:0; float:left;" src="facebook.png"/></a>
<a target="_blank" href="#"><img style="margin:0; padding:0; float:left;" src="twitter.png"/></a>
<a target="_blank" href="#"><img style="margin:0; padding:0; float:left;" src="google.png"/></a>
<div style="width:585px; height:40px; margin:0; padding:5px; margin-top:40px;">
<p style="margin:0 auto; width:533px;">mon texte</p>
</div>

Maintenant les 3 images sont en float:left et la div possède un margin-top de 40px pour réaligner le tout.
Malgré ça hotmail continue de me mettre un petit espace blanc, ci-dessous un imprime écran avec firebug ouvert.
La 1ère image c'est quand je survol le liens <a> avec mon curseur (vous voyez le petit espace blanc juste en dessous) - Ca fait pareil pour les 2 autres liens twitter et google+.
La deuxième c'est lorsque je survol la div.
La 3ème c'est pour que vous voyiez à quoi cela ressemble lorsque ça ne bug pas





---

[Candygirl]

Vous remarquerez que l'image du milieu ne possède pas de float.

Oui c'est bien ce que je soupçonnais; une image sans float et donc sans le display:block induit

Maintenant les 3 images sont en float:left et la div possède un margin-top de 40px pour réaligner le tout.

Le margin-top n'est pas des plus judicieux. Tu peux tester avec deux autres options (tes 3 images ont bien la même hauteur ?):

- laisser tes 3 float mais attribuer un clear:both à ton div plutôt qu'un margin-top

- laisser la dernière image sans float:left et lui attribuer un display:block à la place.

[Rmodevv]

Ok merci beaucoup pour ces pistes !
Je vais essayer demain et vous retiens au courant

Bonne fin de journée !

Rom.

[Rmodevv]

Bonjour,

J'ai enlevé le margin-top et l'ai remplacé par un clear:both sur ma div.
A ce stade cela ne change rien dans hotmail.

J'essaies donc d'enlever le float:left sur la dernière image (google+) et le remplace par un display:block, voici ce que ça donne (le logo google+ colle enfin au footer !) :


J'ai intégré volontairement firebug à l'imprime écran pour bien que l'on voit que les deux float:left sur les deux premières images ont disparu, ils sont bien dans mon code d'origine pourtant, mais j'ai l'impression qu'hotmail les fait sauter. D'ailleurs, si via firebug je rajoute ces float:left qui ont sauté pour tester, l'emailing s'affiche alors correctement :



Ta solution est donc bonne mais malheureusement hotmail aime pas les float visiblement. N'y a t-il pas un attribut équivalent, ou un moyen de forcer les float ?

En tout cas merci encore, on avance

[Candygirl]

Tu as déclaré un doctype ?

Autrement essaie ceci:
- float left sur tous les a et display:block sur toutes les images.

Si cela ne passe pas sur Hotmail, essaie:
- float:left sur les 3 a et sur les 3 images

(Je précise que je ne me suis jamais amusée à faire des mail en format html, c'est juste des pistes en fonction de quelques souvenirs du fonctionnement des vieux IE ^^)

[Rmodevv]

Non aucun doctype, sur un webmail c'est le doctype du webmail qui est pris en compte non ?

J'essaies l'histoire des float et reviens ici assez rapidement, merci !

[Rmodevv]

- float left sur tous les a et display:block sur toutes les images.

Cela m'aligne les 3 images à gauche mais verticalement, les unes en dessous des autres.

- float:left sur les 3 a et sur les 3 images

Cela réaligne les 3 images horizontalement mais en faisant réapparaître ce petit espace blanc juste avant le footer... Je vais chercher encore un peu sinon tant pi, il n'y a qu'hotmail qui bug...
EDIT : En fait ça marche très bien mais c'est toujours le même problème, hotmail supprime tout seul les 6 float. Si je les remet manuellement dans firebug tout s'affiche très bien. On ne peut donc à priori pas compter sur les float dans ce cas précis.

Merci beaucoup pour tes pistes en tout cas !

[Candygirl]

Non aucun doctype, sur un webmail c'est le doctype du webmail qui est pris en compte non ?

Si tu envoie depuis un webmail en cc le code ds le corps du message alors j'imagine que oui. J'ai lu qq part que le doctype pouvait influencer sur le rendu de certains webmail,encore faut-il pouvoir le spécifier toi-même...

Cela réaligne les 3 images horizontalement mais en faisant réapparaître ce petit espace blanc juste avant le footer...

Alors essaie en ajoutant un vertical-align:bottom sur les images.