I'm having a trouble to position an image on top og 2 different backgrounds on html email.
web view is fine but for emails it's not. I need this code to preforme on all email clients.
here is the layout of what it supposed to look like, and how it is actually look like.
layout
it seems that the image can't get the neative margin to go on top of the other background.
here is my code:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title></title>
<style type="text/css">
body{
Margin: 0;
padding: 0;
min-width: 100%;
background-color: #F3F3F3;
}
table{
border-spacing: 0;
}
td{
padding: 0;
}
img{
border: 0;
}
#media screen and (min-width: 600px) {
}
#media screen and (max-width: 600px) {
}
</style>
<!--[if mso]>
<style>
body{
font-family: Helvetica, Arial, sans-serif!important;
text-align: center!important;
display: inline-block!important;
}
table{
border-collapse: collapse!important;
}
</style>
<![endif]-->
</head>
<body>
<div style="width: 100%; table-layout: fixed; background-color: #F3F3F3; padding-bottom: 20px; text-align: center;">
<table style="background-color: white; color: #2E4A63; margin: 0 auto; width: 100%; max-width: 600px; border-spacing: 0; padding-bottom: 20px;" width="100%" align="center">
<tr>
<td>
<table style="direction: ltr;" width="100%">
<tr>
<!-- Body Text -->
<td align="center" style="text-align: center;">
<h1 style="font-size: 30px; margin: 45px auto 20px auto; line-height: 32px;">
Highlight text
</h1>
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0 auto 37px auto;">
Paragraph text
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 10px; padding-bottom: 50px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 55px; background-color: #ff3f4e; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button</span>
</a>
</td>
</tr>
<!-- HERO 2 SECTION -->
<tr>
<td>
<table style="background-image: url('urlbackground.png'); background-size: cover; background-repeat: no-repeat; width: 600px; max-width: 100%;">
<tr>
<!-- TOP SECTION -->
<td>
<!-- Highlight text -->
<h1 style="font-size: 30px; font-weight: unset; margin: 45px auto 15px auto; line-height: 32px; color: black;">
some content
</h1>
<!-- Paragraph text -->
<h3 style="font-size: 18px; font-weight: unset; line-height: 24px; text-align: center; margin: 0;color: black;">
more content
</h3>
</td>
</tr>
<tr>
<td align="center" style="text-align: center; padding-top: 50px; padding-bottom: 90px;">
<a href="#" tabindex="-1" target="_blank" style="padding: 15px 60px; background-color: #16BBDF; color: white; text-decoration: none; font-size: 20px; font-weight: bold; text-align: center; border-radius: 50px;">
<span style="color: white;">Button 2</span>
</a>
</td>
</tr>
</table>
<table style="background-image: url('urlbackground2.png'); background-size: cover; background-repeat: no-repeat; width: 600px; height: 250px; max-width: 100%;">
<tr>
<td>
<div style="margin-top: 50px; margin-left: 40px; color: black; text-align: left; padding: 0; width: 40%;">
<h1 style="font-size: 25px; line-height: 1.2;">
Highlight
</h1>
<h3 style="font-size: 16px; font-weight: unset;">
some text
</h3>
</div>
</td>
<td>
<img src="image.png" alt="image" width="283" style="float: right; padding: 0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Related
I've been banging my head against this problem for the last 6 hours. All the googling I've done so far is telling me that divs should work in emails after 2017. Every online html email tester I'm using shows my email as producing a perfectly well laid out email.
Then I send it in Gmail and it comes out a complete mess.
Here is the HTML rendered in browser:
https://i.imgur.com/NYjUdqX.png
Here is the HTML when sent through Gmail:
https://i.imgur.com/mPQ9Lbe.png
Here is the HTML code itself:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html charset=UTF-8 width=device-width, initial-scale=1"
name="viewport"
/>
<style>
#media (max-width: 600px) {
.email-container {
width: 390px !important;
}
.big-divider {
width: 324px !important;
}
h1 {
font-size: 23px !important;
}
.h1-2 {
margin-bottom: 23px !important;
}
.wine-pic {
width: 324px !important;
height: 262px !important;
}
h2 {
font-size: 18px !important;
width: 330px !important;
}
.test-promo-box {
width: 226px !important;
height: 42px !important;
margin-bottom: 30px !important;
}
.desktop-icons {
display: none !important;
}
.mobile-icons {
display: block !important;
}
.female-founded {
font-size: 12px !important;
}
.last-paragraph {
width: 324px !important;
}
}
</style>
</head>
<body
style="
display: flex;
flex-direction: column;
align-items: center;
background-color: wheat;
font-family: Verdana, Geneva, Tahoma, sans-serif;
"
>
<div
class="email-container"
style="background-color: rgb(255, 252, 247); width: 600px"
>
<div style="display: flex; flex-direction: column; align-items: center">
<img
style="
margin-top: 28px;
margin-bottom: 21px;
width: 20px;
height: 20px;
"
src="https://keen-pike-986d32.netlify.app/images/BOXT_Final_Logo_Black_RGB.png"
/>
<hr class="big-divider" style="width: 500px; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
YOU'VE EARNED
</h1>
<h1
class="h1-2"
style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
"
>
BOXT BUCKS!
</h1>
<img
class="wine-pic"
src="https://keen-pike-986d32.netlify.app/images/wine_box.jpg"
style="width: 503px; height: 406px"
/>
<h2
style="
text-align: center;
margin-bottom: 20px;
font-size: 20px;
width: 500px;
"
>
Thanks for referring your friend to BOXT! As a start-up, every single
person who helps us spread the word about what we're up to makes a
huge impact.
</h2>
<h2
style="
text-align: center;
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
width: 500px;
"
>
As a thank you, we're sending you $64 in BOXT Bucks! That'll get you
your next BOXT on us — aka four bottles of fine wine delivered
directly to your door from our Napa winery.
</h2>
<h2
style="
text-align: center;
margin-top: 0;
margin-bottom: 21px;
font-size: 20px;
width: 500px;
"
>
Enter the code below at checkout when purchasing your next BOXT.
</h2>
<div
class="test-promo-box"
style="
height: 42px;
width: 226px;
background-color: rgb(146, 191, 197);
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 37px;
"
>
<h3 style="text-align: center; font-size: 15px">TEST PROMO CODE</h3>
</div>
<hr class="big-divider" style="width: 500px; margin-top: 0" />
<h2 style="font-size: 20px; margin-bottom: 11px; text-align: center">
WHY BOXT?
</h2>
<hr style="width: 18px; margin-top: 0; margin-bottom: 25px" />
<div
class="desktop-icons"
style="display: flex; flex-direction: column; align-items: center"
>
<div
style="
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
width: 500px;
margin-bottom: 29px;
"
>
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</div>
<div
style="
margin-top: 10px;
margin-bottom: 35px;
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(4, 1fr);
justify-items: center;
width: 380px;
"
>
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</div>
</div>
<div class="mobile-icons" style="display: none">
<div
style="
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 8px;
justify-items: center;
align-items: center;
"
>
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</div>
</div>
<hr style="width: 63px; margin-top: 0; margin-bottom: 30px" />
<p
style="
margin-bottom: 5px;
margin-top: 0;
font-size: 13px;
text-align: center;
"
>
Questions? Contact hello#drinkboxt.com
</p>
<p
style="
margin-top: 0;
margin-bottom: 30px;
font-size: 13px;
text-align: center;
"
>
#drinkboxt | drinkboxt.com
</p>
<hr style="width: 63px; margin-top: 0; margin-bottom: 37px" />
<h3
class="female-founded"
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
class="big-divider"
style="width: 500px; margin-top: 0; margin-bottom: 15px"
/>
<p style="text-align: center; font-size: 9.5px; margin-top: 0">
*Excludes profiles Three and Six
</p>
<p style="text-align: center; font-size: 11px">
DRINK BOXT LLC, 7601 S Congress Ave #150, Austin, TX 78745
</p>
<p
class="last-paragraph"
style="
width: 500px;
text-align: center;
font-size: 11px;
margin-bottom: 97px;
"
>
*Offer valid in the form of BOXT gift cards. Redeem up to 12 months of
BOXT on us. Offer cannot be combined with any other promotion or new
member offers and discounts, subject to DRINK BOXT, LLC Terms &
Conditions. Void where prohibited. Subject to DRINK BOXT, LLC Terms &
Conditions. Members never pay shipping and can pause, change profile
or cancel at any time. Subscription is ongoing until canceled. Email
communication is intended for those 21+. Must be 21+ to order and
receive wine shipment. Void where prohibited. DRINK BOXT, LLC cannot
ship to AK, AR, DE, HI, IN, MS, RI, UT, WV.
</p>
</div>
</div>
</body>
</html>
I've tried deleting various parts of the code, including the entire block, the media queries, nothing seems to change the outcome.
If anyone could please help me figure this out, I will be eternally grateful.
I mean <div>s may work in emails but media queries don't, at least not in all email cients, and display: flex and display: grid DEFINITELY won't work -- emails are like using HTML 4 so a lot of the modern conveniences don't exist. Take a look at the templates on Cerberus. These are the most solid email design patterns I know of. I have been using them myself for 5+ years now, in my eyes [opinion] -- this is the email standard. I mean Litmus even use it for their paid email builder
So it looks like a lot of CSS is not supported in email still, for example flex and grid. Luckily, media queries are supported on gmail at least.
The solution in the end for me was to rewrite everything using tables. It now functions flawlessly.
Here is my functioning tables code for reference:
<html>
<head>
<meta
http-equiv="Content-Type"
content="text/html charset=UTF-8 width=device-width, initial-scale=1"
name="viewport"
/>
<style>
#media (max-width: 600px) {
.desktop-icons {
display: none !important;
}
.mobile-icons {
display: block !important;
}
.female-founded {
font-size: 12px !important;
}
.unique-code {
font-size: 16px !important;
}
.last-paragraph {
font-size: 9.5px !important;
}
}
</style>
</head>
<body>
<div id="email" style="width:600px;margin: auto;background:#FFFCF7; font-family: Verdana, Geneva, Tahoma, sans-serif;">
<table role="presentation" border="0" align="center" cellspacing="0">
<tr>
<td>
<img style="
margin-top: 28px;
margin-bottom: 21px;
width: 20px;
height: 20px;
" src="https://keen-pike-986d32.netlify.app/images/BOXT_Final_Logo_Black_RGB.png">
</td>
</tr>
</table>
<hr class="big-divider" style="width: 85%; margin-top: 0" />
<h1 style="text-align: center; font-size: 28px; margin-bottom: 2px">
HERE'S $10 OFF
</h1>
<h1 class="h1-2" style="
text-align: center;
margin-top: 0;
margin-bottom: 16px;
font-size: 28px;
">
YOUR FIRST BOXT!
</h1>
<!-- Header -->
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center">
<img class="wine-pic" src="https://keen-pike-986d32.netlify.app/images/wine_box.jpg" style="width: 503px; height: 406px" />
</tr>
</td>
</table>
<!-- Body 1 -->
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="padding: 15px 30px 10px 15px;">
<h2 class="unique-code" style="
text-align: center;
margin-top: 0;
margin-bottom: 5px;
font-size: 20px;
font-weight: 500;
">
Enter the unique code below at
</h2>
<h2 class="unique-code" style="
text-align: center;
margin-top: 0;
margin-bottom: 0;
font-size: 20px;
font-weight: 500;
">
checkout for $10 off your first BOXT.
</h2>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0">
<tr>
<td align="center">
<div
class="test-promo-box"
style="
height: 42px;
width: 226px;
background-color: rgb(146, 191, 197);
margin-bottom: 37px;
"
>
<h3 style="text-align: center; font-size: 15px; padding-top: 11px;">TEST PROMO CODE</h3>
</div>
</tr>
</td>
</table>
<hr class="big-divider" style="width: 85%; margin-top: 0" />
<!-- Body 2-->
<div class="desktop-icons">
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</td>
</tr>
</table>
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 90px;">
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 30px;">
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 10px 30px 30px;">
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 10px 90px 30px 30px;">
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</td>
</tr>
</table>
</div>
<div class="mobile-icons" style="display: none;">
<table role="presentation" border="0" width="100%" cellspacing="0">
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 102px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_1.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 46px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_2.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 51px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_3.png"
/>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 80px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_4.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 64px; height: 61px"
src="https://keen-pike-986d32.netlify.app/images/img_5.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 50px; height: 57px"
src="https://keen-pike-986d32.netlify.app/images/img_6.png"
/>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 120px;">
<img
style="width: 74px; height: 58px"
src="https://keen-pike-986d32.netlify.app/images/img_7.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 10px 30px 30px;">
<img
style="width: 57px; height: 64px"
src="https://keen-pike-986d32.netlify.app/images/img_8.png"
/>
</td>
<td align="center" style="vertical-align: top;
padding: 30px 120px 30px 30px;">
<img
style="width: 50px; height: 63px"
src="https://keen-pike-986d32.netlify.app/images/img_9.png"
/>
</td>
</tr>
</table>
</div>
<hr style="width: 63px; margin-top: 0; margin-bottom: 30px" />
<p
style="
margin-bottom: 5px;
margin-top: 0;
font-size: 13px;
text-align: center;
"
>
Questions? Contact hello#drinkboxt.com
</p>
<p
style="
margin-top: 0;
margin-bottom: 30px;
font-size: 13px;
text-align: center;
"
>
#drinkboxt | drinkboxt.com
</p>
<hr style="width: 63px; margin-top: 0; margin-bottom: 37px" />
<h3
class="female-founded"
style="
font-size: 13.5px;
margin-top: 0;
margin-bottom: 16px;
text-align: center;
"
>
FEMALE FOUNDED. BORN IN AUSTIN. MADE IN NAPA.
</h3>
<hr
class="big-divider"
style="width: 85%; margin-top: 0; margin-bottom: 15px"
/>
<table role="presentation" border="0" align="center" cellspacing="0">
<tr>
<td>
<p style="text-align: center; font-size: 9.5px; margin-top: 0">
*Excludes profiles Three and Six
</p>
<p style="text-align: center; font-size: 11px">
DRINK BOXT LLC, 7601 S Congress Ave #150, Austin, TX 78745
</p>
<p
class="last-paragraph"
style="
text-align: center;
font-size: 11px;
padding-bottom: 97px;
margin: 0 5px 0 5px;
">
*Offer valid in the form of BOXT gift cards. Redeem up to 12 months of
BOXT on us. Offer cannot be combined with any other promotion or new
member offers and discounts, subject to DRINK BOXT, LLC Terms &
Conditions. Void where prohibited. Subject to DRINK BOXT, LLC Terms &
Conditions. Members never pay shipping and can pause, change profile
or cancel at any time. Subscription is ongoing until canceled. Email
communication is intended for those 21+. Must be 21+ to order and
receive wine shipment. Void where prohibited. DRINK BOXT, LLC cannot
ship to AK, AR, DE, HI, IN, MS, RI, UT, WV.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>
I want to be explicitly clear, this is for an HTML EMAIL. I am trying to set a background image with a lower opacity. I have blocked out a line of code that is useless since it doesn't render on email. However, I can't find a way to code in a background image that does render on email and also can have text over it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NASCAR Fan Email</title>
<style type="text/css">
#media only screen and (max-width:900px) {
.photoText {
left: 100px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table class="outer" style="margin: 0 auto; border-spacing: 0; align-items: center;
font-family: Stainless-Bold; color: black; width: 100%;">
<tr>
<td>
<tr>
<td style="padding: 0;">
<table style="border-spacing: 0; width: 100%;">
<tr>
<td class="fanCouncil" style="background-color: white; padding: 80px; text-align: center; border-bottom: 15px solid; border-image: linear-gradient(to right, #ffd659 25%, #e4002b 25%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;">
<img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="1200">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=" photoText " style="position: absolute; top: 400px; left: 260px; ">
<p style="
line-height: 2.2;
max-width: 1200px;
font-size: 40px; padding: 20px;" class=" entryText ">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" clickStart " style=" font-size: 40px; font-weight: bold;
text-transform: uppercase;
text-decoration: none; color: black;">Click here to Start </a>
<p style="
line-height: 2.2;
max-width: 1200px;
font-size: 40px;" class=" unableText "> If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<a style=" font-size: 40px; color: black;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" copyLink ">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>
<p style="line-height: 2.2; max-width: 1200px; font-size: 40px;" class=" thankYou ">Thank you!<br>Official NASCAR Fan Council</p>
</td>
</tr>
<tr>
<td>
<!-- <img style="opacity: 0.3; position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; " class=" fanPhoto " src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg " alt="NASCAR Daytona Fan Photo"> -->
</td>
</tr>
</table>
</tr>
</td>
</body>
</html>
instead of setting the background of the body you can use a div element, make it fit to screen, and make it fixed. then put an img inside and scale it to fit the div. you can also use span and it will look pretty much the same. the only difference is that span is an inline container and not a block.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NASCAR Fan Email</title>
<style type="text/css">
#media only screen and (min-width:700px) {
.photoText {
left: 100px !important;
}
}
#media only screen and (max-width:600px) {
.photoText {
left: 110px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!-- added div -->
<div id="fixed-background" style="width: 100vw; height: 100vh; margin: 0px; z-index: -1; padding:0px; position: fixed;"><img style="opacity: 0.3; width: 100%; height: 100%; object-fit: cover; display: inline-block;" class=" fanPhoto " src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NASCAR_FanCouncil_DaytonaFanPhoto_1-1.jpg " alt="NASCAR Daytona Fan Photo"></div>
<table class="outer" style="margin: 0 auto; border-spacing: 0; align-items: center;
font-family: Stainless-Bold; color: black; width: 100%;">
<tr>
<td style="padding: 0;">
<table style="border-spacing: 0; width: 100%;">
<tr>
<td class="fanCouncil" style="background-color: white; padding: 80px; text-align: center; border-bottom: 15px solid; border-image: linear-gradient(to right, #ffd659 25%, #e4002b 25%, #e4002b 30%, #e4002b 60%, #007ac2 40%, #007ac2 75%) 5;">
<img class="fanHeader" src="https://www.nascar.com/wp-content/uploads/sites/7/2022/01/07/NFC_Horiz_BlackRGB.png" alt="Fan Email" width="1200">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=" photoText " style="position: absolute; top: 400px; left: 260px; ">
<p style="
line-height: 2.2;
max-width: 1200px;
font-size: 40px; padding: 20px;" class=" entryText ">Hello, <br> <br> We’d like to invite you to participate in a short survey about this past weekend’s races. This survey should take less than 5 minutes and will be open through Wednesday, August 25. We want to know what you think!</p>
<a href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" clickStart " style=" font-size: 40px; font-weight: bold;
text-transform: uppercase;
text-decoration: none; color: black;">Click here to Start </a>
<p style="
line-height: 2.2;
max-width: 1200px;
font-size: 40px;" class=" unableText "> If you are unable to click the link, please copy and past the full URL below into your browser:</p>
<a style=" font-size: 40px; color: black;" href="http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J " class=" copyLink ">http://www.nascarfancouncil.com/c/al/5YVqVGmxA5g98218UalK-Bl/5bn1vdLmXO68WPcydpyM7J</a>
<p style="line-height: 2.2; max-width: 1200px; font-size: 40px;" class=" thankYou ">Thank you!<br>Official NASCAR Fan Council</p>
</td>
</tr>
</table>
</body>
</html>
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?
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.
Receiving odd behaviour of a link in xslt that breaks the page.
I am using XSLT to transform an XML list of manuals. I have included a link to open the manual, (as .pdf) with a target="_blank"
In Internet Explorer 8, (Yes, we are still having to use this), the link functions normally, opening the pdf in a new window, but the page the link was one gets shifted down about 1300-1500px. Refreshing the page fixes it, and it seems in testing that opening the same link a second time and future times it does not exibit this behaviour.
It does not shift the header or menu containers, only the body container.
I have used the developer tools to get the html it is using and do not see where or why it would be doing this. EDIT: I see at the bottom of the html output the css and it appears to have some extreme values for positions maybe?
Relevant (HTML) code:
<!-- saved from url=(0071)http://www.example.com/unit/admin/instructions/instructions.xml -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- Generated by Developer Tools. This might not be an accurate representation of the original source file -->
<HTML>
<HEAD>
<TITLE>Intranet</TITLE>
<META content="text/html; charset=UTF-16" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="../../../scripts/jquery-1.11.1.min.js"></SCRIPT>
<LINK rel=stylesheet type=text/css href="../../../css/tacamo.css">
</HEAD>
<BODY style="ZOOM: 1">
<DIV style="MARGIN: auto" id=wing-page-container>
<DIV id=header-container><IMG alt="" align=middle src="../images/elements/header.png" width=1000></DIV>
<DIV id=nav-container>
<DIV id=menu>
<UL>
<LI><A id=menu href="http://www.example.com/unit/admin/admin.html">BACK</A></LI>
</UL>
</DIV>
</DIV>
<DIV id=instructions-content-container>
<TABLE class=instructions align=center>
<TBODY>
<TR>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Instruction Number</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 75px">Date</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 25px">COG</TH>
<TH style="WIDTH: 500px">Description</TH>
<TH style="TEXT-ALIGN: center; WIDTH: 50px">Open</TH>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">1</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">09/24/1997</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 1 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/1-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #ffffff">
<TD style="WIDTH: 75px">2</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">03/26/2010</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/2-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
<TR style="BACKGROUND-COLOR: #c0d0e0">
<TD style="WIDTH: 75px">3</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 75px">04/10/2014</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px">GEORGE</TD>
<TD style="WIDTH: 500px">MANUAL ABOUT 3 THING</TD>
<TD style="TEXT-ALIGN: center; WIDTH: 25px"><A href="http://www.example.com/unit/admin/instructions/3-thing.pdf" target=_blank><IMG border=0 src="../images/elements/pdf-logo.gif" width=25 height=25></A></TD>
</TR>
</TBODY>
</TABLE>
</DIV>
<DIV id=footer-container>
<P class=footer>Admin POC: Admin ITPOC's (555-1212)</P>
</DIV>
</DIV>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/1-thing.pdf</DIV>
</DIV>
<DIV style="Z-INDEX: 459008; BORDER-BOTTOM: 0px; POSITION: absolute; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; LINE-HEIGHT: 0; MARGIN: 0px; PADDING-LEFT: 0px; WIDTH: 25px; PADDING-RIGHT: 0px; DISPLAY: block; HEIGHT: 25px; VISIBILITY: visible; OVERFLOW: hidden; BORDER-TOP: 0px; TOP: 5808px; BORDER-RIGHT: 0px; PADDING-TOP: 0px; LEFT: 1346px" class=IEDevToolbarAddedElement>
<DIV style="BORDER-BOTTOM: #ff99cc 1px solid; TEXT-ALIGN: left; FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=80); BORDER-LEFT: #ff99cc 1px solid; PADDING-BOTTOM: 1px; LINE-HEIGHT: 100%; BACKGROUND-COLOR: #ffcccc; MARGIN: 0px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; DISPLAY: block; FONT-FAMILY: 'Sans Serif',serif; FLOAT: left; VISIBILITY: visible; COLOR: black; FONT-SIZE: 11pt; OVERFLOW: visible; BORDER-TOP: #ff99cc 1px solid; BORDER-RIGHT: #ff99cc 1px solid; PADDING-TOP: 1px; font-decoration: none" class=IEDevToolbarAddedElement>href=http://www.example.com/unit/admin/instructions/3-thing.pdf</DIV>
</DIV>
</BODY>
</HTML>