I have been working on an html email. It has generally worked in tests but gets mangled in Outlook. I have seen the questions on here and have been reading a decent amount on it, but after trying a variety of fixes nothing's worked. I am a total novice using dreamweaver, so I know the code might be horrendous:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<title>EmailTemplate-Hybrid</title>
</head>
<body width="100%" bgcolor="#FFFFFF" style="margin: 0;" yahoo="yahoo">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#e0e0e0" style="border-collapse:collapse;">
<tr>
<td><center style="width: 100%;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;"> Historic Renovation. </div>
<!-- Visually Hidden Preheader Text : END -->
<div style="max-width: 100%;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width"100%" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
<table width="60%" height="auto" align="right">
</table></div></center></td><td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/gallery/residential/">GALLERY </a></td>
<td style="font-size: 2.75vw;"><a style="color: black" href="http://www.ernstbrothers.com/services/">SERVICES</a></td>
</tr></table>
<table class="container " width="100%">
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b9d5dc85-0cfc-470f-a3e6-7abaffb8849d.jpg" width="100%">
</td>
</table>
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table width="100%">
<tr>
<td style="background: #FFFFFF; font-size: 4vw; font-family: serif; text-align: right " width="100%" height="125px"><blockquote>
<p><a style="color: black" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">HISTORIC RENOVATION</a> </p>
</blockquote>
</td>
</tr>
</table>
<!-- 1 Column Text : BEGIN -->
<table width="100%">
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b1bd7d4c-a5f9-4081-a543-b94b4cf6d9d2.jpg" width="100%">
</td>
</tr>
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/328fa1bb-1858-4f8c-9c89-2002fd132365.jpg" alt="" width="100%">
</td>
</tr>
</table>
<table>
<tr>
<td>
<h1 style="font-family: sans-serif; text-align: left; font-size: 4vw; line-height: auto; padding-top: 20px; padding-left: 20px; color: #000000;"> Another Project in <span style="color: #4CA7A0"><a style="color: teal" href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/">Bucks County!</a></span></h1>
</td>
</tr>
<tr>
<td>
<p style="text-align: center; font-family: sans-serif; font-size: 3vw; line-height: auto; color: #000000"> Ernst Brothers is fulfilling the new owners vision for this property in Solebury, creating a serene guest house from the bones of this 18th-century farmhouse.</p>
</td>
</tr>
</table>
<!-- Button : Begin -->
<table cellspacing="0" cellpadding="0" border="0" align="right" style="margin: auto;">
<tr>
<td style="border-radius: 3px; background: #222222; text-align: center;" class="button-td"><a href="http://ernstbrothers.com/blog/solebury-guest-house-part-18th-century-bones/" style="background: #222222; border: 15px solid #222222; padding: 0 10px; color: #ffffff; font-family: sans-serif; font-size: 2.75vw; line-height: 1.1; text-decoration: none; display: block; border-radius: 3px; font-weight: bold;" class="button-a">
<!--[if mso]> <![endif]-->Read <span style="text-align: left"></span>More
<!--[if mso]> <![endif]-->
</a>
</td>
</tr>
</table>
<!-- Button : END -->
<!-- Visit US : BEGIN -->
<!-- Two Even Columns : END -->
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
<table width="100%">
<tr>
<td>
<a href="http://www.ernstbrothers.com/contact-us/"><img style="padding-top: 40px; display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/374d5aa5-5dd8-4a96-89e2-2a392f6092c3.jpg" alt="" width="100%">
</a></td>
</tr>
<tr>
<td>
<img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/4441e9d8-1138-44e9-95ee-cd59c1019d9d.jpg" width="100%">
</td>
</tr>
</table>
<table width="100%" height="200px" style="background: #FEFDFD">
<td style="text-align: center; font-family: 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif; font-size: 4vw; line-height: auto;"><a style="color: black" href="http://maps.apple.com/?q=Ernst+Brothers&sll=40.186293,-75.227316&z=10&t=s"> 1104 North Bethlehem Pike <br>
Spring House, PA 19477</a></td>
</table>
<table width="100%" height="147" border="1" align="center" style="background-color: darkgrey">
<tbody>
<tr>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/391b81fc-92ee-4072-b859-dc538485f046.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/e5447cda-cd97-45b1-9411-6703b985f3b2.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/b88e145d-feda-4b66-86fe-6aea5083e760.png" alt="" width="80%"></td>
<td width="15%" align="center"><img style="display: block" src="https://gallery.mailchimp.com/79b319fc2b7f0621f7b66caec/images/ba8cce9e-385a-4827-964d-fa608ffce6b2.png" alt="" width="80%"></td>
<td width"40%" style="font-size: 3vw; font-family: sans-serif; text-align: center"><a style="color: white" href="tel:+2154535124">215-453-5124</a></td>
</tr>
</tbody>
</table>
<!-- Email Footer : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="canspamBarWrapper" style="background-color:#FFFFFF; border-top:1px solid #E5E5E5;">
<tr>
<td align="center" valign="top" style="padding-top:20px; padding-bottom:20px;">
<table border="0" cellpadding="0" cellspacing="0" id="canspamBar">
<tr>
<td align="center" valign="top" style="color:#606060; font-family:Helvetica, Arial, sans-serif; font-size:11px; line-height:150%; padding-right:20px; padding-bottom:5px; padding-left:20px; text-align:center;">
This email was sent to *|EMAIL|*
<br>
<em>why did I get this?</em> unsubscribe from this list update subscription preferences
<br>
*|LIST:ADDRESSLINE|*
<br>
<br>
*|REWARDS|*
</td>
</tr>
</table>
</td>
</tr>
</table>
<style type="text/css">
#media only screen and (max-width: 480px){
table#canspamBar td{font-size:14px !important;}
table#canspamBar td a{display:block !important; margin-top:10px !important;}
}
</style>
</center></body>
</html>
Here is how it's intended to look, opened in chrome from the .html on my desktop. IMG
Here is what it looks like in Outlook. IMG2
Any help would be greatly appreciated.
Email is NOT front-end Web development. I used to use Dreamweaver for email development but had to abandon it since it would not let me use a mix of html 5 and older versions. That's the problem, email programs support a limited version of CSS3 and some don't support it at all.
Outlook is notorious because it doesn't follow a standard HTML rendering engine like Webkit. It's based on Microsoft Word.
Widths
Outlook doesn't really support a width wider than 800px. Gmail is similar. So width=100% will give you inconsistent results.
Fonts
Outlook straight up doesn't understand something like style="font-size: 2.75vw;" Try something like style="font-size: 18px;"
Images
For images, Outlook will respect a something like <img width="580"> but may not respond to <img width="100%">. I find it ignores widths in the inline style, but other programs use them very well.
Try something like this:
<img src=""http://www.gwally.com/news/photos/catintinfoilhat.jpg"
alt="A boy and his cat" width="580" align="center" style="max-width: 100%; width: 580px;"/>
I'm having issues getting my testing accounts to work, so I can't give as much help as you need. I think if you address these issues, it will take you further down the path to a consistent email.
For further information, this is a great resource on what works in email:
http://campaignmonitor.com/css/
Related
Im sending a mail from a template using Mailgun. But renders incorrectly on Gmail.
Im not using any style tags or any complex css.
ps: im not sure how much text i should add to be accpeted.
Here is the html template
Template:
<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Communication</title>
</head>
<body style="margin:0;padding:0;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top" bgcolor="#fff" style="background-color:#fff;">
<table width="600" border="0" cellspacing="0" cellpadding="0" style="border: solid 1px #000;margin-top:60px;">
<tr>
<td align="left" valign="top" bgcolor="#001529" style="background-color:#001529; font-family:Arial, Helvetica, sans-serif; padding:10px;">
<div style="font-size:36px; color:#fff;">
<b>FORGOT YOUR PASSWORD?</b>
</div>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#fff" style="background-color:#fff;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" style="color:#525252; font-family:Arial, Helvetica, sans-serif; padding:10px;">
<div style="font-size:16px;">
Dear {0},
</div>
<div style="font-size:16px;">
<p>A request has been received to reset your password for your -- account. Please click the button below to reset your password.</p>
<center>
<button type="button" title="Confirm Account Registration" style="background: #00415a;border:1px solid #00415a;">
<a href="{1}" style="font-size:22px; padding: 6px 12px; color: #f2faff;text-decoration:none;display:inline-block">
Reset Password Now
</a>
</button>
</center>
<p style="font-size:16px;">If you did not make this request please igonore this email.</p>
</div>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle" style="padding:15px; background-color:#00415a; font-family:Arial, Helvetica,sans-serif;font-size:12px; color:#f2faff;">
<p>Regards<br/>
-- © {2}</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how it renders in Gmail:
Gmail:
Give a line-height to both title and button text, and should fix it.
Also i recommend against using margin-top or bottom in emails/tables but always go with padding instead. For some reason is more compatible. If you need some space above for instance, create a empty div above the element and give it a height.
Minifying the template seemed to fix the issue.
Bear in mind this is not a Gmail issue rather a Mailgun issue.
I am trying to create the header section for a under construction HTML email. I am currently using background-img url to use the image with content overlaying it. But Outlook 2007, 2010 and 2016 does not support background-images on tables. I have found this workaround through the use of divs. However, div's are not as consistent as tables (for emails) so I want to avoid the use of div's.
Is there a way to achieve this strictly though table structure?
Current approach:
<table border="0" cellpadding="0" cellspacing="0" style="max-width:692px; background-image: url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/header-image.png);" width="692" height="400">
<tbody>
<tr>
<td valign="top" align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
<a href="#" target="_blank">
<img alt="LOGO" src="#" style="display:block;border:0px;
font-family:Helvetica,Arial,sans-serif;color:#ffffff">
</a>
</td>
<!-- SOCIAL ICONS -->
<td style="text-align: right;">
<!--YouTube -->
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/youtube-icon.png">
<!--Twitter -->
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/twitter-icon.png">
<!--LinkedIn -->
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/linkedin-icon.png">
<img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/facebook-icon.png">
</td>
</tr>
<!----------------->
<!-- HEADER TEXT -->
<!----------------->
<tr>
<td colspan="2" style="padding-top:40px;">
<!-- PADDING-->
</td>
</tr>
<tr>
<td colspan="2" style="height: 100px; color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px; padding-bottom: 10px; text-transform: uppercase;">
TEXT<br> HERE
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
If you want a background image to work in Outlook 2007-2016, there is only one way it will work and that is to use Vector Markup Language (VML). It doesn't really use divs, it uses xml. The div is the wrapper.
I made a Fiddle so you can see this code in action: https://jsfiddle.net/wallyglenn/7zLaLrfx/
This is the code:
<div style="background-color:#ff0000; width:600px;">
<!--[if (gte mso 9)|(IE)]><!-- -->
<v:background xmlns:v="urn:schemas-microsoft-com:vml" fill="t">
<v:fill type="tile" src="http://www.gwally.com/news/photos/catintinfoilhat.jpg" color="#ff0000"/>
</v:background>
<![endif]-->
<table height="450" width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" align="left" background="http://www.gwally.com/news/photos/catintinfoilhat.jpg">
<h1 style="text-align: center; color: #ffffff;-webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black; font-family: Arial, san-serif;">
Background Image with Text on Top
</h1>
</td>
</tr>
</table>
</div>
What you are doing is inserting a piece of xml that directs Outlook to include a background image. Outlook will ignore your background="" but display the rest of the table.
This works reliably and sadly, there really is no alternative.
The original code was taken from https://backgrounds.cm with modifications.
Good luck.
This is what you might be looking for. I have been eliminating divs from my code as much as possible unless i am coding hybrid. Below is a code i have customized from the link you mentioned in your post.
Your content will be the 3 tables inside the VML code. Be sure to change the width and height of the VML to make it work. Just a note as i forget at times but pick it up during testing.
#media only screen and (max-width:480px) {
.hidden{display:none !important;}
.backgroundCover{background-size: cover; background-position:center center !important;}
}
<table style="max-width: 600px;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="backgroundCover" style="background: url('https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg'); background-image: url('https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg'); background-repeat: no-repeat;">
<!-- [if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:338px;">
<v:fill type="frame" src="https://syferdoesweb.files.wordpress.com/2017/08/background-example.jpg" color="#463783" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table class="hidden" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 70px; line-height: 0px; font-size: 0px;" height="120"></td>
</tr>
</tbody>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 30px; text-align: center; color: #ffffff; font-weight: bold; padding: 50px 10px 0px 10px;">Beautiful background in email</td>
</tr>
<tr>
<td style="font-family: Helvetica, Arial, 'sans-serif'; font-size: 20px; text-align: center; color: #ffffff; font-weight: normal; padding: 0px 0px 50px 0px;">no more crazy nights</td>
</tr>
</tbody>
</table>
<table class="hidden" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="height: 70px; line-height: 0px; font-size: 0px;" height="120"></td>
</tr>
</tbody>
</table>
<!-- [if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</tbody>
</table>
What was done above:
Created outer table with 3 background images placed in td. This means that every combination of the background for web is available.
Inside the above table VML is added. Things to change on VML: Image path, image dimensions (height & width) and fall back color.
Inside the VML comes all the HTML that is needed to style the block which will go above the background image.
There are two extra tables added which is being used a space both the class of hidden. If media queries are read by the email client it will hide those tables.
I had written a blog post about this which can be found here: #SyferDoesEmail.
Let me know if it works for you.
Try to use 'background' property instead 'background-image':
background: url('image.jpg') no-repeat cover;
I set up a simple 2-column (on desktop screens) HTML Email based on code I got from a manual (course I did some time ago). When I tested the email I found it displayed correctly on Android mobile phones (the 2-column display changes to a 1-column display as required), however, when viewed in iPhone 5 (haven't tried iPhone 6 or greater) the email does not behave responsively i.e. the 2-column display does not change to a single column display as it should.
See email code CSS/ HTML below. I've also set up a CodePen at:
https://codepen.io/Ben10/pen/GvGgZo
I wonder if anyone can point out what is wrong with (or missing from) the CSS/HTML code. How can I fix this problemo? I've checked around the web but I'm now more confused than ever. HTML email seems to be a minefield of problems.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date Night Exclusive Picks Inlined Complete</title>
<style>
#media only screen and (max-width:680px){
/*.wrapper{*/
table[class="wrapper"]{
max-width:680px !important;
width:100% !important;
}
td[class="deviceWidth"]{
display:block !important;
padding:0 !important;
width:100% !important;
}
td[class="row"]{
padding:15px 10px !important;
}
[class="deviceWidth"] p{
font-size:16px !important;
}
a[class="bookLink"]{
font-size:16px !important;
}
/*.resImg{*/
img[class="resImage"]{
height:auto !important;
width:100% !important;
}
/*h1{*/
[class="wrapper"] h1{
font-size:24px !important;
}
[class="wrapper"] h2{
margin-top:15px !important;
}
} /* close media query max-width:680px */
#media only screen and (max-width:480px){
td[class="mobileBanner"]{
background-image:url(http://www.nobledesktop.com/nl-date-
night/img/header-mobile#2x.png) !important;
background-repeat:no-repeat !important;
background-position:center top !important;
background-size:cover !important;
}
[class="mobileBanner"] img{
display:none !important;
}
[class="mobileBanner"] a{
display:block !important;
padding-top:43.333% !important;
}
} /* close media query max-width:480px */
</style>
</head>
<body style="margin: 0;">
<table class="wrapper" align="center" border="0" cellpadding="0"
cellspacing="0" width="680">
<tr>
<td class="mobileBanner" align="center" width="100%">
<p class="preheader" style="color: #ffffff;font-family: Helvetica,
Arial, sans-serif;font-size: 2px;line-height: 140%;margin-bottom:
0;margin-top: 0;display: none;">Punch-drunk in love? Go boxing with your
sweetheart. This and more great dates inside!</p>
<a href="#" target="_blank"><img class="resImage"
src="http://www.nobledesktop.com/nl-date-night/img/header.png"
width="680" alt="Date Night" style="display: block;border: none;" moz-do-
not-send="true"></a>
</td>
</tr>
<tr>
<td align="center" width="100%">
<!-- NESTED TABLE -->
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td class="mainContent" align="center" width="100%"
style="padding: 20px;border-bottom: 10px solid #e64a33;">
<h1 style="color: #69655c;font-family: Arial, Helvetica,
sans-serif;font-size: 40px;font-weight: bold;margin: 0;">This Week’s
Exclusive Picks</h1>
<!-- LISTING ONE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-
night/img/couple-boxing#2x.jpg" width="290" alt="Couple Fighting"
style="display: block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">OUT OF THE BOX DATES: BOXING
FOR TWO</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">If you
enjoyed our punny joke, you’ll love our selection of unique and out
of the box dates. They’re designed to ignite a budding relationship
or bring some new spark to an old flame. Dinner and drinks is
yesterday’s news, so get geared up and fight it out in the ring or
take it down a level with lazy river meditation. Expect to see a new and
exciting date added to the date book every week. <a class="bookLink"
href="#" target="_blank" style="color: #e74b34; font-size: 10px; font-
weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING TWO -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;" bgcolor="#eeeeee">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/beer-
bar-label#2x.jpg" width="290" alt="Open Bar" style="display: block;border:
none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">NEW BAR CRAWL PACKAGE—ALSO AS
A DOUBLE DATE!</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You asked
and we delivered! Introducing our first optional double date package, the
Couples’ New York Bar Crawl. Spend a Friday or Saturday night
exploring the nightlife in a new area with your loved one and friends.
You’ll visit five different bars in close proximity to each
other—no cabs or transportation required. Most importantly, the
first drink at every bar is on us! Check it out now for the special grab a
date price! <a class="bookLink" href="#" target="_blank" style="color:
#e74b34;font-size: 10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LISTING THREE -->
<table align="center" border="0" cellpadding="0"
cellspacing="0" width="100%">
<tr>
<td class="row" align="center" width="100%"
style="padding:20px;">
<table align="center" border="0"
cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- LEFT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-right:10px;">
<a href="#" target="_blank"><img
class="resImage" src="http://www.nobledesktop.com/nl-date-night/img/milan-
canal#2x.jpg" width="290" alt="Canal Cruise - Milan" style="display:
block;border: none;" moz-do-not-send="true"></a>
</td>
<!-- RIGHT COLUMN -->
<td class="deviceWidth" align="left"
width="50%" valign="top" style="padding-left:10px;">
<h2 style="color: #696969;font-
family: Helvetica, Arial, sans-serif;font-size: 16px;line-height:
140%;margin-top: 0;margin-bottom: 0;">DELUXE WEEKEND: FAR-FLUNG AND
ROMANTIC</h2>
<p style="color: #363636;font-family: Helvetica, Arial, sans-serif;font-
size: 12px;line-height: 140%;margin-bottom: 0;margin-top: 0;">You two are
so busy that a 7-day work week is all too familiar. Time to de-stress and
take a weekend to remember why you work so hard. Put your routine on pause
and enjoy a short vacation to an enchanted location. Choose from over 15
exotic remote and not-so-remote locations. Weekend date prices include a
hotel for two, a bottle of wine, and a planned activity. <a
class="bookLink" href="#" target="_blank" style="color: #e74b34;font-size:
10px;font-weight: bold;">Book Now</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
First of all a table get responsive. Responsiveness only works upto some extend. you should use div and give float property to them. For example
<style>
.div1 {
max-width:680px !important;
width:100% !important;
}
.div1 > img {
max-width:200px !important;
width:100% !important;
float: left;
}
.div1 > .text-div {
max-width:480px !important;
width:100% !important;
float: right;
}
.clear-fix
{
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
</style>
<div class="div1">
<img src=""/>
<div class="text-div">
<h5>OUT OF THE BOX DATES: BOXING FOR TWO</h5>
<p>If you enjoyed our punny joke, you’ll love our selection of unique and out of the box dates.
They’re designed to ignite a budding relationship or bring some new spark to an old flame.
Dinner and drinks is yesterday’s news, so get geared up and fight it out in the ring or take it down a level with lazy river meditation.
Expect to see a new and exciting date added to the date book every week.</p>
</div>
</div>
And don't forget to add this meta tag in your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
you can find about clear-fix here:
What is a clearfix?
I'm having trouble getting an email blast to hide and display the h2 and ul tags. It works just fine in outlook and in most browser but on the iphone the display:block attribute is not respected. I also tried wrapping the content in a div tag and the attributes were ignored. Any ideas?
<!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" />
<title>WalkGreen™ Capabilities</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
#media (max-width: 767px) {
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none !important;
}
}
/* Media Query for mobile */
#media screen and (max-width: 480px) {
h2[class=visible-xs], ul[class=visible-xs] {
display: block !important;
}
p[class=align-center]{text-align:left !important;}
/* This resizes tables and images to be 100% wide with a proportionate width */
table[class=emailwrap], img[class=emailwrap]{width:100% !important; height:auto !important;}
h2[class=mobile-pad]{padding-left:8px !important; padding-right:8px !important;}
img[class=logo-sm]{width:35%;}
img[class=img-mob]{width:90% !important; height:auto !important;}
img[class=mbl-icon]{width: 32px !important; height:32px !important;}
td[class=mbl-pad-1]{padding-left:16px !important; padding-right:16px !important;}
td[class=mbl-pad-2]{padding-left:16px !important; padding-right:16px !important; text-align:left !important;}
td[class=mbl-pad-3]{padding-top:16px;}
td[class=border-off]{border-bottom:0 !important;}
a[class=mbl-button]{webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding-top:10px !important; padding-right:10px !important; padding-bottom:10px !important; padding-left: 10px !important; font-size:18px !important;}
/* Hide stuff on mobiles */
table[class=emailnomob],td[class=emailnomob],img[class=emailnomob],span[class=emailnomob]{display:none !important;}
td[class=emailcolsplit]{width:100%!important; float:left!important;}
a[class=emailmobbutton]{display:block !important;font-size:14px !important; font-weight:bold !important; padding:6px 4px 8px 4px !important; line-height:18px !important; background:#dddddd !important; border-radius:5px !important; margin:10px auto;width:70%; text-align:center; color:#111 !important; text-decoration:none; text-shadow:#fff 1px 0 0 ;}
/* This resizes body text for mobiles */
ul[class=emailbodytext],span[class=emailbodytext],a[class=emailbodytext] ,p[class=emailbodytext]{font-size:16px !important; line-height:21px !important;padding-right:16px !important;}
h2[class=emailh2],span[class=emailh2],a[class=emailh2]{font-size:22px !important; line-height:26px !important;}
td[class="mbl-header"]{padding-right:8px !important; padding-left:8px !important;}
}
</style>
</head>
<body style="background-color:#FFF;">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<!-- top disclaimer -->
<table class="emailnomob" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif; font-size:10px; text-align:center; padding-top:8px; padding-right:8px; padding-bottom:8px; padding-left:8px; color:#999">
<span>TROUBLE SEEING SOMETHING? </span><a style="color:#999;" href="#">VIEW IT ONLINE</a> OR <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a>
</td>
</tr>
</table>
<!-- content begins -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td>
<!-- top banner -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<img class="emailwrap" src="images/top-banner2.gif" alt="Exotic Hardwood Decking, Rainscreen and Fencing" />
</td>
</tr>
</table>
<!-- 3 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="mbl-pad-3">
<img src="images/products.gif" alt="Products" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Decking</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Angelyn <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Cumaru <br/> (1” x 5.5”) (1” x 3.5”) (7/8” x 5.5”)<br/> </li>
<li>Espresso Garapa <br/> (7/8” x 5.5”)<br/> </li>
<li>Gold Garapa <br/> (1” x 5.5”) (7/8” x 5.5”)<br/> </li>
<li>Tigerwood <br/> (1” x 3.5”)<br/> </li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Rainscreen & Siding</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none;">
<li class="emailbodytext">Profiling for any hidden siding fastener system</li>
</ul>
<h2 class="visible-xs" style="font-size:18px; font-family: Arial, sans-serif; display:none;"><span class="emailh2">Fencing</span></h2>
<ul class="visible-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px; display:none">
<li class="emailbodytext">Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/milling.gif" alt="Milling" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Custom Milling</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Tongue & Groove</li>
<li>Siding Profiles</li>
<li>Edge Grooving for hidden fastening systems</li>
<li>Anti skid decking</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<img src="images/delivery.gif" alt="Delivery" />
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">Options</h2>
<ul class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Large Volumes</li>
<li>LTL</li>
<li>Full Container or Trucks</li>
<li>Contractor Packs</li>
<li>Special Orders</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 column content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Rainscreen & Siding</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Profiling for any hidden siding fastener system</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<h2 class="hidden-xs" style="font-size:18px; font-family: Arial, sans-serif;">Fencing</h2>
<ul class="hidden-xs" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">
<li>Fence Boards</li>
</ul>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="200" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><p class="align-center" style="text-align:right; margin-top:0; margin-bottom:0;"><img src="images/logos.gif" alt="US Greenbuilding Council, Rainforest Alliance, FSC Certificate" /></p></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- species heading -->
<table style="background-color:#4982a5;" cellpadding="0" cellspacing="0" width="100%" align="center" >
<tr>
<td align="center">
<img src="images/species.gif" alt="Species" />
</td>
</tr>
</table>
<!-- species thumbnails -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/angelyn.jpg "width="110" height="119" alt="Angelyn" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Angelyn</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/cumaru.jpg "width="110" height="119" alt="Cumaru" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Cumaru</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/garapa.jpg "width="110" height="119" alt="Gold Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Gold Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/espresso-garapa.jpg "width="110" height="119" alt="Espresso Garapa" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Espresso Garapa</h2>
</table>
</td>
<td style="padding-bottom:15px; padding-top:15px;" class="emailcolsplit" width="120" valign="top" align="center">
<table cellpadding="0" cellspacing="0" align="center" width="100%">
<img class="emailwrap" src="images/tigerwood.jpg "width="110" height="119" alt="Tigerwood" />
<h2 class="emailh2" style="font-size:12px; font-family: Arial, sans-serif; text-align:center;">Tigerwood</h2>
</table>
</td>
</tr>
</table>
<!-- species content -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<h2 class="emailh2" style="font-size:18px; font-family: Arial, sans-serif;">We Have Over 500,000 Lineal Ft. of stock on the ground at all times, ready for prompt shipment! </h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">WalkGreen™ maintains a philosophy of stewardship, product quality and client satisfaction by preserving forest ecology and forest-dependent communities while supporting responsible and legal forestry. WalkGreen™ remains competitively priced by holding the largest inventory of FSC® Exotic Hardwood Decking and Rainscreen in North America. </p>
<h2 class="emailh2"style="font-size:18px; font-family: Arial, sans-serif;">General Wood Specifications</h2>
<p class="emailbodytext" style="font-family:Arial, sans-serif; color:#000; font-size:14px;">All wood is Export A grade, three side clear with minor defect down side. Kiln Dried to 12-15% moisture content. S4S E4E unless milled to specification. Random length 7-18 ft, odds and evens. 100% FSC® Certified</p>
</td>
</tr>
</table>
<!-- contact info -->
<table class="emailwrap" style="background-color:#fff; border-bottom: solid 1px #ccc;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="475" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<h2 class="emailh2" style="font-size:15px; font-family: Arial, sans-serif; margin-top:0; margin-bottom:0;">Text</h2>
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="125" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:12px; padding-bottom:12px;">
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/facebook.gif" alt="Like us on Facebook" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"> <img src="images/web-graphic.gif" alt="WalkGreen Products Website" /></a>
<a style="margin-top:0; margin-bottom:0;" href="#"><img src="images/mail.gif" alt="Contact Us" /></a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- footer -->
<table class="emailwrap" style="background-color:#fff;" cellpadding="0" cellspacing="0" width="600" align="center">
<tr>
<td class="emailcolsplit" width="250" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px; padding-right:20px;">
<img src="images/walkgreen.gif" alt="WalkGreen Products" />
</td>
</tr>
</table>
</td>
<td class="emailcolsplit" width="350" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding-top:20px; padding-bottom:20px;">
<p style="font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#999;">IF YOU NO LONGER WISH TO RECEIVE EMAILS PLEASE <a style="color:#999;" href="*|UNSUB|*">UNSUBSCRIBE</a><br/>
© 2015 WALKGREEN™ PRODUCTS, ALL RIGHTS RESERVED</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Bad Media Queries
You have bad queries. i.e. an iphone6 plus is max-device-width : 736px, therefore not satisfying the latter query! See media-queries-for-standard-devices.
If you wish to fix this issue, you must first define what size is xs. It's not enough just to say ALL mobile phones, as some mobile phones have VERY big screen and look like tablets! Iphone 6 Plus is a prime example of a big phone.
If I understand this correctly:
hidden-xs should hide the h2 only for below a certain screen width and visible for the rest
visible-xs should show the h2 only for below a certain screen width and hidden for the rest
e.g. If you define xs as a screen width <= 767px then your CSS should be:
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
#media screen and (min-width: 768px) {
/* screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or simplified to (mobile-first approach):
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
#media screen and (min-width: 768px) {
/* styles for screen width >= 768px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
}
or desktop first approach
h2[class=hidden-xs], ul[class=hidden-xs] {
display: block;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: none;
}
#media screen and (max-width: 767px) {
/* styles for screen width <= 767px */
h2[class=hidden-xs], ul[class=hidden-xs] {
display: none;
}
h2[class=visible-xs], ul[class=visible-xs] {
display: block;
}
}
Note: the !important is likely unnecessary
You could try creating a class to hide elements that will not show on a phone
#media only screen and (min-width: 320px) and (max-width: 768px){
.hide_phone{display: none;}
}
So I'm trying to center my webpage but it doesn't seem to be working. I can get it to work for Internet Explorer but only when I'm accessing it while it's stored on a server. When it's stored locally, it isn't centered. In any case, it's never centered in Firefox or Chrome. Could someone take a look at my code and see if they have any solutions?
Sorry if the code is messy. Any cleanup tips would be appreciated as well :)
I used Dreamweaver CC.
<!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" />
<title>Text</title>
<style type="text/css">
body {
background-image: url(images/image.jpg);
background-repeat: repeat;
font-family: "French Script MT";
display: table-cell;
vertical-align: middle;
position: relative;
color: #B9AB90;
}
.Memories {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18pt;
color: #360D11;
}
.Text {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #7A2500;
font-style: normal;
font-weight: bold;
}
.Bottom {
font-family: Tahoma, Geneva, sans-serif;
color: #000000;
}
.SessionMain {
color: #170C03;
font-family: special-elite;
font-style: normal;
font-weight: 400;
font-size: 24pt;
}
.SessionHead {
color: #4C3223;
font-family: ewert;
font-style: normal;
font-weight: 400;
font-size: 40pt;
vertical-align: middle;
text-align: center;
}
</style>
<meta name="keywords" content="test, test2" />
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/spicy-rice:n4:default;special-elite:n4:default;ewert:n4:default.js" type="text/javascript"></script>
</head>
<body background="image.png">
<p><a name="Top" id="Top"></a></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="70"> </td> <!-- Width here will set how far from the left the page is -->
<td><div align="center">
<table width="1030" border="0" cellpadding="0">
<tr>
<td height="87"><div align="center">
<table width="629" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" style="font-size: 46px; color: #4C3223;"><strong>Text</strong></div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
<div align="center">
</div>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="73"> </td>
<
<td width="629" height="87"><div align="center">
<table width="1020" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" class="SessionHead" style="font-size: 46px; color: #4C3223;">Text</div></td>
</tr>
</table>
</div>
<div align="center"></div></td>
<td> </td>
</tr>
</tbody>
</table>
</p>
<table width="100%" border="4" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="1364">
<p> </p>
<p> </p>
</td>
</tr>
</tbody>
</table> <p> </p>
<p> </p>
<p> </p>
<div align="center">
<table height="95" width="1016" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
<td width="986" height="18" bgcolor="#2E190B"> </td>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
</tr>
<tr>
<td height="77" bgcolor="#DFB47F"><table width="97%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="2%"> </td>
<td width="98%"><p class="Bottom"><a href="#Top">Back To Top</p>
<p class="Bottom">Last Updated: Sunday, January 4, 2015 10:42 AM</p></td>
</tr>
</tbody>
</table></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</td>
</tr>
</tbody>
</table>
</html>
Update your body style to the following (Remove display: table-cell and add width and margin properties):
body {
background-image: url(images/image.jpg);
background-repeat: repeat;
font-family: "French Script MT";
vertical-align: middle;
position: relative;
color: #B9AB90;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
Code Snippet:
<!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" />
<title>Text</title>
<style type="text/css">
body {
background-image: url(images/image.jpg);
background-repeat: repeat;
font-family: "French Script MT";
vertical-align: middle;
position: relative;
color: #B9AB90;
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.Memories {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18pt;
color: #360D11;
}
.Text {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #7A2500;
font-style: normal;
font-weight: bold;
}
.Bottom {
font-family: Tahoma, Geneva, sans-serif;
color: #000000;
}
.SessionMain {
color: #170C03;
font-family: special-elite;
font-style: normal;
font-weight: 400;
font-size: 24pt;
}
.SessionHead {
color: #4C3223;
font-family: ewert;
font-style: normal;
font-weight: 400;
font-size: 40pt;
vertical-align: middle;
text-align: center;
}
</style>
<meta name="keywords" content="test, test2" />
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/spicy-rice:n4:default;special-elite:n4:default;ewert:n4:default.js" type="text/javascript"></script>
</head>
<body background="image.png">
<p><a name="Top" id="Top"></a></p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="70"> </td> <!-- Width here will set how far from the left the page is -->
<td><div align="center">
<table width="1030" border="0" cellpadding="0">
<tr>
<td height="87"><div align="center">
<table width="629" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" style="font-size: 46px; color: #4C3223;"><strong>Text</strong></div></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div>
<div align="center">
</div>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="73"> </td>
<
<td width="629" height="87"><div align="center">
<table width="1020" height="83" border="5" bordercolor="#784321" bordercolordark="#7A2401" bgcolor="#FFE6A8">
<tr>
<td width="606" height="69"><div align="center" class="SessionHead" style="font-size: 46px; color: #4C3223;">Text</div></td>
</tr>
</table>
</div>
<div align="center"></div></td>
<td> </td>
</tr>
</tbody>
</table>
</p>
<table width="100%" border="4" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="1364">
<p> </p>
<p> </p>
</td>
</tr>
</tbody>
</table> <p> </p>
<p> </p>
<p> </p>
<div align="center">
<table height="95" width="1016" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
<td width="986" height="18" bgcolor="#2E190B"> </td>
<td width="15" rowspan="2" bgcolor="#2E190B"> </td>
</tr>
<tr>
<td height="77" bgcolor="#DFB47F"><table width="97%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="2%"> </td>
<td width="98%"><p class="Bottom"><a href="#Top">Back To Top</p>
<p class="Bottom">Last Updated: Sunday, January 4, 2015 10:42 AM</p></td>
</tr>
</tbody>
</table></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</td>
</tr>
</tbody>
</table>
</html>
Working fiddle
Remove display: table-cell from body
add new class inside body closing before </body>
.center-all {
margin: 0 auto;
width: 1030px;
}
Markup Validation Service
This validator examines markup for validity of Web documents in HTML,
XHTML etc
Note that you have so many syntax errors like </table> is not closing, </body> is closing inside table. You need to validate your HTML to fix HTML issues. So many compatibility errors are due to invalid HTML.
"Sorry if the code is messy." Indeed, like patricksweeney said start to clean your code :
your "body" balise end in the middle of nowhere !!!
you use the "table" balise everywhere for no reason
etc
I think the best thing to do right now is to start a new tuto and learn html/css step by step...
(PS : delete the "display: table-cell;" in body css to center the page.)