Email Template - Messing up CSS formating.

ku

kujina 14 Nov, 2008

The CSS of my email form just wont work atfer it goes in the Email Template, I paste it into the html box, everything looks good for a "moment" in the wysiwyg window then my form looks plain. I've sent myself the form too.
I've got Chrono Contact 3.0 Stable.
Chrono Contact 2.5 V2.5_J1.5_RC3.1 was fine with my same code.

Here's how it looks in the Email Template creator after I paste it in.


<div id="holder">
<div class="form_elements"><fieldset><legend>1. Subjects</legend>
<div class="form_content"><span class="asterix">*</span>Subject course you wish to apply for:<br />
<table border="1" cellspacing="0" width="0" bgcolor="#ffffff" bordercolor="#666666">
<tbody>
ETC...

Gr

GreyHead 14 Nov, 2008

Hi kujina,

The CSS won't be recognised unless it's inside <style type="text/css" >. . .</style> tags

AND you can't rely on mail readers to use CSS in style tags correctly - safer to put it in the html tags directly even if this means repeating a lot of it :-(

Bob

ku

kujina 14 Nov, 2008

Hi kujina,

The CSS won't be recognised unless it's inside <style type="text/css" >. . .</style> tags

I did, thats why I'm really puzzeled, here is how it looked in its original form before it gets turned into what you see in my first post.

<style type="text/css">

#holder {
width:900px;
text-align:left;
margin:0 auto;

}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

.form_elements_center {
margin:20px;
text-align:center;
}

.form_elements {
margin:20px;
}

.form_content {
margin:5px;
}

.form_content_center {
margin:5px;
text-align:center;
}

input, textarea, select {
font-family:Arial, Helvetica, sans-serif;
}
table {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

fieldset {
position:relative;
background:#dbe3c5;
padding-top:20px;
}

legend {
color:#FFFFFF;
font-size:12px;
position:absolute;
top:-10px;
background:#7E8961;
border:1px solid #000;
padding:2px 5px;
font-weight:bold;
}

.asterix {
color:#FF0000;
}

input {
background-color: #FFFFFF;
}

.centerlegend {
color:#FFFFFF;
font-size:12px;
position:absolute;
top:-10px;
background:#7E8961;
border:1px solid #000;
padding:2px 5px;
font-weight:bold;
left: 300px;
}

</style>

<div id="holder">
<div class="form_elements">
<fieldset>
<legend>1. Subjects</legend>
<div class="form_content">
<span class="asterix">*</span>Subject course you wish to apply for:<br />
<table width="0" border="1" cellspacing="0" bordercolor="#666666" bgcolor="#FFFFFF">
<tr>
<td>{course}</td>
</tr>
</table>
</div>
ETC...

Gr

GreyHead 14 Nov, 2008

Hi Kujina,

Hmm. Are you using the on-line editor? That may well 'tidy' up the html. Try disabling it so that you can edit the raw html.

Bob

ku

kujina 14 Nov, 2008

I input the code in the html pop-up box, where else can you?

Gr

GreyHead 14 Nov, 2008

Hi kujina,

In the Setup Emails tab you can set Use Template Editor to *no* and that will avoid the editor messing up your code.

Bob

Forums

Email Template - Messing up CSS formating.