Search code examples
htmlcssoutlookelectronic-direct-mail

How to solve outlook client css layout change properties?

I created an eDM for client that only want it to be sent out from outlook desktop client. I have some issue with the css or rather I do not know what is the error. When I open up the eDM in web browser everything was ok and even insert the code in outlook client but when i receive the eDM itself the css layout have a slight change.

The Following image is what i have archive and open with web browser enter image description here

This image shows the result after i sent and receive

enter image description here

As you can see the different is the line spacing there How do i solve this error ? here is my code for that part. I am using Outlook 2013 Thanks

<table class="content" style="text-align: left; border-collapse:collapse;" width="240" cellpadding="0" cellspacing="0">
                            <tr class="grad" style="display:block;">
                                <td background="http://i1042.photobucket.com/albums/b423/Zayle_Ong/Whats%20new_zpsocpwuf08.png" height="36" valign="top" style="background-repeat: no-repeat; overflow:hidden;width:242px;display:block;">
                                    <!--[if gte mso 9]>
                                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:240px;height:36px;background-color:white;background-repeat: no-repeat;">
                                      <v:fill type="frame" src="http://i1042.photobucket.com/albums/b423/Zayle_Ong/Whats%20new_zpsocpwuf08.png" color="#E7E7E9" border="0" />
                                      <v:textbox inset="0,0,0,0">
                                    <![endif]-->

                                    <table style="color: white; font-size: 15px; display:block; Margin-left:12px;" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td width="0" height="4" style="line-height:1px;font-size:1px;">
                                                <font style="font-size:1px;display:none !important;display:none;">&nbsp;</font>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>What's New</td>
                                        </tr>
                                    </table>
                                    <!--[if gte mso 9]>
                                      </v:textbox>
                                    </v:rect>
                                    <![endif]-->
                                </td>
                            </tr>
Solution

  • Sadly the ans to this is Outlook client mail do not support background images, and it only support most basic html Css codes. by saying that use Inline styling.

    Solution to have editable text over the image is to set plain background colors.