?
Solved

CSS in Form Email Template

Posted on 2009-02-10
8
Medium Priority
?
313 Views
Last Modified: 2012-05-06
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

0
Comment
Question by:vetted
  • 4
  • 4
8 Comments
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 80 total points
ID: 23601560
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
 

Author Comment

by:vetted
ID: 23601679
Is this my only option?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23601740
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:vetted
ID: 23603720
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
 
LVL 30

Expert Comment

by:LZ1
ID: 23603851
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
 

Author Comment

by:vetted
ID: 23604338
That didn't work.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23604443
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
 

Accepted Solution

by:
vetted earned 0 total points
ID: 23622674
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

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question