CSS for email Template not working

Question

Hi , i got a problem with my email template. I just cant get my email to show my style i created.

This is what i got in my Template:

<style>
#email_container{
    width: 600px;
    height:auto;
    min-height: 380px;
    background-color: #f5f5f5;
    border-radius: 20px;
    border: 2px solid #008bd0;
}

#email_header{
    background-color: #008bd0;
    width:602px;
    height: 70px;
    position: relative;
    left: 0px;
    top: -3px;
    font: 25px verdana, sans-serif;
    color: white;
    text-align: center;
    line-height: 60px;
    border-radius: 20px 20px 0px 0px;
    }

#field{
    position: relative;
    left: 20px;
    top: 10px;
    width: 560px;
    height: auto;
    min-height: 360px;
    margin-bottom: 20px;
}
.field_label{
    font: 20px verdana, sans-serif;
    color: #008bd0;
}

#field_name{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_adresse_strasse{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_adresse_plz{
    position:relative;
    top:-25px;
    left: 100px; 
}
#field_adresse_ort{
    position:relative;
    left: 185px; 
    top: -50px;
}
#field_adresse_land{
    position:relative;
    top: -50px;
    left: 100px; 
}

#field_telefon{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_email{
    position:relative;
    top: -25px;
    left: 100px; 
}

#field_nachricht{
    position:relative;
    width:auto;
    max-width: 520px;
    height: auto;
    min-height: 80px;
    top: 0px;
    left: 10px;
    background-color: white;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.1) inset;
    padding: 10px;
}

.normal_t{
    font: 20px verdana, sans-serif;
    color: #808080; 
    overflow: hidden;
}
</style>

<div id="email_container">
    <div id="email_header">Kontaktanfrage</div>
    <div id="field">
        <div class="field_label">Name:</div>
        <div id="field_name" class="normal_t">{vorname} {nachname}</div>
        <div class="field_label">Adresse:</div>
        <div id="field_adresse_strasse" class="normal_t">{strasse}</div>
        <div id="field_adresse_plz" class="normal_t">{plz}</div>
        <div id="field_adresse_ort" class="normal_t">{ort}</div>
        <div id="field_adresse_land" class="normal_t">{land}</div>
        <div class="field_label">Telefon:</div>
        <div id="field_telefon" class="normal_t">{telefon}</div>
        <div class="field_label">E-Mail:</div>
        <div id="field_telefon" class="normal_t">{email}</div>
        <div class="field_label">Nachricht:</div>
        <div id="field_nachricht" class="normal_t">{message}</div>
    </div>
</div>

I have put that in SETUP>EMAIL Action>edit and then "Email template"

I get the email but without the styles. Am i missing some dumb tiny thing?

GreyHead · Accepted Answer

Hi mJrA,Are you using GMail? It doesn't support  tags in the email body. CSS in email is fussy. Please see this checklist from Campaign Monitor for some idea of what will work where.Bob

Forums

CSS for email Template not working