OUTLOOK border css

Hi,
I'm a french webdesigner,

i'm designing and coding a mobile newsletter, and i have an issue with Outlook 2010...
When i add a border to a table (width = 600px) with CSS, the table's width increase to 602px...
With the others webmails or software, the table keeps his initial width...

Can someone help me to fix it ?

Thanks !!



<table width="600" border="0" cellspacing="0" cellpadding="0" bgcolor="#F2F7F6" style="borde:1px solid #C3C9C9;" align="center" class="resize">
        <tr>
          <td><table width="579" border="0" cellspacing="0" cellpadding="0" class="resizesommaire">
              <tr>
                <td width="17" class="hide"></td>
                <td width="392" class="resizesommaire2" valign="top"><table width="392" border="0" cellspacing="0" cellpadding="0" class="resize300">
                    <tr>
                      <td class="resize300" height="20" style="font-size:14px; color:#5A7F97; font-family:Arial, Helvetica, sans-serif;"><br />
                        <strong>Sommaire</strong></td>
                    </tr>
                    <tr>
                      <td><table width="392" border="0" cellspacing="0" cellpadding="0" class="resize300" bgcolor="#E4EDED">
                          <tr>
                            <td width="90" height="5"></td>
                            <td width="290"  class="resize288"></td>
                          </tr>
                          <tr>
                            <td width="90" height="25" valign="top" style="font-size:13px; color:#333; font-family:Arial, Helvetica, sans-serif;" class="rubriques">&nbsp;<strong>&Agrave; la une</strong></td>
                            <td width="290"  class="resize288" valign="top" style="font-size:13px; color:#333; font-family:Arial, Helvetica, sans-serif;"><img src="https://cic-news.fr/img/1091/newsletters/particuliers/arrowsomnewscic.jpg" width="9" height="7" />Fiscalit&eacute; : les dispositifs dont il faut profiter</td>
                          </tr>
                          <tr>
                            <td width="90" valign="top" style="font-size:13px; color:#333; font-family:Arial, Helvetica, sans-serif;" class="rubriques">&nbsp;<strong>Actualit&eacute;s</strong></td>
                            <td width="290" class="resize288" valign="top" style="font-size:13px; color:#333; font-family:Arial, Helvetica, sans-serif;"><img src="https://cic-news.fr/img/1091/newsletters/particuliers/arrowsomnewscic.jpg" width="9" height="7" />20 conseils pour r&eacute;duire votre budget auto<br />
                              <img src="https://cic-news.fr/img/1091/newsletters/particuliers/arrowsomnewscic.jpg" width="9" height="7" />20 conseils pour r&eacute;duire votre budget auto<br />
                              <img src="https://cic-news.fr/img/1091/newsletters/particuliers/arrowsomnewscic.jpg" width="9" height="7" />20 conseils pour r&eacute;duire votre budget auto</td>
                          </tr>
                          <tr>
                            <td width="90" height="5"></td>
                            <td width="290"  class="resize288"></td>
                          </tr>
                        </table></td>
                    </tr>
                  </table></td>
                <td width="16" class="hide"></td>
                <td width="154" class="resizesommaire3" valign="top"><table width="154" border="0" cellspacing="0" cellpadding="0" class="resizesommaire3">
                    <tr height="20">
                      <td height="20" style="font-size:14px; color:#5A7F97; font-family:Arial, Helvetica, sans-serif;"><br />
                        <strong>CIC Contacts</strong></td>
                    </tr>
                    <tr>
                      <td align="center"><div class="mobile_only" style="width:0px; overflow:hidden;float:left;display:none"> <img src="https://cic-news.fr/img/1091/newsletters/particuliers/conseilmobilenewscic.jpg" width="226" height="50" /> </div>
                        <div class="desktop_header"> <img src="https://cic-news.fr/img/1091/newsletters/particuliers/conseillernewscic.jpg" width="154" height="77" /> </div></td>
                    </tr>
                  </table></td>
              </tr>
            </table></td>
        </tr>
      </table>
