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, 5 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., 5 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, 5 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., 5 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, 5 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, 5 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, 5 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, 5 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, 5 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, 5 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, 5 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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098