http://codepen.io/anon/pen/dOGWQW
Screenshots of what is wrong:
http://imgur.com/a/JjNLn
No matter what I try to change, I can't get the part that says "May we suggest", or below that where it says "Want more products?", to be centered in gmail's mobile app.
If you turn the phone in landscape mode it all displays right, but with the normal vertical view the width of the block is not 100% even though the text is still centered.
Then the footer text is just text aligned left for some reason.
On gmail.com on Chrome mobile, the whole template looks like its not at all designed for mobile and is full desktop width.
How do I debug this?
I can't use any kind of dev tool in these programs and nothing I can think of in the code should be making it do this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<style type="text/css">
/* Basics */
body {
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #fff;
}
table {
border-spacing: 0;
font-family: sans-serif;
color: #123050;
}
td {
padding: 0;
}
table, tbody, tr, td {
border: none;
border-color: #fff;
}
img {
border: 0;
}
.wrapper {
width: 100%;
table-layout: fixed;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.webkit {
max-width: 600px;
border: 1px solid #e1e1e1;
box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.15);
}
.outer {
Margin: 0 auto;
width: 100%;
max-width: 600px;
background: #fff;
}
.inner {
padding: 10px;
}
.contents {
width: 100%;
}
p {
Margin: 0;
}
a {
color: #ed9d2a;
text-decoration: none;
}
.h1 {
font-size: 21px;
font-weight: bold;
Margin-bottom: 18px;
}
.h2 {
font-size: 18px;
font-weight: bold;
Margin-bottom: 12px;
}
.full-width-image img {
width: 100%;
max-width: 600px;
height: auto;
}
/* One column layout */
.one-column .contents {
text-align: left;
}
.one-column p {
font-size: 14px;
Margin-bottom: 10px;
}
/*Two column layout*/
.two-column {
text-align: center;
font-size: 0;
}
.two-column .column {
width: 100%;
max-width: 300px;
display: inline-block;
vertical-align: top;
}
.two-column .contents {
font-size: 14px;
text-align: left;
border:1px solid #dedede;
border-radius: 3px;
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
}
.two-column img {
width: 100%;
max-width: 280px;
height: auto;
}
.two-column .image {
padding: 9px 5px 0;
}
.two-column .text {
padding: 0 5px 17px;
padding-top: 10px;
}
/*Three column layout*/
.three-column {
text-align: center;
font-size: 0;
padding-top: 10px;
padding-bottom: 10px;
}
.three-column .column {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
}
.three-column img {
width: 100%;
max-width: 180px;
height: auto;
}
.three-column .contents {
font-size: 14px;
text-align: center;
}
.three-column .text {
padding-top: 10px;
}
/* Left sidebar layout */
.left-sidebar {
text-align: center;
font-size: 0;
}
.left-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.left-sidebar .left {
max-width: 100px;
}
.left-sidebar .right {
max-width: 500px;
}
.left-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.left-sidebar .contents {
font-size: 14px;
text-align: center;
}
.left-sidebar a {
color: #85ab70;
}
/* Right sidebar layout */
.right-sidebar {
text-align: center;
font-size: 0;
}
.right-sidebar .column {
width: 100%;
display: inline-block;
vertical-align: middle;
}
.right-sidebar .left {
max-width: 100px;
}
.right-sidebar .right {
max-width: 500px;
}
.right-sidebar .img {
width: 100%;
max-width: 80px;
height: auto;
}
.right-sidebar .contents {
font-size: 14px;
text-align: center;
}
.right-sidebar a {
color: #70bbd9;
}
h2.featured {
font-size: 39px;
letter-spacing: -1px;
font-weight: bold;
font-style: italic;
color: #ffad38;
text-align: center;
margin: 0 auto 0px;
}
.subtitle {
font-size: 14px;
font-style: italic;
color: #7c8697;
text-align: center;
margin-bottom: 30px;
}
.bold {
font-weight: bold;
}
.header {
text-align: center;
padding-bottom: 25px;
}
.header-wrap {
background: #123050 center bottom no-repeat;
display: block;
width: 100%;
}
img.header-desktop {
display: block;
width: 100%;
}
img.header-mobile {
display: none;
height:1px;
width: 1px;
}
h3 {
color: #123050;
font-size: 27px;
text-align: center;
font-weight:900;
text-transform: uppercase;
letter-spacing: -1px;
margin-top: 0;
margin-bottom: 20px;
}
h4.suggest {
text-transform: uppercase;
font-weight: 900;
font-size: 17px;
letter-spacing: -1.5px;
margin-top: 0;
margin-bottom: 10px;
}
td.suggest {
padding-top: 31px;
}
h5 {
text-transform: uppercase;
font-weight: bold;
margin-top: 10px;
margin-bottom:3px;
}
h3.fancy {
margin: 0 0 43px;
}
h3.fancy a {
color: #123050;
font-size: 24px;
text-transform: none;
font-weight: 600;
letter-spacing: 0;
margin: 0 0 43px;
}
h3.fancy a span {
color: #367eeb;
transition: 75ms ease-in color;
}
h3.fancy a:hover span {
color: #123050;
}
h4.fancy {
font-size: 17px;
font-weight: normal;
font-style: italic;
margin: 0 0 10px;
}
p.phone {
margin-bottom: 5px;
}
.category {
font-size: 13px;
font-style: italic;
margin-bottom: 30px;
}
p.feature-desc {
color: #414d62;
max-width: 465px;
margin: 0 auto;
margin-bottom: 40px;
}
a.button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.button img {
display: none;
}
a.button-view {
background: #ffaf3d;
color: #fff;
}
a.button-info {
color: #ffaf3d;
width: 103px;
}
a.button-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
a.button-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-button {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: -0.5px;
border: 2px solid #ffaf3d;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 37px;
width: 127px;
line-height: 37px;
text-decoration: none;
display: inline-block;
}
.td-view {
background: #ffaf3d;
color: #fff;
}
.td-info {
color: #ffaf3d;
width: 103px;
}
.td-view a {
color: #fff;
height: 37px;
width: 127px;
line-height: 37px;
display: block;
text-align: center;
}
.td-info a {
color: #ffaf3d;
height: 37px;
width: 103px;
display: block;
}
.td-view:hover {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover {
background: #ffaf3d;
color: #fff;
}
.td-view:hover a {
border-color: #ed9d2a;
background: #ed9d2a;
color: #fff;
}
.td-info:hover a {
background: #ffaf3d;
color: #fff;
}
a.small-button {
color: #152845;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
margin: 3px 0;
text-decoration: none;
}
img.separator {
width: auto;
height: 10px;
display: inline-block;
padding: 0;
margin: 0;
}
a.small-button-view {
}
a.small-button:hover {
color: #384c69;
}
.shadow {
box-shadow: 0px 5px 9px -5px rgba(0,0,0,0.2);
border-bottom: 1px solid #ddd;
padding-top: 37px;
padding-bottom: 35px;
}
.more {
padding-top: 22px;
padding-bottom: 47px;
text-align: center !important;
box-sizing: border-box;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.footer {
background: #123050;
}
.footer p {
color: #fff;
height: 45px;
padding-top: 10px;
margin: 0;
text-align: center;
}
.footer a {
color: #fff;
display: inline-block;
height: 40px;
}
.footer span {
padding-right: 5px;
}
.center, .text, h4, h5 {
text-align: center;
}
#media (max-width:599px) {
/* img.header-mobile {
display: inline !important;
height: auto;
width: auto;
}
img.header-desktop {
display: none;
height: 1px;
width: 1px;
}
*/
.one-column .contents {
text-align: center !important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;}
</style>
<![endif]-->
</head>
<body>
<center class="wrapper">
<div class="webkit">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center">
<tr>
<td>
<![endif]-->
<table class="outer" align="center">
<tr>
<td class="header">
<a class="header-wrap" href="">logo</a>
</td>
</tr>
<tr>
<td>
<h2 class="featured">Featured Product</h2>
</td>
</tr>
<tr>
<td>
<p class="subtitle">Recommendations for <span class="bold">All Star Marketing</span></p>
</td>
</tr>
<tr>
<td class="full-width-image">
<img src="http://www.inventionhome.com/dev/hotlink/images/featured.jpg" width="600" alt="" />
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td style="padding-top: 37px; padding-bottom: 35px;" class="inner contents shadow">
<h3>Item Name</h3>
<p class="feature-desc">Item Name is an electronic warmer, featuring a lightweight design that enables easy transportation of a hot food item between locations.</p>
<div style="width: 243px; margin: 0 auto; text-align: center;">
<table width="100%; max-width: 243px;">
<tr>
<td class="td-button td-view" valign="middle" align="center">
<p style="display: block;">View Product</p><p style="display: block; height: 7px;"> </p>
</td>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/5x20.png" alt="" />
</td>
<td class="td-button td-info" valign="middle" align="center">
<p style="display: block;">More Info</p><p style="display: block; height: 7px;"> </p>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="one-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td style="padding-top: 31px;" class="inner contents suggest">
<h4 class="suggest" vspace="50">May we also suggest</h4>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/1.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/2.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="two-column">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td class="image">
<img src="http://www.inventionhome.com/dev/hotlink/images/two-column-01.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="column">
<table width="100%">
<tr>
<td class="inner">
<table class="contents">
<tr>
<td>
<img src="http://www.inventionhome.com/dev/hotlink/images/4.jpg" width="280" alt="" />
</td>
</tr>
<tr>
<td class="text">
<h5>Item Name</h5>
<p class="category">Kitchen</p>
<a class="small-button small-button-view" href="" title="">View Product</a>
<img class="separator" src="http://www.inventionhome.com/dev/hotlink/images/separator.jpg" alt="" />
<a class="small-button small-button-info" href="" title="">More Info</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td class="one-column">
<table width="100%">
<tr>
<td class="inner contents more">
<h4 class="fancy">Want more products?</h4>
<h3 class="fancy">Visit <span>Us Here</span></h3>
<h4 class="fancy">Contact us at</h4>
<p class="center phone"><strong>1-888-888-7777</strong></p>
<p class="center"><a style="font-weight: bold;" href="mailto:marketing#inventionhome.com" title="email">marketing#company.com</a></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background: #123050;" class="one-column footer">
<table width="100%">
<tr>
<td class="inner contents">
<p class="center"><span style="color: #fff;">Connect with us</span> <a class="social-icon" href="https://www.facebook.com/invention.home/" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/facebook.png" alt="Facebook" /></a><a class="social-icon" href="https://twitter.com/Inventionhome" title=""><img src="http://www.inventionhome.com/dev/hotlink/images/twitter.png" alt="Twitter" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
I sent an email to my gmail account with your code in it, then viewed it on my phone and it looks absolutely perfect.
But as you said, if I use the chrome browser and log into to gmail it looks just how you described.
The reason is that GMAIL is stripping away your inline Stylesheet, when viewed in the browser. The original message is intact, but the client renders it without the stylesheets.
To get around the issue, you need to code the styles using the style attribute on the HTML Element, like this.
<table style="text-align:center">
Now your next question is how do I know this? I hit F12 in google chrome on my desktop, then view the email. This allows me to see the HTML and the Styles applied. Then within the Developer tools I click on the Toggle Device Toolbar then select the device I want to emulate in this case I choose iPhone 6+.
Then you can look at the html and adjust it and correct it within the tools.
I would also suggest you do some Inbox Testing, looking over the content of the email I think you're going to hit the spam box at a few locations.
Related
I am a junior developer and I create a signature in html/scss.
When I copy/paste my rendering on gmail or outlook everything works fine but when I paste my rendering on windows email the rendering is distorted. Anyone know where the problem comes from?
Here is my code: https://codepen.io/kevinkotcherga/pen/WNyVdMb
#import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
table {
td {
padding: 0;
// border: 1px solid black;
}
.td-empty-top {
padding-top: 20px;
}
.td-empty-bottom {
padding-bottom: 20px;
}
.td-skip-a-line {
padding: 5px 0;
}
.td-logos {
text-align: center;
}
.td-empty {
visibility: hidden;
margin: 0;
padding: 0;
line-height: 0;
}
}
// .margin-right {
// padding-right: 320px;
// }
.margin-right {
padding-right: 170px;
}
.margin-right-keryan {
padding-right: 212px;
}
.dev-in-net {
width: 130px;
padding: 0 30px 41px 30px;
}
.bold {
font-weight: bold;
}
.padding-left {
padding-left: 50px;
}
.logo {
height: 20px;
width: 20px;
margin-right: 5px;
margin-top: 2px;
}
.linkedin-devinnet {
height: 23px;
width: 23px;
}
.gif {
width: 100px;
}
.keryan {
font-size: 25px;
color: #023047;
}
.font-size {
font-size: 14px;
color: #023047;
}
.vertical-divider {
border-left: 3px solid #FFA033;
height: 20px;
margin: 0 10px;
}
a:-webkit-any-link {
text-decoration: none !important;
}
a {
text-decoration: none !important;
}
.color-link:-webkit-any-link {
color: #023047 !important;
text-decoration: none !important;
}
.center {
display: flex;
align-items: center;
}
.min-width-kevin {
font-family: 'Noto Sans', sans-serif;
min-width: 573px;
border-top: solid 0.5px rgb(229, 229, 229);
border-bottom: solid 0.5px rgb(229, 229, 229);
min-width: 573px;
}
<table class="min-width-kevin">
<tbody>
<tr>
<td class="td-empty-top" colspan="{2}"></td>
</tr>
<tr>
<td rowspan="8" class="td-img">
<img
class="dev-in-net"
src="https://devinnet.fr/images/images-email/devinnet-image-anime.gif"
alt=""
/>
</td>
<td class="bold keryan margin-right">Name Surname</td>
</tr>
<tr>
<td class="font-size">
<span class="bold">Company</span>
<span class="vertical-divider"></span>Front end developer
</td>
</tr>
<tr>
<td>
<a href="" target="_blank" rel="noreferrer">
<img
class="logo"
src="https://devinnet.fr/images/images-email/logo-www.png"
alt=""
/>
</a>
<a href="" target="_blank" rel="noreferrer">
<img
class="logo"
src="https://devinnet.fr/images/images-email/logo-github.png"
alt=""
/>
</a>
<a href="" target="_blank" rel="noreferrer">
<img
class="logo"
src="https://devinnet.fr/images/images-email/logo-linkedin.png"
alt=""
/>
</a>
</td>
</tr>
<tr>
<td class="td-skip-a-line"></td>
</tr>
<tr>
<td class="font-size">
<a class="color-link" href="">
<span>contact#company.com</span>
</a>
<span class="vertical-divider"></span>
01 01 01 01 01
</td>
</tr>
<tr>
<td class="font-size">24 random street, NY</td>
</tr>
<tr>
<td class="font-size center">
<a class="color-link" href="">
<span>www.company.com</span>
</a>
</td>
</tr>
<tr>
<td class="td-empty-bottom" colspan="{2}"></td>
</tr>
</tbody>
</table>
I saw on some examples that developers indent tables in tables, I tried to reproduce the code but I don't understand the logic : https://academind.com/tutorials/build-a-custom-email-signature
I want the .menu-box-middle ul list items to display inline, however all the list items overlap each other! I can't figure out how to change it. Ideally I want them evenly spaced across the page within the main-container.
HTML and CSS can be found here: http://codepen.io/anon/pen/Mbbbmv
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Anthony and Nicola's wedding</title>
<link href="tplcss/samplestyle/style.css" rel="stylesheet" type="text/css" />
<link href="http://default.gettingmarried.co.uk/src/css/common.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="http://default.gettingmarried.co.uk/favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="http://default.gettingmarried.co.uk/src/js/common.js"></script>
<script src="http://default.gettingmarried.co.uk/src/js/prototype-1603-minified.js" type="text/javascript"></script>
<script src="http://default.gettingmarried.co.uk/src/editjs/src/scriptaculous.js" type="text/javascript"></script>
<meta name="description" content="Nicola Bobins and Anthony Cross are getting married on Wednesday 13th January 2010." />
<meta name="keywords" content="wedding,Anthony,Nicola,Nicola Bobins and Anthony Cross,wedding site,www.gettingmarried.co.uk,Anthony and Nicola's wedding" />
<script src="http://default.gettingmarried.co.uk/src/sifr436/js/sifr.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://default.gettingmarried.co.uk/src/sifr436/css/sifr.css" type="text/css">
<!-- font: This part is editable via your control panel -->
<SCRIPT LANGUAGE="JavaScript">
var myfont = { src: 'http://default.gettingmarried.co.uk/src/sifr436/fonts/PalaceScriptMT[regular]436.swf' };
sIFR.activate(myfont);
sIFR.replace(myfont, {
selector: 'h1',wmode: 'transparent',
css: [ '.sIFR-root {color: #000000 ;font-size: 60px;}' ]
});
</SCRIPT>
</head>
<body>
<!-- Overlay shaded div for hover window -->
<div id="overlayfilm" style="display:none"></div>
<div class="main-container">
<div class="top-thin-bar"><span class="main-table-top-banner"><strong>Wednesday 13th January 2010 - </strong> 52 days to go</span></div>
<!-- <div id="weatherbox">10 days before?<br />
<br />
Show weather here!</div> -->
<div class="left-panel">
<div class="menu-box-top1"></div>
<div class="menu-box-middle">
<ul>
<li>The Wedding
<ul id="Aitem_list">
<li id="Aitem_65" class="selected">
<a href="Home.htm" title="Home" class="menu">Home
</a>
</li>
<li id="Aitem_66" >
<a href="About_Us.htm" title="About Us" class="menu">About Us
</a>
</li>
<li id="Aitem_68" >
<a href="Reception.htm" title="Reception" class="menu">Reception
</a>
</li>
<li id="Aitem_67" >
<a href="Ceremony.htm" title="Ceremony" class="menu">Ceremony
</a>
</li>
<li id="Aitem_69" >
<a href="Timetable.htm" title="Timetable" class="menu">Timetable
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="menu-box-bottom1"></div></div>
<div class="right-panel" id="right-panel-frame">
<div class="intro-panel"> <h1>Our Wedding</h1><img height="333" border="0" align="right" width="250" class="photo-align-right" alt="image" src="http://www.gettingmarried.co.uk/siteimages/thumbnail_200903021623420000006dfda5a286177a3903c2c31b11c20bb4.jpg"/> <span id='homepage_intro'>This is a sample file that contains most elements that you may require to create a new CSS style.<br><br>Sadly we are unable to change the HTML template layout, but the CSS file is fully editable by you.<br><br>Once you have finished, please email the files as a ZIP archive to support#gettingmarried.co.uk. We will then import your CSS style into the GettingMarried.co.uk system.<br><br>Please note: by sending us your CSS file and images, you agree to transfer any copyright or ownership of the design to GettingMarried.co.uk. You also confirm that you have not used any copyrighted images without permission from the copyright holder. You will accept full liability for breach of copyright. You also confirm that your CSS file may be used on our other members' sites, and by sending us your files, you are confirming your agreement of these terms and conditions.</span><br/>
<br style="clear:both;">
</div>
<div class="front-page-boxes-wrapper">
<div class="front-page-boxes-left">
<p><em>The Wedding</em></p>
<p class="front-page-boxes-text">My Wedding box testing</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-middle">
<p><em>Organisation</em></p>
<p class="front-page-boxes-text">My wedding box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
<div class="front-page-boxes-right">
<p><em>Memories</em></p>
<p class="front-page-boxes-text">My Wedding Box</p>
<p><img height="19" border="0" width="20" alt="Bullet" src="http://default.gettingmarried.co.uk/images/css-img/bullet-grey.gif"/> </p>
</div>
</div>
<!-- ABOUT US -->
<h1>About Us</h1>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Penny</strong></p>
<p><img height="147" align="left" width="100" alt="Penny" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-bride-100px.jpg"/><span id="about_bride" >Age: 26<br/><br/>Middle Name: Rose<br/><br/>Likes: Bunting! <br/><br/>Dislikes: Getting up in the morning </span></p></td>
<td align="left" width="50%" valign="top" class="aboutus-cells"><p><strong>Andrew</strong></p>
<p><img height="147" align="left" width="100" alt="Andrew" class="photo-profiles" src="http://www.gettingmarried.co.uk/images/home-img/photo-filler-groom-100px.jpg"/><span id="about_groom" >Age: 27<br/><br/>Middle Name: Donald<br/><br/>Likes:Everything to be tidy<br/><br/>Dislikes: Penny's Topshop Account </span></p></td>
</tr>
</table>
<p><strong>How we met...</strong></p>
<span id="about_howmet" >Way way back at guide and scout camp in 1995 </span><p></p>
<p><strong>The proposal...</strong></p>
<span id="about_proposal" >Sleep deprived and slightly drunk on mojitos in Cuba, December 2007 </span><p></p>
<!-- GIFT LIST -->
<h1>Gift List</h1>
<p><span id="giftlist_intro" >Introduction text for the giftlist page.</span></p>
<p><strong>The Online Gift List</strong></p>
<p>Please remember to click the "Mark as purchased" link to mark items as purchased to prevent duplications.</p>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td class="giftlist-header-row">Shop Name</td>
<td class="giftlist-header-row">Description</td>
<td class="giftlist-header-row">Cost</td>
<td class="giftlist-header-row">Quantity</td>
<td class="giftlist-header-row">Options</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Argos.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1966" onclick="JT_show('ajax-purchase-giftview.php?giftid=1966&gifturl=giftgo.php%3Fid%3D1966',this.id,this.name);" name="Did you buy this Gift?" id="giftID1966">3 tier steamer</a></td>
<td class="giftlist-row-purchased">£19.99</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3031" onclick="JT_show('ajax-purchase-giftview.php?giftid=3031&gifturl=giftgo.php%3Fid%3D3031',this.id,this.name);" name="Did you buy this Gift?" id="giftID3031">Black 19cm rectangular stoneware dish</a></td>
<td class="giftlist-row-purchased">£15</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1963" onclick="JT_show('ajax-purchase-giftview.php?giftid=1963&gifturl=giftgo.php%3Fid%3D1963',this.id,this.name);" name="Did you buy this Gift?" id="giftID1963">blue spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1960" onclick="JT_show('ajax-purchase-giftview.php?giftid=1960&gifturl=giftgo.php%3Fid%3D1960',this.id,this.name);" name="Did you buy this Gift?" id="giftID1960">blue spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Drinkstuff.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1859" onclick="JT_show('ajax-purchase-giftview.php?giftid=1859&gifturl=giftgo.php%3Fid%3D1859',this.id,this.name);" name="Did you buy this Gift?" id="giftID1859">Cocktail starter pack</a></td>
<td class="giftlist-row-purchased">£39.92</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Welch.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=2805" onclick="JT_show('ajax-purchase-giftview.php?giftid=2805&gifturl=giftgo.php%3Fid%3D2805',this.id,this.name);" name="Did you buy this Gift?" id="giftID2805">cookn=book stand - light blue</a></td>
<td class="giftlist-row-purchased">£27.25</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-rowa">Debenhams.com </td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">Cream piglets salt and pepper pots</a></td>
<td class="giftlist-rowa">£15.50</td>
<td class="giftlist-rowa">1</td>
<td class="giftlist-rowa"><a target="_blank" href="giftgo.php?id=3017" onclick="JT_show('ajax-purchase-giftview.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);" name="Did you buy this Gift?" id="giftID3017">View</a> | <a onclick="JT_show('ajax-purchase-gift.php?giftid=3017&gifturl=giftgo.php%3Fid%3D3017',this.id,this.name);return false;" name="Please Confirm Your Details..." id="giftID3017" href="#">Mark as purchased</a></td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1962" onclick="JT_show('ajax-purchase-giftview.php?giftid=1962&gifturl=giftgo.php%3Fid%3D1962',this.id,this.name);" name="Did you buy this Gift?" id="giftID1962">cream spice jar</a></td>
<td class="giftlist-row-purchased">£2.44</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Legendcookshop.co.uk </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1961" onclick="JT_show('ajax-purchase-giftview.php?giftid=1961&gifturl=giftgo.php%3Fid%3D1961',this.id,this.name);" name="Did you buy this Gift?" id="giftID1961">cream spice jar set</a></td>
<td class="giftlist-row-purchased">£10.76</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Lauraashley.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=1696" onclick="JT_show('ajax-purchase-giftview.php?giftid=1696&gifturl=giftgo.php%3Fid%3D1696',this.id,this.name);" name="Did you buy this Gift?" id="giftID1696">duck egg bed linen - oxford pillowcases</a></td>
<td class="giftlist-row-purchased">£14.69</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
<tr>
<td class="giftlist-row-purchased">Debenhams.com </td>
<td class="giftlist-row-purchased"><a target="_blank" href="giftgo.php?id=3032" onclick="JT_show('ajax-purchase-giftview.php?giftid=3032&gifturl=giftgo.php%3Fid%3D3032',this.id,this.name);" name="Did you buy this Gift?" id="giftID3032">Granite petite round casserole dish</a></td>
<td class="giftlist-row-purchased">£10</td>
<td class="giftlist-row-purchased">-</td>
<td class="giftlist-row-purchased">Purchased</td>
</tr>
</tbody></table>
</tbody></table>
<h1>Our Wedding</h1>
<p>Upload your high resolution wedding photos to Andrew and Penny's online photo album here. <br/><br/>Our site will automatically create web-friendly images, whilst the high resolution images will also be stored, allowing us to design a beautifully-printed photobook of our special day through our guests' eyes.</p>
<form action="uploadimages.php" method="POST" name="gbook">
<div class="front-page-boxes">
<strong>Upload your photos</strong> (Step 1 of 2)
<br/><table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Your name: </td>
<td><input name="name" type="text" id="name" size="30"/></td>
</tr>
<tr>
<td nowrap="nowrap">Email address: *</td>
<td><input name="email" type="text" id="email" size="30"/></td>
</tr>
<SCRIPT LANGUAGE="JavaScript">
<!--
function callme(){
var row = document.getElementById("showme");
if(document.gbook.usealbum.value=='0'){
row.style.display='';
}else{
document.gbook.newname.value='';
row.style.display='none';
}
}
//-->
</SCRIPT>
<tr>
<td nowrap="nowrap">Select destination album:</td>
<td>
<select name="usealbum" OnChange="callme();"><option>Please Select</option><option value='0' selected>Create a new photo album</option>
<option value="from your American " >Test album 1</option>
<option value="Scotty's photos of the big day" >Test album 2</option>
</select>
</td>
</tr>
<tr ID='showme' >
<td nowrap="nowrap">Title for your new album:</td>
<td><input name="newname" type="text" id="email" size="30"/></td>
</tr>
<tr>
<td valign="top" nowrap="nowrap"> </td>
<td align="left"><input type="submit" name="Submit" id="Submit" value="Go >" /></td>
</tr>
<tr>
<td colspan="3">
<font size="1">* Note: email address is stored <b>only</b> for Name1 and Name2's private use</font>
</td>
</tr>
</table>
</div>
</form>
<br/>Please note: all photos must be personally approved by us before they go live on the site, so there may be a slight delay before you see it in the albums.
</div>
<p> </p>
<br class="clearbreak" />
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* BASIC ELEMENTS */
/* NB: The h1 style is set up separately on the "customise design page" */
body {
background-image: url(../../tplcss/samplestyle/images/bg-small-2.gif);
background-repeat: repeat;
background-position: center;
padding-left: 0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
a {
color: #1d192f;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #1d192f;
}
form {
margin: 0px;
padding: 0px;
}
.submit-button {
background-color: #FFFFCC;
margin-top: 10px;
border: 1px solid #DC5050;
height: 30px;
}
/* ----------- GENERAL ELEMENTS ---------------- */
.main-table {
background-color: #FFFFFF;
background-repeat: no-repeat;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 0px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
padding: 0px;
}
.main-content {
padding-top: 30px;
padding-left: 25px;
padding-right: 15px;
font-family: 'Playfair Display', serif;
font-size: 12pt;
}
.main-container {
background-color: #ffffff;
background-repeat: no-repeat;
background-position: 0px 0px;
width: 900px;
margin-top:-16px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
position: relative;
}
.main-container .top-thin-bar {
visibility: hidden;
background-repeat: no-repeat;
height: 22px;
width: 1100px;
top: 160px;
position: absolute;
background-position: 0px 0px;
text-align: center;
padding-top: 7px;
left: 0px;
margin-left: -122px;
font-size: 10pt;
}
.main-container .right-panel .intro-panel {
width: auto;
min-height: 333px;
font-size: 14px;
line-height: 20px;
color: #193429;
}
.main-footer {
width: 880px;
margin-right: auto;
margin-bottom: 0px;
background-repeat:no-repeat;
margin-left: auto;
height: 60px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #FFB9B9;
border-bottom-color: #FFB9B9;
border-left-color: #FFB9B9;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
clear: both;
}
.main-footer .left-links {
width:300px;
height:100%;
float:left;
}
.main-footer .right-logo {
visibility: hidden;
width:400px;
float:right;
text-align:right;
}
.left-panel {
width: auto;
margin-top: 15px;
padding-left: 20px;
margin-bottom: 20px;
}
.right-panel {
width: auto;
margin-top: 220px;
margin-right: 30px;
margin-bottom: 35px;
}
.leftmenu {
padding-left: 15px;
width: 200px;
padding-top: 30px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
}
.clearbreak {
clear:both;
height:10px;
overflow:hidden;
}
.main-table-top-banner {
visibility: hidden;
text-align: center;
background-repeat: no-repeat;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #999999;
}
.main-table-top-banner-sub {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
}
.main-bottom-strip {
padding: 10px;
border-top: 1pt solid #CCCCCC;
background: #EEEEEE;
color: #666666;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: normal;
}
.main-bottom-strip a {
color: #666666;
}
.main-bottom-strip a:visited {
color: #666666;
}
.main-bottom-strip a:hover {
color: #AAAAAA;
}
.table-light-padding {
padding: 3px;
padding-bottom: 7px;
}
.redtext {color: #DC5050}
.smaller-text-indent {
font-size: 10pt;
padding-left: 20px;
}
.text-indent {
padding-left: 20px;
}
.editingtextarea {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
background-color: #FFFFFF;
border: 1px dotted #E98E95;
}
/* Menu bar */
.menu-box-top1 {
height: 0px;
width: 180px;
background-repeat: no-repeat;
margin: 0px;
background-position: bottom;
}
.menu-box-middle {
background-color: #FFFFFF;
margin: 0px;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 1px;
padding-left: 10px;
}
.menu-box-middle p {
font-style: italic;
padding-bottom: 0px;
}
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
.menu-box-middle a {
color: #E96461;
text-decoration: none;
border-bottom: 1px solid #b0c5bc;
line-height: 25px;
}
.menu-box-middle a:visited {
color: #E96461;
}
.menu-box-middle a:hover {
color: #EF8F8D;
}
.menu-box-bottom1 {
background-image: url(http://default.gettingmarried.co.uk/images/css-img/bottom-rounded.gif);
background-repeat: no-repeat;
width: 180px;
height: 10px;
margin: 0px;
}
/* ----------- FRONT PAGE ELEMENTS ------------- */
/* Front three boxes */
.front-page-boxes-wrapper {
float: right;
width: 640px;
margin-right: 0px;
margin-bottom: 40px;
margin-top: 20px;
height: 170px;
}
.front-page-boxes-wrapper em {
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color:#666666;
letter-spacing: 2px;
font-style: normal;
font-weight: bold;
}
.front-page-boxes-wrapper p {
margin-top:0;
}
.front-page-boxes {
border: 1px dotted #FFA8A8;
padding: 10px;
}
.front-page-boxes a {
color: #3399CC;
}
.front-page-boxes a:visited {
color: #3399CC;
}
.front-page-boxes a:hover {
color: #3399CC;
}
.front-page-boxes-text {
font-size: 10pt;
line-height: 18px;
color: #253630;
}
.front-page-boxes-left {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
height: 100%;
background-color: #D7EBFF;
color: #0066FF;
}
.front-page-boxes-middle {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background-color: #FADBDA;
}
.front-page-boxes-right {
border: 5px solid white;
padding: 10px;
width: 170px;
float: left;
margin-left: 20px;
height: 100%;
background: #D7EBFF;
}
To make it work I have added following css styles and removed your old css styles:
Removed
.menu-box-middle ul {
margin-top: 5px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: Helvetica;
font-size: 14px;
color: #996666;
letter-spacing: 2px;
}
.menu-box-middle li {
list-style: none;
margin-left: -30px;
margin-bottom: 4px;
font-style: none;
font-weight: bold;
}
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: block;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
}
.menu-box-middle li ul {
padding-top: 0px;
background-repeat: no-repeat;
}
Added Lines:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
Fiddler: https://jsfiddle.net/mayankN/nrL32cen/1/
Make the changes relevant to your style from old file.
Just add a margin on :
.menu-box-middle li li {
/*bookmark this is where i got to display inline :( */
display: inline;
text-transform: none;
margin-bottom: 4px;
font-weight: normal;
margin-left: -40px;
font-family: Georgia;
letter-spacing: 0px;
margin:12px;
}
so sry for doing something wrong.
I want to place my logo on My Website and the Title of the Website as Picture right next to it. But my "headerlogo.png" will not rezise with "height" in Firefox and IE, only in Chrome working... Dont know why...
Wanted to place some screenshots but didn´t worked...
So the Website is already online. You can visit it Click HERE.
So Here is the code for my home.html I am working on this and testing and will copy the final code to the other Pages, so dont care about them...
Only about home.html
Here is the code for the home.html and my style.css:
body {
background-color: #222;
}
header {
background-color: #000;
color: #FFF;
font-weight: bolder;
}
table {
border-style: none;
}
.headerlogo {
height: 7%;
margin-left: 2%;
margin-bottom: 2%;
margin-top: 2%;
}
.headerpic {
padding-left: 9%;
margin-bottom: 2%;
margin-top: 2%;
width: auto;
height: 100%;
}
.navpic {
width: 17%;
float: left;
background-color: #000;
margin-right: 3%;
margin-bottom: 0.2%;
box-shadow: 5px 0px 10px black;
}
.nav {
list-style-type: none;
background-color: #000;
margin-top: -1%;
}
.navpic:hover {
background-color: #111;
}
hr.bottom {
margin-bottom: 2%;
}
div.articletd {
background-color: #111;
color: #FFF;
width: 640px;
height: 400px;
font-family: sans-serif;
float: left;
margin-top: -3px;
padding-left: 2%;
padding-right: 2%;
margin-left: 2%;
}
td.normalarticle {
background-color: #111;
color: #FFF;
font-family: sans-serif;
text-align: left;
vertical-align: top;
padding-left: 2%;
padding-right: 2%;
line-height: 1.6;
height: auto;
width: 49.5%;
}
table.normalarticleeinseitig {
background-color: #111;
color: #FFF;
font-family: sans-serif;
text-align: left;
vertical-align: top;
padding-left: 2%;
padding-right: 2%;
line-height: 1.6;
height: auto;
width: 100%;
;
border: 0 solid #222;
;
}
table.normalarticle {
width: 100%;
line-height: 1.6;
border: 0 solid #222;
;
}
.middlearticle {
width: 1%;
background-color: #222;
}
.kontaktformularrechts {
margin-left: 20%;
}
.buttonformular {
background-color: #111;
color: #FFF;
border-width: medium;
}
h1 {
font-size: 2em;
margin-top: 2%;
text-align: left;
}
p.ptd {
line-height: 1.6;
text-align: left;
padding-left: 2%;
}
.spotifylink {
width: 4%;
height: 4%;
}
a.spotifylink:hover {
background-color: #FFF;
}
.footer {
background-color: #000;
margin-top: 1%;
color: #FFF;
}
.footerp {
margin-left: 5%;
font-family: sans-serif;
}
.footertd {
width: 100%;
}
footer td {
width: 7.5%;
text-align: center;
}
footer img {
margin-top: -20%
}
.recht {
margin-top: 1%;
background-color: #111;
color: #FFF;
font-family: sans-serif;
}
.impressumtable {
width: 37.5%;
margin-left: 3.5%;
}
.impressumtd {
text-align: left;
}
a {
text-decoration: none;
}
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:active {
color: #FFF;
}
a:hover {
color: #AAA;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" type="image/x-icon" href="bilder/favicon.png">
<title>DJ Dre Loo</title>
</head>
<body>
<header>
<table>
<tr>
<td >
<img class="headerlogo" src="bilder/headerlogo.png">
</td>
<td class="headerpic">
<img src="bilder/headertitle.png">
</td>
</tr>
</table>
</header>
<hr>
<nav>
<div>
<ul class="nav">
<li class="navfirst">
<img class="navpic" src="bilder/home.png">
</li>
<li>
<img class="navpic" src="bilder/biografie.png">
</li>
<li>
<img class="navpic" src="bilder/djing.png">
</li>
<li>
<img class="navpic" src="bilder/kontakt.png">
</li>
<li>
<img class="navpic" src="bilder/td.png">
</li>
</ul>
</div>
<hr class="bottom">
</nav>
<article>
<table class="normalarticleeinseitig">
<tr>
<td>
<div style="height:10px;font-size:10px;"></div>
<div align="center">
<img width="100%" src="bilder/eingebunden/Homepic.png">
</div>
</td>
</tr>
</table>
</article>
<hr height="0px" color="#222">
<footer>
<div class="footer">
<table class="footertd">
<tr>
<td>
<p class="footerp">
Facebook
</p>
</td>
<td>
<p class="footerp">
Email
</p>
</td>
<td>
<p class="footerp">
Instagram
</p>
</td>
<td>
<p class="footerp">
Twitter
</p>
</td>
<td>
<p class="footerp">
Spotify
</p>
</td>
<td>
<p class="footerp">
Mixcrate
</p>
</td>
<td>
<p class="footerp">
Mixcloud
</p>
</td>
<td>
<p class="footerp">
Mixify
</p>
</td>
</tr>
<tr>
<td>
<p class="footerp">
<img width="25%" src="bilder/facebooklogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="30%" class="linklogos" src="bilder/maillogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="25%" class="linklogos" src="bilder/instagramlogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="25%" class="linklogos" src="bilder/twitterlogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="25%" class="linklogos" src="bilder/spotifylogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="25%" class="linklogos" src="bilder/mixcratelogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="30%" class="linklogos" src="bilder/mixcloudlogo.png">
</p>
</td>
<td>
<p class="footerp">
<img width="45%" class="linklogos" src="bilder/mixifylogo.jpg">
</p>
</td>
</tr>
</table>
</div>
<div class="recht">
<table class="impressumtable">
<tr>
<td class="impressumtd">
Impressum
</td>
<td class="impressumtd">
Disclaimer
</td>
<td class="impressumtd">
(*)Warum...
</td>
</tr>
</table>
</div>
</footer>
</body>
</html>
maybe you can Help me :)
The problem is with table element, when i check it on my firefox browser the site is not visible as is i viewed on chrome.
better remove the table and use html float property
http://www.w3schools.com/cssref/pr_class_float.asp
Have you tried adding compabiity to your CSS file like -WebKit- and -moz- to the image?
I can not get the background images to work in Outlook HTML newsletter. I tried bulletproof method, but it is not working as it supposed to be!
Please check out my code to see if you have any ideas how to display 3 different background images correctly in Outlook. This is what I have at the moment (and it works flawlessly everywhere but Outlook)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>E-mail newsletter</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" name="viewport">
<style type="text/css">
/* Reset */
body { margin: 0px; padding: 0px; background-color: #FFFFFF; }
::selection {
background: #ff2f2f; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ff2f2f; /* Gecko Browsers */
}
/* Responsive */
#media only screen and (max-width:600px) {
/* Tables
parameters: width, alignment, padding */
table[class=scale] { width: 100%!important; }
table[class=scale-300] { width: 100%!important; height: 300px!important; }
table[class=scale-90] { width: 90%!important; }
/* Td */
td[class=hide] { display: none!important; height: 0px!important; }
td[class=scale-left] { width: 100%!important; text-align: left!important;}
td[class=scale-height] { height: 70px!important;}
td[class=scale-left-bottom] { width: 100%!important; text-align: left!important; padding-bottom: 24px!important; }
td[class=scale-left-top] { width: 100%!important; text-align: left!important; padding-top: 24px!important; }
td[class=scale-left-all] { width: 100%!important; text-align: left!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center] { width: 100%!important; text-align: center!important;}
td[class=scale-center-both] { width: 100%!important; text-align: center!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-bottom] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; }
td[class=scale-center-top] { width: 100%!important; text-align: center!important; padding-top: 24px!important; }
td[class=scale-center-all] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-right] { width: 100%!important; text-align: right!important;}
td[class=scale-right-bottom] { width: 100%!important; text-align: right!important; padding-bottom: 24px!important; }
td[class=scale-right-top] { width: 100%!important; text-align: right!important; padding-top: 24px!important; }
td[class=scale-right-all] { width: 100%!important; text-align: right!important; padding-top: 24px!important; padding-bottom: 24px!important; }
td[class=scale-center-bottom-both] { width: 100%!important; text-align: center!important; padding-bottom: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=scale-center-top-both] { width: 100%!important; text-align: center!important; padding-top: 24px!important; padding-left: 20px!important; padding-right: 20px!important; }
td[class=reset] { height: 0px!important; }
td[class=scale-center-topextra] { width: 100%!important; text-align: center!important; padding-top: 84px!important; }
img[class="reset"] { display: inline!important; }
img[class="scale-80"] { width: 80%!important; }
}
</style>
</head>
<body>
<table class="scale" data-bgcolor="Body BG" data-module="Header" style="background-color: rgb(255, 255, 255); position: relative; opacity: 1; top: 0px; left: 0px;" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="color:#444444; font-family:Helvetica, Verdana, Arial, sans-serif; font-size:13px; padding:50px 0px 20px 0;">
Can't see the offer? Click here! </td>
</tr>
<tr>
<td>
<table class="scale" style="background-size: cover; background-position: 50% 50%; background-repeat: no-repeat no-repeat; background-image: url("http://s30.postimg.org/s36pgisoh/bg1.jpg");" data-bg="Quote BG" align="center" height="340" background="http://s30.postimg.org/s36pgisoh/bg1.jpg" border="0" cellpadding="0" cellspacing="0" width="620">
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s10.postimg.org/u2e99laih/cut_top.png">
</td>
</tr>
<tr>
<td align="center">
<table class="scale" align="center" border="0" cellpadding="0" cellspacing="0" width="500">
<tr>
<td height="50">
</td>
</tr>
<tr>
<td data-color="Header Headline" data-max="64" data-min="16" data-size="Header Headline" style="font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; font-size: 29px; color: rgb(255, 255, 255); line-height: 42.05px;" align="center">BEST OFFER HERE!<br><br><span data-color="Header Subline" data-max="50" data-min="16" data-size="Header Subline" style="font-size: 38px; line-height: 38px; color: rgb(255, 255, 255);">STARTS FROM <strong>35 EUR</strong>!</span>
</td>
</tr>
<tr>
<td height="40">
</td>
</tr>
<tr>
<td style="color: rgb(255, 255, 255); font-size: 15px; line-height: 25.5px;" data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" align="center"><a data-color="Header Button" data-max="28" data-min="14" data-size="Header Button" data-bgcolor="Header Button" href="http://webpage.com" style="background-color: rgb(219, 0, 19); border-radius: 40px; padding: 10px 30px; color: rgb(255, 255, 255); font-family: "Proxima N W01 At Smbd",Helvetica,Arial,sans-serif; text-decoration: none; font-size: 15px; line-height: 25.5px;">ORDER NOW <img src="http://s11.postimg.org/nk238dn6n/nool.png" height="10px" width="11px" alt=""></a>
</td>
</tr>
<tr>
<td height="50">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-position: 50% 100%; background-repeat: no-repeat no-repeat;" height="50" background="http://s27.postimg.org/f9g57wpgz/cut_down.png">
</td>
</td>
</tr>
</table></tr>
</table></body></html>
</body></html>
background-image is not supported in outlook, sorry for you.
Take a look here about css compatibility in email clients: https://www.campaignmonitor.com/css/
Using html and css in email it's very very difficult.
Every single email client reading your email is going to have it's own rules about how it deals with HTML emails, so you are going to have to design for the lowest common denominator.
Excuse my newbie coding because it's a Frankenstein mix of hundreds of email layouts, but can someone tell me why my table layout is not displaying the columned tables side-by-side?
It's the two td elements with the class name container-small at 50% width that won't position side-by-side. I'm not using float or divs.
Is it because they're separate tables when they should be part of the same td? Please feel free to make other amendments/suggestions so I can improve my layout. The left column must be 283px exactly, but the right column can be 100% fluid. That's really the only requirement.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
</style>
</head>
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image"/></center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center><p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
</html>
the problem is here:
.container-small {
display: block !important;
width: 100% !important;
}
just remove this two properties above.
Snippet below:
#media only screen and (min-device-width: 541px), screen and (min-width: 541px) {
#body {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
#body {
width: 100% !important;
}
.container {
display: block !important;
width: 100% !important;
}
.container-small {
display: block !important;
width: 100% !important;
}
.header-image {
height: auto !important;
max-width: 480px !important;
width: 100% !important;
}
.column-image {
height:auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 100% !important;
font-weight: normal;
line-height: 125% !important;
}
}
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important;
clear: both!important;
}
/* REMOVE HERE
.container-small {
display: block !important;
width: 100% !important;
}
*/
.header-image {
height: auto !important;
max-width: 600px !important;
width: 100% !important;
}
.column-image {
height: auto !important;
max-width: 283px !important;
width: 100% !important;
}
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
.content table {
width: 100%;
}
* {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 125%;
}
img {
-ms-interpolation-mode: bicubic;
}
a {
color: #EC6129;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
font-weight: bold;
line-height: 125%;
text-decoration: none;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.msoFix {
mso-table-lspace:-1pt;
mso-table-rspace:-1pt;
}
.service-text {
text-align: center;
}
.service-text p {
text-align: left
}
.last {
margin-bottom: 0px;
}
.first {
margin-top: 0px;
}
body, .body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
width: 100% !important;
height: 100%;
display: block;
max-width: 600px;
margin: 0 auto;
margin-top: 20px;
background-color: #999999;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 125%;
}
h1, h2, h3 {
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
line-height: 125%;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 1.5em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
h3 {
font-size: 1.2em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
p, ul, ol {
font-size: 1.0em;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
ul li, ol li {
list-style-position: inside;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
.large-button {
color: #FFFFFF;
background-color: #666666;
border: none;
border-bottom: 1px solid #666666;
line-height: 125%;
display: inline-block;
width: 100%;
margin: 0 auto;
position: relative;
font-style: normal;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
outline: none;
text-decoration: none;
text-align: center;
cursor: pointer;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
}
<body align="center" bgcolor="#666666" style="background-color: #666666; width: 100%; max-width: 600px;">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table id="body" align="center" bgcolor="FFFFFF" border="0" cellpadding="0" cellspacing="0" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px; border: 0px solid #999999; border-right: 0px solid #999999;border-left: 0px solid #999999; border-top: 0px solid #999999; border-bottom: 0px solid #999999;">
<tr>
<td class="container" align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<img src="https://www.vpcode.com/vfeimages/uploads/email/PureStorage_Email_Banner.png" alt="Pure Storage" style="height: auto !important; width: 100% !important;" class="header-image" />
</center>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="600" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<img src="https://www.vpcode.com/vfeimages/uploads/email/Vivint_Virtual_Card.png" alt="Vivint Card" align="left" width="283" style="max-width: 283px;" class="column-image" />
</td>
</tr>
<tr>
<td class="content" align="left" valign="top">
<p>Lorem ipsum dolor sit amet.</p>
</td>
</tr>
</table>
</td>
<td class="container-small" align="center" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="content" align="left" valign="top">
<p>Dear #FirstName#,</p>
<p>Congratulations! $#DollarAmount# in reward money is available to load onto your Visa Prepaid Card! To accept your funding, simply click on the button below. Be sure to have your card handy.</p>
<p><b>Reference Code:</b> #Promocode#</p>
<p>#EmailMessage#</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="10" width="100%" style="background-color: #FFFFFF; width: 100%; max-width: 600px;">
<tr>
<td align="center" valign="top" width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; max-width: 600px; border-collapse: separate; border-radius: 2em;">
<tr>
<td class="large-button" align="center" valign="middle" width="100%" style="color: #FFFFFF; font-family: Arial; font-size: 100%; font-weight: bold; line-height: 125%; padding: 10px; text-align: center;">
<center>Click Here to Access Your Reward
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" align="left" valign="top" width="100%">
<p>If you do not yet have a card, please hold onto this email. You will receive your card shortly and can accept your reward at that time.</p>
<p>If you need help, email service#prepaidcodecenter.com or call Cardholder Services at 1-877-325-8444 during standard business hours.</p>
</td>
</tr>
<tr>
<td class="content" align="center" valign="top" width="100%">
<center>
<p>Program issued by The Bancorp Bank, Member FDIC, pursuant to a license from Visa U.S.A. Inc.</p>
</center>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>