CODEWITHSUNDEEP
ioscssiphoneemailhtml-email
yab86
yab86

Reputation: 405

Image in Email Signature on iPhone

I am creating an code for an email signature. The image is never left align on the email client on my iPhone and I have no idea why. 

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="left" style="padding:0;margin:0;height:45px;width:230px;">
                                <ul style="padding:0;margin:0;height:45px;width:230px;">
                                    <li style="text-align:left;margin:0;padding:0;height:45px;width:230px;">
                                        <a target='_blank' href="https://www.mypage.com" style="margin:0;padding:0;width:230px;height:45px;">
                                            <img style="padding:0;margin:0;" height="45px" width="230px" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
                                        </a>
                                    </li>
                                </ul>
                            </td> ......

The problem is visualized on the image below: enter image description here

Is there something I can do?

Thanks for helping me.

Best regards, Yab86

Upvotes: 0

Views: 305

Answers (1)

Ted Goas
Ted Goas

Reputation: 7567

If the linked <img> is the only thing in that <td>, can you remove the <ul>? Or is there another reason the list is there?

Email clients do weird things to margin and padding of block level elements like <ul> and<li>, sometimes even if they're reset with inline CSS. If you don't need a list here, why introduce the complexity?

<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
    <tr>
        <td height="45" width="230" align="left" style="padding:0;">
            <a target='_blank' href="https://www.mypage.com">
                <img align="left" style="display: block; margin:0;" height="45" width="230" src="https://www.mypage.com/logo.gif" alt="Logo mypage" />
            </a>
        </td>
    </tr>
</table>

Upvotes: 1

Related Questions