Discussion :

[xev74]

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 :

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

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

[NoSmoking]

Bonjour,
perso je commencerais par supprimer tous le px qui traine dans tes styles inline
par exemple : <table width="550px" devient <table width="550"

[xev74]

Je viens d'enlever les px, pas de changement concernant la ligne visible sur l'application mail de l'Iphone.

[NoSmoking]

Je trouve ta structure un poil complexe, TABLE dans TABLE dans TABLE, tu devrais peut être essayer de l'alléger grace à l'utilisation des rowspan et/ou colspan.

Le rendu des TABLEs n'est jamais une chose aisée pour les navigateurs.