I got myself a custom landing page with a name and email opt in form, I can't figure out where to put the getresponse webform code in the landing page html.
here is the landing page html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #BA0A0A;
}
.style14 {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; }
.style15 {color: #FFFFFF}
.style3 {font-family: Tahoma;
color: #FFFFFF;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #000000;
}
.style10 {
font-family: Tahoma;
font-size: 12px;
color: #0033CC;
font-weight: bold;
}
.style21 {font-family: Tahoma; color: #B30006; }
-->
</style>
<link href="whitelinks.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style24 {
color: #FFCC33;
font-size: 12px;
font-family: Tahoma;
font-weight: bold;
}
.style26 {color: #05320B}
.style27 {color: #0033CC}
a:link {
color: #0033CC;
}
a:visited {
color: #0033CC;
}
a:hover {
color: #0033CC;
}
a:active {
color: #0033CC;
}
-->
</style>
</head>
<body>
<table width="768" border="0" align="center" cellpadding="0" cellspacing="0" background="images/768header.jpg">
<tr>
<td height="150"><table width="768" height="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="100"> </td>
<td width="400"><div align="center" class="style3">
<h1> </h1>
</div></td>
<td width="338"> </td>
</tr>
<tr>
<td height="50"> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
<table width="768" border="0" align="center" cellpadding="0" cellspacing="0" background="images/fillertable.jpg">
<tr>
<td><div align="right">
<blockquote>
<blockquote>
<p></p>
</blockquote>
</blockquote>
</div></td>
</tr>
</table>
<table width="768" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="300" background="images/middle.jpg"><table align="center" border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td background="images/middle.jpg" height="300"><table align="center" border="0" cellpadding="0" cellspacing="0" width="768">
<tbody>
<tr>
<td background="images/main.jpg" height="300"><table border="0" cellpadding="0" cellspacing="0" height="290" width="768">
<tbody>
<tr>
<td rowspan="3" width="30"> </td>
<td height="60" width="200"> </td>
<td rowspan="3" width="50"> </td>
<td rowspan="3" valign="top" width="428"><div align="center">
<h1 class="style21">FIRE YOUR BOSS! </h1>
<p align="right" class="style4">Download your FREE 10 Page report on getting<br>
started on your own BusinessToday! </p>
<div align="left">
<p class="style26"></p>
</div>
</div></td>
<td rowspan="3" width="50"> </td>
</tr>
<tr>
<td><center>
<form method="post" action="https://app.getresponse.com/site/johnmilner28/webform.html?wid=9908905&u=1vzV&mg_param3=4">
<input name="meta_web_form_id" value="yournumericvaluehere" type="hidden">
<input name="meta_split_id" value="" type="hidden">
<input name="unit" value="yournlistnamehere" type="hidden">
<input name="redirect" value="http://www.yourredirectpage.com/more.html" type="hidden">
<input name="meta_adtracking" value="sqtp001" type="hidden">
<input name="meta_message" value="1" type="hidden">
<input name="meta_required" value="from" type="hidden">
<input name="meta_forward_vars" value="0" type="hidden">
<table>
<tbody>
<tr>
<td colspan="2"><center>
<div> </div>
</center></td>
</tr>
<tr>
<td class="style14">Email:*</td>
<td><input name="from" value="" size="20" type="text"></td>
</tr>
<tr>
<td><span class="style14">Name</span><span class="style15">:*</span></td>
<td><input name="name" value="" size="20" type="text"></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="submit" value="Show me!!" type="submit"></td>
</tr>
</tbody>
</table>
</form>
</center></td>
</tr>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</table>
<table width="768" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="style27"><img src="images/base.jpg" width="768" height="140"></td>
</tr>
</table>
<div align="center"><span class="style10">Terms & Conditions | Income Disclaimer | SupportDesk</span><span class="style27"><font face="MS Sans Serif"><br>
</font><span class="style24">Copyright 2007 © YOUR COPY INFORMATION HERE </span></span>
</div>
</body>
</html>
And here is the getresponse code: http://pastebin.com/hkusHw1y
Anyone know anything about this kind of stuff? I've been trying to figure it out all day.
The code you linked to actually seems to contain two different parts. Everything between <style> and <\style> should go inside the <head> section of your page. The rest of it lives in the <body> part of your page.
Moreover it is usually good practice to put the <script>...</script> line at the very end of your <body> so immediately before </body>. That way you are sure the all the DOM elements are loaded.
If you intent to work with this kind of stuff more often, you should start with some tutorials and small scale examples. Also I am confident that the getResponse page would have good instructions where to put their code on their website.
Related
I am helping a friend build her website. I am trying to install Recaptcha page on her website because her HTML is really old. I accidentally deleted the html code for her contact us page so now I am trying to rebuild the page. It's very basic but for the life of me, I can't move the contact us form to the center of the page. Could someone send some code for me to set the "contact us" form to the center of the page?
I pasted this code to build a form:
<div class="container">
<div style="text-align:center">
<h2>Contact Us</h2>
</div>
<div class="row">
<div class="column">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="email">Email</label>
<input type="text" id="email" name="Email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
Because I lost the original contact us page I copied the code from one of her other pages and am trying to find where I can implement the form on the page. This is the page code I copied on the contact us form""
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fidelis Design & Construction, LLC</title>
<style type="text/css">
<!--
body {
background-image: url(BGs/RH.png);
background-repeat: repeat-x;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style1 {
background-repeat: no-repeat;
}
.style2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.689em;
color: #FFFFFF;
}
.style9 { font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
}
.style3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.689em;
color: #333;
}
.style6 {
color: #000033;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration:none;
}
a:hover {
color: #A52113;
}
.style7 {
color: #A52113;
font-weight: bold;
}
.style10 {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8125em;
color: #333;
}
.style11 {
color: #A52113;
font-size: medium;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A52113;
font-weight: bold;
}
</style>
</head>
<body>
<table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="200" height="270" align="center" bgcolor="#000033"><img src="BGs/logo.jpg" alt="Fidelis Design and Construction" width="135" height="189" border="0" longdesc="http://www.fidelisdc.com" /></td>
<td width="845" rowspan="5" align="left" valign="top"><table width="775" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td width="93"> </td>
<td width="137"> </td>
<td width="170"> </td>
<td width="75"> </td>
<td width="175"> </td>
<td width="125"> </td>
</tr>
<tr>
<td align="left" valign="top"><img src="BGs/sdvosb_logo_alt.png" width="93" height="89" /></td>
<td colspan="5"><table width="682" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="5" align="right" valign="bottom" background="BGs/HD.png"><table width="682" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right"></td>
</tr>
<tr>
<td align="right"><span class="style3"> <span class="style4"><span class="style7">Corporate Headquarters :</span></span> 408 East 4th Street, Suite 308, Bridgeport, PA 19405. <span class="style4"><span class="style7">P</span></span> (610) 277-7094 <span class="style4"> <span class="style7">F</span></span> (610) 277-7095<span class="style4"> </span></span></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20"> </td>
<td colspan="4" align="right" valign="bottom"><span class="style6">Home | About Our Founder | Current Projects | Service Strategy | Contact Us </span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" rowspan="2"><img src="BGs/SS.png" width="129" height="16" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="20" colspan="6" align="left" class="style10">At FDC we are operations driven, providing our clients with exceptional services and expertise, resulting in the highest quality projects </td>
</tr>
<tr>
<td height="20" colspan="6" align="left"><span class="style10">delivered in the safest manner. </span></td>
</tr>
<tr>
<td height="20" colspan="6" align="left" class="style10">FDC seeks to develop loyal, long-term client relationships which result in desired profits, strategic partnerships and opportunities.</td>
</tr>
<tr>
<td height="20" colspan="6" align="left"> </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><strong>Our services include:</strong></td>
<td colspan="2" rowspan="9" align="right"> </td>
</tr>
<tr>
<td height="20" colspan="4" align="left"><span class="style11">• </span><span class="style10">Construction capabilities using state-of-the-art technology & equipment</span></td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Comprehensive estimating and pricing procedures</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Critical path sequencing</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Design-Build Contracting Capabilities</td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Materials procurement </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Project management </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Subcontractor prequalification </td>
</tr>
<tr>
<td height="20" colspan="4" align="left" class="style10"><span class="style11">• </span>Value engineering and constructability reviews</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td height="135" align="center" bgcolor="#EFEFEF"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="39" colspan="2" background="BGs/PDFHeader.png" class="style1"> </td>
</tr>
<tr>
<td width="45" align="center"><a href="PDF/philadelphia_weekly_rbennett.pdf" target="_blank" ><img src="BGs/pdf_icon.jpg" width="32" height="33" border="0" title="Click to download / open this document" /></a></td>
<td width="115"><img src="BGs/Readmore.png" width="113" height="26" border="0" title="Click to download / open this document" /></td>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
</tr>
<tr>
<td height="265" align="center" bgcolor="#000033"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="170" height="25" background="BGs/Contact.png" class="style1"> </td>
</tr>
<tr>
<td height="18" align="left"><span class="style12">Corporate Headquarters :</span></td>
</tr>
<tr>
<td height="18" align="left" class="style2">408 East 4th Street</td>
</tr>
<tr>
<td height="18" align="left" class="style2">Suite 308</td>
</tr>
<tr>
<td height="18" align="left" class="style2">Bridgeport, PA 19405</td>
</tr>
<tr>
<td height="18" align="left"><span class="style2"><strong>P</strong> (610) 277-7094</span></td>
</tr>
<tr>
<td height="18" align="left" class="style2"><strong>F</strong> (610) 277-7095</td>
</tr>
<tr>
<td height="18" align="left" class="style2">--------------------------------------</td>
</tr>
<tr>
<td align="left"><img src="BGs/Email.png" width="103" height="52" border="0" title="Contact Us"/></td>
</tr>
<tr>
<div class="container">
<div style="text-align:right">
<h2>Contact Us</h2>
</div>
<div class="row">
<div class="column">
</div>
<div class="column">
<form action="/action_page.php">
<label for="fname">Name</label>
<input type="text" id="name" name="name" placeholder="Your name..">
<label for="email">Email</label>
<input type="text" id="email" name="Email" placeholder="Your email...">
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:170px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</tr>
</table></td>
</tr>
<tr>
<td height="15"> </td>
<td> </td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" bgcolor="#000033"><table width="1045" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="524" align="left"><span class="style9">Copyright © 2015, Fidelis Design & Construction, LLC. All Rights Reserved.</span></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
You can apply display: flex; and justify-content: center;" to the column class that's wrapping you form. I would however, suggest adding a differently named class to it to avoid interference with the column class just before it. e.g. <div class="column form-wrapper">
I have a problem when I send an HTML email signature from MS Outlook.
The problem is that the signature adds extra white space between all the elements and content such as text and even the horizontal line below the name.
The code in my HTML file looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<title>Boating World</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
background: #ffffff;
-webkit-text-size-adjust: none
}
/*]]>*/
</style>
</head>
<body style="padding:0 !important; margin:0 !important; display:block !important; background:#ffffff; -webkit-text-size-adjust:none">
<table width="500" height="180" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; width:500px; min-width:500px; margin:0" width="500">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style=" font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px;">
Kind Regards
</td>
</tr>
<tr>
<td height="5" style="font-size: 0px; line-height: 5px;">
</td>
</tr>
<tr>
<td style="font-family:Arial, sans-serif; font-size:16px; color:#002855; font-weight:600; line-height:20px; text-transform:uppercase; font-stretch:semi-expanded;">
<!-- Write your name and surname here -->
ELZAAN STEENKAMP
<!-- End of name -->
</td>
</tr>
<tr>
<td height="10" style="font-size: 0px; line-height: 10px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: none; font-size:0pt; line-height:0pt; text-align:left" height="1" bgcolor="#909090">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="200" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">T:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<a href="#" style="text-decoration:none; color:#444444; cursor:default;">
<!-- Write your landline telephone number here (Please type in same manner "+27 (0)21 418 0840”) -->
+27 (0) 21 418 0840
<!-- end of telephone number -->
</a>
</span>
</td>
</tr>
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">C:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<a href="#" style="text-decoration:none; color:#444444; cursor:default;">
<!-- Write the cellphone number here (Please type in similar manner "+27 (0)82 000 0000) -->
+27 (0) 83 400 3418
<!-- end of telephone number -->
</a>
</span>
</td>
</tr>
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">E:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<!-- To put in your email address, you need to add it twice, once next to where it states mailto: and then below, be careful not to change anything other than the email name. -->
<a href="mailto:accounts#boatingworld.co.za" style="text-decoration:none; color:#444444; cursor:default;">
<!-- End of email address code -->
<!-- Write your email address here as well -->
accounts#boatingworld.co.za
<!-- End of email address -->
</a>
</span>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" width="20" height="20" style="font-size:20px; line-height: 20px;">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="200" align="left" style="display:inline-table;">
<tr>
<td style="line-height:10px">
<img src="https://www.boatingworld.co.za/email_signature/bw_logo.jpg" style="display:block"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" align="left">
<a href="https://www.facebook.com/boatingworld?v=info" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/facebook.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="https://twitter.com/BoatingWorld1" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/twitter.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="https://www.instagram.com/boating.world/" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/instagram.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="http://www.youtube.com/user/BoatingWorldSA1" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/youtube.jpg" />
</a>
</td>
<td width="420" align="left">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight: 600; line-height:18px; text-transform:uppercase;">
<a href="https://www.boatingworld.co.za/" style="text-decoration: none;">
<span style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px; text-transform:uppercase;">
WWW.BOATINGWORLD.CO.ZA
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have tested multiple solutions answered elsewhere on the internet on different forums but to no avail.
Please can someone assist with this as this is for a very important client.
Thanks.
I had the same issue. I solved it by adding below styles for p tag.
p { margin-top: 1px; margin-bottom:1px; margin-left:1px; margin-right:1px; }
I have created this email layout below, and cannot for the life of me figure out why Gmail renders it correctly, but Inbox renders it horribly.
Upon inspection, it is for some reason separating a bunch of stuff into their own table elements. Anyone see something I'm missing. I'm very new to html for email, and am constantly shocked at how bad it can be.
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" align="center"><span style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;">shift</span><span style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;">Swap</span></td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td>
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="padding: 35px;">
<h3>
Welcome <span style="text-decoration: none;"><%= #email %></span>!
</h3>
<div>
<span style="display: block;">You can confirm your account email through the link below:</span>
<br>
Confirm your account
<br>
<span style="display: block;">Or paste the following into the address bar: <%= confirmation_url(#resource, confirmation_token: #token) %></span>
<h3 style="padding-top: 20px;">Thanks for signing up. We're looking forward to seeing you on the site!</h3>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center"><td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td></tr>
</table>
</td>
</tr>
</table>
</body>
Here is what it looks like when Inbox for some reason hides the entire message, which seems to happen when I send a "reconfirm" message:
And Gmail:
I really recommend to take out all non table elements, since even if it is 2016, mail clients are way behind
<body style="margin:0; padding:0; width:100% !important; font-family: verdana;">
<table width="100%" bgcolor="#F7F7F7" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" align="center">
<tr>
<td>
<table cellpadding="20" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="50%" align="right" style="color: rgb(44, 160, 209); font-size: 24px; font-family: verdana;padding-right: 0">
shift
</td>
<td valign="top" align="left" style="color: rgb(235, 42, 83); font-size: 24px; font-family: verdana; font-weight: bold;padding-left: 0">
Swap
</td>
</tr>
</table>
</td>
</tr>
<!-- This is where your content goes bro -->
<tr>
<td style="padding: 35px;background: #FFF">
<table width="600" bgcolor="#FFF" align="center" style="border-radius:8px;">
<tr>
<td style="text-decoration: none; font-size: 22px">
Welcome
# email !
</td>
</tr>
<tr>
<td style="padding-top: 20px; font-size: 22px">
You can confirm your account email through the link below:
</td>
</tr>
<tr>
<td>
Confirm your account
</td>
</tr>
<tr>
<td>
Or paste the following into the address bar:
confirmation_url
</td>
</tr>
<tr>
<td style="padding: 20px 0; font-size: 22px">
Thanks for signing up. We're looking forward to seeing you on the site!
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="600" align="center" cellpadding="50">
<tr align="center">
<td style="color: #2b2b2b">Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©
<%=T ime.new.year %>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
Knowing how "fussy" e-mail clients are, there's one thing that I see that may be causing unpredictable results. It's a long-shot that this will fix anything other than a typing error; but within that line of code, do you see what I see near 'color: 2b2b2b'?
<td style="color: #2b2b2b";>Made by <a style="color: orange; text-decoration: none;" href="http://rafipatel.com">Rafi Patel</a> ©<%= Time.new.year %></td>
The semi-colon is outside of the style attribute. Prolley just a foul ball, but you never know. ;)
Working with provided HTML and I'm looking to figure out why there is a gap in Outlook 07,10,13. Renders fine in other Outlook versions. The gap varies between outlook version, but a gap nonetheless
Screenshot:
HTML Email for review:
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tbody>
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td height="10" colspan="3">
<p style="font-weight:bold; color:#0018A8; font-size:13px">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="10" height="6">
</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="border-style: none">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132">
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's
maiden name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please click here to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</body>
</html>
The pasted example shows the gaps more extremely than I even see in litmus tests, but not showing in Chrome when I test the HTML locally.
FIX was to add inline CSS to the images and remove the <tbody>
<!-- saved from url=(0062)http://nancydoyle.net/artpoint/Bengals_VIP/53_bengals-vip.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
<!-- .footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
text-align: left;
}
table {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 16px;
color: #000000;
text-align: left;
}
td {
vertical-align: top;
}
body {
background-color: #CCC;
}
a:link {
color: #0018A8;
}
a:visited {
color: #0018A8;
}
a:hover {
color: #5B8F22;
}
a:active {
color: #0018A8;
}
-->
</style>
</head>
<body>
<table width="600" style="border:2px solid #CCC" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="row">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td align="center" style="font-size:13px;"></td>
</tr>
<tr bgcolor="#FFFFFF">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center">
<tr>
<td align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<th rowspan="2" valign="bottom" bgcolor="#FFF" scope="row">
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{252633d5-413e-49d6-b98f-0d2a7a776bab}_image_top.png" alt="Bengals VIP-Sunday, Oct 11" width="600" height="324" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr bgcolor="#FFFFFF">
<td width="90">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{ea46411e-9382-46a4-87c0-b741d0725209}_image_lt.png" width="89" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
<td width="412" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td colspan="3" align="left" bgcolor="#FFFFFF">
<p style="font-size: 17px; color: #000; font-weight: normal; line-height:1.1"><b>Please join us for a Bengals VIP Party held in <br>
the Southeast Overlook at Paul Brown Stadium.</b>
<br> VIP Party includes food, beverages and Club tickets
<br> for you and a guest to attend the game.</p>
</td>
</tr>
<tr>
<td width="7%"> </td>
<td width="19%">
<span style="font-weight:bold; color:#0018A8; font-size:13px">11:30 am</span>
</td>
<td width="74%">
<p style="font-weight:normal; color:#000; font-size:13px;">
<strong>Food and beverages will be provided in the Southeast Club Suite Overlook.</strong>
</p>
</td>
</tr>
<tr>
<td height="30"> </td>
<td height="30">
<span style="font-weight:bold; color:#0018A8; font-size:13px">1:00 pm</span>
</td>
<td>
<p style="font-weight:normal; color:#000; font-size:13px">
<strong>Kickoff.</strong> You will be escorted to your Club seats.</p>
</td>
</tr>
<tr>
<td height="32" colspan="3" align="left">
<span style="font-weight:bold; color:#000; font-size:12px;line-height:2.0">Spots are limited, so please RSVP on or before October 2, 2015.</span>
</td>
</tr>
<tr>
<td height="40" colspan="3" align="center">
<a href="//events.53.com/BengalsVIPEvent" target="_blank">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{4c656e9b-3bd4-4596-94e5-2d2da9d83737}_VC-0315-Register_A.jpg" width="89" height="27" alt="RSVP" style="padding:0;margin:0;display:block;border-style:none;">
</a>
</td>
</tr>
<tr>
<td colspan="3" align="left">
<span style="font-weight:normal; color:#000; font-size:12px;line-height:1.2">If you have any questions please contact Megan Auer at 513-534-6439 or Megan.Auer#53.com. Directions and tickets will be provided upon RSVP.</span>
</td>
</tr>
</table>
</td>
<td width="98" align="right">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e86cc6a3-148f-4cc7-9dee-1b9c22af2a6e}_image_rt.png" width="98" height="293" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{e58b7aa4-66b1-481f-b3cc-7c5559618fb0}_image_bottom.png" alt="Fifth Third Bank" width="600" height="132" style="width:100%;padding:0;margin:0;display:block;">
</td>
</tr>
</table>
</th>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</table>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="31" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" width="20" height="15">
</td>
<td>
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{b6d6e242-ef92-4cf0-b5cf-d3081a001bfb}_spacer.gif" alt="" width="31" height="15">
</td>
</tr>
<tr>
<td valign="top"> </td>
<td valign="top" style="font-size:8pt">
<p class="footer">Fifth Third will never use a link in email to ask for User ID(s), password(s) or PIN(s), Social Security number(s), card or account number(s), cardholder verification value(s) (CVV2), or user defined challenge information (e.g., mother's maiden
name, place of birth, etc.) If such a message is received, please immediately forward it to 53investigation#security.53.com.</p>
<p class="footer"><b>To Unsubscribe:</b> This email was sent by Fifth Third Bank, 38 Fountain Square Plaza, Cincinnati, Ohio 45263. If you do not wish to receive future email solicitations or advertisements, please <a href="http://payments.53.com/forms/SubscriptionManagement"
target="_blank">click here</a> to manage your communications. This will allow you to select the communications you wish to receive from us.</p>
<p class="footer">Fifth Third Bank, Member FDIC.
<img src="http://images.payments.53bank.com/EloquaImages/clients/FifthThirdBank/{a29b1016-66a2-4f46-a8d9-25342ff39a97}_Equal_Housing_Lender_No_Text.gif" width="16" height="13"> Equal Housing Lender.</p>
</td>
<td valign="top"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</th>
</tr>
</table>
</body>
</html>
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.)