jodygibbons, 4 years ago

Hi Juxoly,

Maybe specify a table width of 598px to accomodate the 2px border? It sounds like it works fine in most clients but Outlook has a list of its own quirks. This might be a solution.

Cheers
Jody

Alex I., 4 years ago

If you're using borders in the CSS box model you'll have all kinds of issues.

Whenever I have to do borders in a table I just put some coloured TD's in. For example, your table is 600 pixels wide right?

Start with a row, with 1 cell inside that's 1 pixel tall and colspanned across 3 cells that has the background colour of your border.
Next row; 1 pixel wide cell with the background colour of your border, 598 pixel wide cell with your table of content nested inside it, 1 pixel wide cell with the background colour of your border
Finish with a row, with 1 cell inside that's 1 pixel tall and colspanned across 3 cells that has the background colour of your border.

Here's a basic example of the code with no padding cells inserted;

<table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="3" width="600" height="1" bgcolor="#000000"></td>
    </tr>
    <tr>
        <td width="1" bgcolor="#000000"></td>
        <td width="598" valign="top" align="left">
            <table width="598" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="top" align="left">Content of your table here</td>
                </tr>
            </table>
        </td>
        <td width="1" bgcolor="#000000"></td>
    </tr>
    <tr>
        <td colspan="3" width="600" height="1" bgcolor="#000000"></td>
    </tr>
</table>

Any questions? Let me know!

P.s if you found this helpful, be sure to follow my blog at http://teamemail.wordpress.com/

juloxy, 4 years ago
Alex I. :

If you're using borders in the CSS box model you'll have all kinds of issues.

Whenever I have to do borders in a table I just put some coloured TD's in. For example, your table is 600 pixels wide right?

Start with a row, with 1 cell inside that's 1 pixel tall and colspanned across 3 cells that has the background colour of your border.
Next row; 1 pixel wide cell with the background colour of your border, 598 pixel wide cell with your table of content nested inside it, 1 pixel wide cell with the background colour of your border
Finish with a row, with 1 cell inside that's 1 pixel tall and colspanned across 3 cells that has the background colour of your border.

Here's a basic example of the code with no padding cells inserted;

<table width="600" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td colspan="3" width="600" height="1" bgcolor="#000000"></td>
    </tr>
    <tr>
        <td width="1" bgcolor="#000000"></td>
        <td width="598" valign="top" align="left">
            <table width="598" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td valign="top" align="left">Content of your table here</td>
                </tr>
            </table>
        </td>
        <td width="1" bgcolor="#000000"></td>
    </tr>
    <tr>
        <td colspan="3" width="600" height="1" bgcolor="#000000"></td>
    </tr>
</table>

Any questions? Let me know!

P.s if you found this helpful, be sure to follow my blog at http://teamemail.wordpress.com/

In my case, i can't use more <td>. I can't use only 3 <td> in my nasted table, because i need to
adapt it for mobile devices such iphone...So, i need to use css border.

Also i can't use rowspan and colspan because there aren't understandable by some french ESP...

The issue is that Outlook add 2 px, and an ESP like Gmail count them directly without adding 2 px...
That mean in Outlook, a table with a width of 600 px and a border of 1 px around it, will let me some space of 600 px, on the contrary of Gmail which will let me some space of 598px.

Thx for your helps, but i 've already try them. :)

If anyone have an other solutions, please let me know.

Juloxy

Alex I., 4 years ago

Your ESP doesn't support row and colspan? Sounds like you need to switch to CM!

Sorry I couldn't be more help.

juloxy, 4 years ago

I've got an other issue with outlook 2007...

Does someone know why the margin around an image doesn't work with outlook 2007 ?
With Gmail, the margin works correctly...

Maybe, the issue is in my code :

<td width="562" class="resize300" valign="top" style="font-size:14px; color:#597F97; font-family:Arial, Helvetica, sans-serif;"><img src="https://cic-news.fr/img/1091/newsletters/particuliers/visuunenewscic.jpg" align="left" class="resizeimg" style="display:block; margin:0 10px 10px 0;" />Et eodem impetu Domitianum praecipitem per scalas.<br />
                  <br />
                  Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit : et Vrsicinum primum ad se venire summo cum honore mandavit ea<br />
                  <br />
                  Cum haec taliaque sollicitas eius aures everberarent expositas semper eius modi rumoribus et patentes, varia animo tum miscente consilia, tandem id ut optimum factu elegit : et Vrsicinum primum ad se venire summo cum honore mandavit ea specie ut pro rerum tunc urgentium captu disponeretur concordi.<br />
                  <br /></td>

There is a way to fix it ?

Thanks for your help !

Juloxy

jodygibbons, 4 years ago

Hi Juxoly,

Perhaps try an empty <td width=10></td> in between in image and text? and do away with the image margins altogether.

so in essence:
<td width="224" height="148">image element</td>
<td width="10" height="148"></td>
<td width="328" height="148">text elements</td>

Hope this might help

Cheers
Jody

juloxy, 4 years ago
jodygibbons :

Hi Juxoly,

Perhaps try an empty <td width=10></td> in between in image and text? and do away with the image margins altogether.

so in essence:
<td width="224" height="148">image element</td>
<td width="10" height="148"></td>
<td width="328" height="148">text elements</td>

Hope this might help

Cheers
Jody

Hi Jody,

thanks for your comment , but i can't use three <td>, beacause the text must follow the image shape in only one <td>.

I add the 10px in each image directly :( It's a crappy way, but it works.

But i don't understand why in the Campaign Monitor CSS guide, margin is supported by Outlook 2007/2010. Maybe i use it wrong...
If someone know the way to apply correctly margin to an image in Outlook 2007/2010... :)

Thx for your helps !

juloxy, 4 years ago

Hi Campaign monitor,

Does someone from Campaign monitor can explain me how to apply correctly a margin with css, which works in Outlook 2007/2010 ?

<td width="562" class="resize300" valign="top" style="font-size:14px; color:#597F97; font-family:Arial, Helvetica, sans-serif;"><img src="https://cic-news.fr/img/1091/newsletters/particuliers/visuunenewscicn.jpg" align="left" class="resizeimg" style="display:block; margin: 0 10px 10px 0;" />Et eodem impetu Domitianum praecipitem per scalas.</td>

I've tried also with margin-left, margin-right, etc...It doesn't work anymore :)

Thx a lot

Juloxy

roshodgekiss roshodgekiss, 4 years ago

Hi juloxy, thanks for posting this question here. You're correct - Outlook doesn't support margins around images, despite what the official MSDN documentation says. I've updated our CSS guide to mention this - thanks for pulling us up on this point.

jodygibbons is on the mark here - placing a table around an image and either using a cell, or cell widths to create margins/padding is the most reliable way to work around this. Either that, or adding white space to your image.

Thanks again for helping us keep our docs updated - we appreciate it!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
juloxy, 4 years ago
roshodgekiss :

Hi juloxy, thanks for posting this question here. You're correct - Outlook doesn't support margins around images, despite what the official MSDN documentation says. I've updated our CSS guide to mention this - thanks for pulling us up on this point.

jodygibbons is on the mark here - placing a table around an image and either using a cell, or cell widths to create margins/padding is the most reliable way to work around this. Either that, or adding white space to your image.

Thanks again for helping us keep our docs updated - we appreciate it!

Hi Roshodgekiss,
i'm glad to help you for the css guide !
if you look for a permanent tester, I'll be happy  to come and live in Sidney ! :)

roshodgekiss roshodgekiss, 4 years ago

Thanks juloxy - keep an eye on our jobs page, you never know what may open up :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098