CSS in Form Email Template

I have a webpage that uses CSS for a rounded box.  I am also trying to use this rounded box in an email template and cannot get it to work.  Below in the code is the CSS code and then the HTML code that I am using.  The rounded boxes are just not showing up at all, it's as if it's not there.  I am very new to email templates!

I've heard that <div> aren't good in email templates but I need a rounded corner box.  Any other suggestions?
<html>
<style type="text/css">
/* CSS for the box starts here */
 
.rbroundbox { background: url(https://forms.vetted-intl.com/images/simple_background.gif) repeat; }
.rbtop div  { background: url(https://forms.vetted-intl.com/images/simple_top_left.gif) no-repeat top left; }
.rbtop      { background: url(https://forms.vetted-intl.com/images/simple_top_right.gif) no-repeat top right; }
.rbbot div  { background: url(https://forms.vetted-intl.com/images/simple_bottom_left.gif) no-repeat bottom left; }
.rbbot      { background: url(https://forms.vetted-intl.com/images/simple_bottom_right.gif) no-repeat bottom right; }
 /* height and width details */
.rbtop div, .rbtop, .rbbot div, .rbbot {
        width: 740px;
        height: 14px;
        font-size: 1px;
        margin: 0 auto;
        text-align: left;
}
.rbcontent  { margin: 0 14px; }
.rbroundbox { width: 740px; margin: auto; }
        
.rbroundbox td {
 
                        background:#DBE5F1;
                        }
 
/* HTML for the box starts here */
 </style>
<body>
 
<br />
<!--Box Starts Here -->
 
 
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
   
        
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td>Some Info Here</td></tr>
<tr><td>Some Info Here</td></tr>
<tr><td>Some Info Here</td></tr>                        
</table></div>
        
 
<div class="rbbot"><div></div></div>
</div>
        
<!--Box Ends Here -->
 
</body></html>

Open in new window

vettedAsked:
Who is Participating?
 
vettedConnect With a Mentor Author Commented:
I just gave up and used a background color. Those links weren't very helpful, I had already found the first one and viewed that.  The second one are templates and for this particular instance I need a template branded for my company.
0
 
LZ1Connect With a Mentor Commented:
You could make an image it and use it as a background.  If you manually insert the image, you won't be able to type over it.
0
 
vettedAuthor Commented:
Is this my only option?
0
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
LZ1Commented:
That is all I can think of.  Unless another expert has something better.  I think either an image with text, or an html table with text would work.  
Depends on what your comfort level is with either one.
0
 
vettedAuthor Commented:
Sorry for the delay.  I've decided to go with the background image but I cannot get it to work.  I'm just trying to create a table wrap (consisting of the background image) and then have another table inside that main table that contains my content.  Here's my code:

I also want the image centered and no repeat but don't know how to do that either.

I have an external css sheet for this but it didn't seem to work with the css stylesheet so I decided to put it in the email template but no luck there either.
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" background="https://mysite.com/images/myimage.gif)">
 
<table width="600" border="0" align="center" cellpadding="4" cellspacing="0" bgcolor="C4B584">	
<tr><td><
Content Here
Content Here
</td></tr>
</table>
 
</table>

Open in new window

0
 
LZ1Commented:
Try this:
<table width="100%" height="187" border="1" align="center" cellpadding="0" cellspacing="0" background="https://mysite.com/images/myimage.gif)">
  <tr>
    <td colspan="3"><table width="600" border="0" align="center" cellpadding="4" cellspacing="0">
      <tr>
        <td colspan="3" bgcolor="#C4B584">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>

Open in new window

0
 
vettedAuthor Commented:
That didn't work.
0
 
LZ1Commented:
My e-mail HTML is a little rusty.  But try these links.  They may get you pointed better in the right direction than I can.
http://www.sitepoint.com/article/code-html-email-newsletters/
http://www.campaignmonitor.com/templates/  
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.