We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

CSS in Form Email Template

vetted
vetted asked
on
Medium Priority
338 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

Comment
Watch Question

LZ1
Top Expert 2011
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.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Is this my only option?
LZ1
Top Expert 2011

Commented:
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.

Author

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

LZ1
Top Expert 2011

Commented:
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

Author

Commented:
That didn't work.
LZ1
Top Expert 2011

Commented:
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/  
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.
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.