Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question CSS table border extending over set width in HTML Email

    I am creating an HTML email and would like rounded corners. These don’t seem to appear in emails or even in IE (even with the –ms-border-radius applied)….

    I decided to use images for the top and bottom of the email to get the results I was looking for.

    Everything seems to show okay, except for the middle section, which is not an image. This section throws the right border off to the right a few pixels ONLY in the email version. This happens no matter what is in the middle table (I took all the code out and just put "..." in to show the problem) It shows up correctly when viewed in a browser.

    An image as appears in outlook: http://i79.photobucket.com/albums/j1...5/throwoff.jpg

    Code:
    <!--TOP ROUNDED CORNER IMAGE-->
    <table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round1.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round1.png" />
        <![endif]-->
    </td></tr></table>
    
    <!-- MIDDLE SECTION WITH REAL BORDERS-->
    <table border="0" cellspacing="0" cellpadding="0" width="650" bgcolor="#ffffff" style="color: #797979; text-decoration: none; border-right: 2px solid #c8c8c8; border-left: 2px solid #c8c8c8; background-color: #ffffff; z-index: 100;">
    <tr><td width="27" colspan="2">...<br /></td>
    <td width="596" valign="top"></td>
    <td width="27" colspan="2"><br /></td></tr></table>
    
    
    <!--BOTTOM ROUNDED CORNER IMAGE-->
    <table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round2.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
    <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round2.png" />
    <![endif]-->
    </td></tr></table>

    Thanks for any help!

  • #2
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Removed "width=650" on the table and that fixed it.

  • #3
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by DejavuPoison View Post
    I am creating an HTML email and would like rounded corners. These don’t seem to appear in emails or even in IE (even with the –ms-border-radius applied)….

    I decided to use images for the top and bottom of the email to get the results I was looking for.

    Everything seems to show okay, except for the middle section, which is not an image. This section throws the right border off to the right a few pixels ONLY in the email version. This happens no matter what is in the middle table (I took all the code out and just put "..." in to show the problem) It shows up correctly when viewed in a browser.

    An image as appears in outlook: http://i79.photobucket.com/albums/j1...5/throwoff.jpg

    Code:
    <!--TOP ROUNDED CORNER IMAGE-->
    <table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round1.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
        <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round1.png" />
        <![endif]-->
    </td></tr></table>
    
    <!-- MIDDLE SECTION WITH REAL BORDERS-->
    <table border="0" cellspacing="0" cellpadding="0" width="650" bgcolor="#ffffff" style="color: #797979; text-decoration: none; border-right: 2px solid #c8c8c8; border-left: 2px solid #c8c8c8; background-color: #ffffff; z-index: 100;">
    <tr><td width="27" colspan="2">...<br /></td>
    <td width="596" valign="top"></td>
    <td width="27" colspan="2"><br /></td></tr></table>
    
    
    <!--BOTTOM ROUNDED CORNER IMAGE-->
    <table border="0" cellspacing="0" cellpadding="0" width="650" style="background-image:url(../images/round2.png);width:650px;height:21px;" valign="top"><tr><td width="650" height="21">
    <!--[if gte mso 9]>
        <v:image xmlns:v="urn:schemas-microsoft-com:vml" style='behavior:url(#default#VML);display:inline-block;width:650px;height:21px;position:absolute;top:0;left:0;border:0;z-index:-1;' src="../images/round2.png" />
    <![endif]-->
    </td></tr></table>

    Thanks for any help!
    Have you considered rounding the borders not as an image but just in the css property?

    Code:
    .nameoftextcontainer
    {
    border-radius: 10px; (or so, increase/decrease to achieve desired effect)
    }

    should do it I think.

  • #4
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I normally use CSS properties. The problem is that IE cannot see rounded corners and they don't seem to show up in HTML emails.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •