Table border sur appli mail de iPhone
Bonjour à tous,
Je planche depuis 3 jours sur un problème que je rencontre uniquement sur l'application mail de l'Iphone. Le code fonctionne sur toutes les autres plateformes email.
Voici l'effet voulu:
Pièce jointe 141949
Malheureusement, sous Iphone, j'ai une ligne entre mes 2 tableaux:
Pièce jointe 141950
J'ai vu que c'était un problème qui pouvait se résoudre en mettant le contenu de cellule dans un tableau avec bgcolor mais en faisant les 2 rowspans nécessaires, j'ai un décalage de 1px sur la droite.
Voici le code:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
| <table width="100%" border="0" style="border-collapse:collapse;">
<tr>
<td align="middle" style="border-collapse:collapse;">
<table width="550px" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td valign="top" align="left" width="550" style="border-collapse:collapse;">
<table width="550px" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<!-- ROW 1 -->
<tr>
<td colspan="6" valign="top" align="middle" width="550" height="33" style="border-collapse:collapse; padding-right:15px;border-left:1px solid #ffffff;">
<p align="middle"><font face="verdana" size="1" color="#000000" align="middle">
To view this email as a web page, go <a href="%%view_email_url%%" style="text-decoration: none; color: #ed1c2a;">here.</a>
</font></p>
</td>
</tr>
</table>
<!-- /ROW 1 -->
</td>
</tr>
<tr>
<td valign="top" align="left" width="550" style="border-collapse:collapse;">
<table width="550px" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<!-- ROW 2 -->
<tr>
<td valign="top" align="left" width="15" height="33" style="border-collapse:collapse;border-left:1px solid #ffffff;">
<img border="0" src="image-blanche.jpg" style="vertical-align:bottom;" />
</td>
<td valign="top" align="left" width="105" height="33" style="border-collapse:collapse;">
<img border="0" src="image-rouge-haut.gif" style="vertical-align:bottom;" />
</td>
<td valign="top" align="left" width="15" height="33" style="border-collapse:collapse;">
<img border="0" src="image-blanche.jpg" style="vertical-align:bottom;" />
</td>
<td valign="top" align="left" width="107" height="33" style="border-collapse:collapse;">
<img border="0" src="image-violet-haut" style="vertical-align:bottom;" />
</td>
<td colspan="2" valign="top" align="left" width="308" height="33" style="border-collapse:collapse;">
<img border="0" src="image-blanche.jpg" style="vertical-align:bottom;" />
</td>
</tr>
</table>
<!-- /ROW 2 -->
</td>
</tr>
<tr>
<td valign="top" align="left" width="550" style="border-collapse:collapse;">
<table width="550px" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<!-- ROW 3 -->
<tr>
<td valign="top" align="left" width="15" height="72" style="border-collapse:collapse; border-top:1px solid #808080;border-left:1px solid #808080;">
<img border="0" src="iimage-blanche.jpg" style="vertical-align:bottom;" />
</td>
<td valign="top" align="left" width="105" height="72" style="border-collapse:collapse; border-top:1px solid #ed1c2a">
<img border="0" src="image-rouge-bas" style="vertical-align:bottom;" />
</td>
<td valign="top" align="left" width="15" height="33" style="border-collapse:collapse; border-top:1px solid #808080">
<img border="0" src="image-blanche.gif" style="vertical-align:bottom;" />
</td>
<td valign="top" align="left" width="107" height="72" style="border-collapse:collapse; border-top:1px solid #3e2781">
<img border="0" src="image-violet-bas" style="vertical-align:bottom;" />
</td>
<td colspan="2" valign="top" align="left" width="308" height="33" style="border-collapse:collapse; border-top:1px solid #808080;border-right:1px solid #808080;">
<img border="0" src="image-blanche.jpg" style="vertical-align:bottom;" />
</td>
</tr>
<!-- /ROW 3 -->
</table>
</td>
</tr>
</table>
</td>
</tr>
</table> |
Si vous avez une idée, je suis preneur !
Merci bcp
