how can i get the images and the content to the right to top align?
i tried valign="top" as you can see.
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top">
<td valign="top"><img alt="" style="border: 0px solid;" src="/Portals/0/affiliates/NFL.png" /></td>
<td valign="top"> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL</span><br />
</strong><span class="body_copy" valign="top">The official website for the National Football League. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_players_association.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Players Association</span><br />
</strong><span class="body_copy" valign="top">"We, The National Football League Players Association ... Pay homage to our predecessors for their courage, sacrifice, and vision; ... Pledge to preserve and enhance the democratic involvement of our members; ... Confirm our willingness to do whatever is necessary for the betterment of our membership - To preserve our gains and achieve those goals not yet attained." Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_play_benfits.png" /></td>
<td><strong> </strong></td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">NFL Player Benefits</span></strong><br />
<span class="body_copy">A Complete guide to the benefits available for NFL players. Learn more >></span></td>
</tr>
<tr valign="top">
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr valign="top">
<td valign="top"><img alt="" src="/Portals/0/affiliates/NFL_hall_fame.png" /></td>
<td> </td>
<td valign="top" style="padding-left: 10px;"><strong><span class="cnt5_heading" style="color: #c00000;">Pro football Hall of Fame</span></strong><br />
<span class="body_copy">The Mission of the Pro Football Hall of Fame is: To honor, preserve, educate and promote. Learn more >></span><br />
</td>
</tr>
</tbody>
</table>
Some CSS :
table td, table td * {
vertical-align: top;
}
<TABLE COLS="3" border="0" cellspacing="0" cellpadding="0">
<TR style="vertical-align:top">
<TD>
<!-- The log text-box -->
<div style="height:800px; width:240px; border:1px solid #ccc; font:16px/26px Georgia, Garamond, Serif; overflow:auto;">
Log:
</div>
</TD>
<TD>
<!-- The 2nd column -->
</TD>
<TD>
<!-- The 3rd column -->
</TD>
</TR>
</TABLE>
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">
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>
I had to create an emailing html and I can say it is definitely a hard thing to do. Now, making sure it is responsive is beyond obnoxious.
I'm stuck right now on a seemingly unsolvable problem.
Here is the problem : I have a table with 3 columns (column 1 is a table, column 2 a spacer colum, column 3 is a table).
When I go mobile, I want the third column to go under the column 1. But no matter what I try I cant do it.
Please note that the display parameter CANT be used. That's very important. Google mail doesnt know what display means (...)
The only thing that seem ok to use are : float and align.
Here is my jsfiddle
https://jsfiddle.net/cnw0o3wy/
the follow us and contact us cells are in the same table; that table must go under the first table. I fail to achieve that effect for now
<tr>
<td>
<table align="center">
<tr>
<td class="align-top grey responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307">
<tbody>
<tr class="grey">
<td class="align-top"colspan="3"><img alt="" src="images/mobile.png" /></td>
</tr>
<tr class="grey">
<td width="113" class="w113"> </td>
<td>
<img src="images/appstore.png" title="Apple Store" />
</td>
<td>
<img src="images/googleplay.png" title="Google Play" />
</td>
</tr>
</tbody>
</table>
</td>
<td width="4"class="responsive">
</td>
<td class="responsive">
<table border="0" cellpadding="0" cellspacing="0" width="307" class="w307">
<tbody class="grey">
<tr class="grey">
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="t-gris px12 bold align-top">Follow us !</td>
</tr>
<!-- 32 PX SPACING -->
<tr>
<td height="36" width="151" class="w151"><img src="images/shim.png" alt="" height="31" /> </td>
</tr>
<tr class="align-center">
<td>
<img class="social" src="images/fb.png" alt="Facebook" />
<img class="social" src="images/twitter.png" alt="Twitter" />
<img class="social" src="images/mail.png" alt="Mail" />
</td>
</tr>
</tbody>
</table>
</td>
<td class="white">
<img alt="" src="images/shim.png" width="4" />
</td>
<td class="align-top grey">
<table cellpadding="0" cellspacing="0" width="151" class="w151">
<tbody class="grey">
<tr>
<td style="line-height:6px;" height="6" width="151" class="w151"> </td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px12 bold t-gris align-top">Contact us !</td>
</tr>
<tr>
<td><img alt="" src="images/logo2.png" /></td>
</tr>
<tr>
<td style="padding-left: 7px;" class="px10 t-gris bold">
50/54 <br/>92100 <br/>+33 1 49 00 00 00 www.mail.fr
<span style="text-decoration: underline;">
courrier#mail.fr
</span>
</td>
</tr>
<tr>
<td style="line-height:7px;"height="7" width="151" class="w151"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
solved my problem with the following lines :
td[class="responsive-grey"],
td[class="responsive-grey responsive-grey-spacing"],
td[class="align-top grey responsive-grey"] {
float: left; width:100%;
}
basically float left on all three columns
I looked for a similar question but no solutions.
I have a webpage with a table and a Youtube movie at the middle: http://www.zofim.org.il/magazin_item.asp?item_id=531438084004
it looks good in Chrome, but in Internet explorer the movie is too low and not in the right place.
Here is the code:
<table background="http://www.zofim.org.il/pics/magazin/Page-1 (1).jpg" width="650" height="700" border="0" align="center" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<table border="0" width="600">
<tbody>
<tr>
<td colspan="4"><span style="font-size: 8; "> </span>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><br />
</p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "><br />
<br />
<br type="_moz" />
</span></p>
<p> </p>
</td>
</tr>
<tr>
<td height="440" width="23%" rowspan="2">
<table border="0" width="100%" height="430">
<tbody>
<tr>
<td height="131"> </td>
</tr>
<tr>
<td height="63"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="76" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td height="142" width="12%">
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p> </p>
<p> </p>
</td>
<td height="142" width="35%">
<p style="margin-top: 10px; margin-bottom: 0px; text-align: center; "><iframe width="250" height="150" src="http://www.youtube.com/embed/wnBGKeXF8X0?rel=0&controls=0&autoplay=1" frameborder="0" allowfullscreen="" name="I1" scrolling="no" marginheight="2"></iframe></p>
</td>
<td height="142" width="31%">
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td height="285" colspan="3">
<table border="0" width="100%" height="292">
<tbody>
<tr>
<td width="135">
<table border="0" width="100%" height="280">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="104%" height="278">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="175" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td width="153">
<table border="0" width="100%" height="281">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="152" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
thanks!
Dor.
By the looks of the markup you provided you are using tables to layout your website. This is considered bad practice. You should consider changing to using best practices (divs etc) and using CSS to style your layout instead of using inline-styles. When you have done this you can use prefixr.com to create cross-browser friendly CSS.
I am running the following as a simple html file.Problem is that when i am running it on firefox i get a different view than on chrome i.e extra space at the end of the page in the table in case of chrome because of which i am getting extra pages at the end in print preview,i want that it should look as in case of firefox.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 05, 2001 08:55 AM -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
<META NAME="Author" Content="NetCorrespondence.com">
<TITLE>Printing Work Order</TITLE>
</HEAD>
<BODY>
<img src="/CFFileServlet/_cf_image/_cfimg5646601472618022292.PNG" alt="" />
<P>
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%" VALIGN="TOP">
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%"><b><font size="+1"> </font></b></TD>
<TD WIDTH="50%">
<P ALIGN="RIGHT"><b>WORKORDER - Pest Control Services</b>
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<table>
<tr>
<td><img src="http://209.123.166.68/E7CC71EB-756D-462F-9641B46BA6927E9B/pestlogo.jpg" alt="" width="100" height="125" border="0"></td>
<td>
<FONT SIZE="5">
Preferred Pest Services, Inc D/B/A Pest Pro Services
</FONT>
<BR>
32 Drysdale Street<BR>
Staten Island, NY, 10314<BR>
Tel:718 983-0004<BR>
Fax:718-477-0333 Email:pestprosolutions#gmail.com
<BR>
Sales Representative: Debbie
</td>
</tr>
</table>
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<DIV ALIGN="RIGHT">
<P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="95%">
<TR>
<TD><b>Order#:</b></TD>
<TD> 92681</TD>
</TR>
<TR>
<TD><b>JobDate:</b></TD>
<TD> <b>10/07/2011</b></TD>
</TR>
<TR>
<TD><b>Day of Week:</b></TD>
<TD> <b>Friday</b></TD>
</TR>
<TR>
<TD><b>Location:</b></TD>
<TD> Manhattan</TD>
</TR>
<TR>
<TD><b>Start Time:</b></TD>
<TD> 12:00 PM</TD>
</TR>
<TR>
<TD width="50%"><b>CFP:</b></TD>
<TD width="50%"> </TD>
</tr>
<tr>
<TD width="50%"><b>CN:</b></TD>
<TD width="50%"> </TD>
</TR>
<tr>
<TD width="50%"><b>Day Number:</b></TD>
<TD width="50%"> 1/1 </TD>
</TR>
</table>
</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="50%"><b>FOR OFFICE USE ONLY:</b></TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP"><B>CUSTOMER INFORMATION:</B><BR><BR>
Company: Lemle and Wolff<BR>
Christopher Anelante<BR>
Address: 5925 Broadway<BR>
Address: Bronx, NY 10463<BR>
Telephone: 718 884-7676 Fax: 718 884-5300<BR>
Email: <BR>
<TD WIDTH="50%" VALIGN="TOP"><B>Billing Address:</B><BR><BR>
Company: Lemle and Wolff<BR>
Christopher Anelante<BR>
Address: 5925 Broadway<BR>
Address: Bronx, NY 10463<BR>
</TD>
</TR>
<TR>
<TD WIDTH="50%"><b>JOB SITE:</b></TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2">
<b>JOB INFORMATION:</b><BR>
2651 Eighth Avenue<br>
New York, NY 10030<br>
Primary Contact: Eriberto Jacques 172*44*29419 Phone: 718 884-7676 Cell: Beeper:<br>
Notes:<BR>
JOB TYPE: Pest Control Services<BR>
<BR>
<BR>
</TD>
</TR>
<TR>
<TD COLSPAN="2"><B>Job Description:</B>
Pest Control Services-First Friday of the month 12:00 PM
</TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2"><B>Special Instructions:</B><BR>
Service to all of 10 apartments in building thorough treatment for mice roaches and insects. MUST LIST ALL APARTMENTS IN BUILDING ON LIST. TREAT all common areas and basements and common areas. MUST SEE SUPER FOR ACCESS</TD>
</TR>
<TR>
<TD COLSPAN="2"><b>ORDER TOTALS</b></TD>
</TR>
<TR>
<TD COLSPAN="2">Service Price: $30.00 Parts: $0.00 Subtotal: $30.00 Tax: $2.51 Total: $32.51</TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2"><B>Parts:</B><BR>
<table width="90%" border="1" cellspacing="0" cellpadding="0"><tr>
<TR>
<TD WIDTH="49%"><b>ItemID</b></TD>
<TD WIDTH="24%"><b>Description</b></TD>
<TD WIDTH="20%"><b>Qty</b></TD>
<TD WIDTH="20%"><b>Price</b></TD>
<TD WIDTH="20%"><b>Total</b></TD>
</TR>
</TD>
</tr>
</table>
</TR>
<TR>
<TD COLSPAN="2"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<DIV>
<P><FONT SIZE="2">Please sign that job was completed and performed in a <BR>
satisfactory manner.</FONT></P>
<P><FONT SIZE="2">Name:___________________________<BR><br>
Authorized Signature:_____________________________<BR><br>
Title:__________ Date:__________<BR><br>
</FONT>
</DIV>
<P><FONT SIZE="2">Job Completed: [ ]Yes [ ]No </FONT><FONT SIZE="1"></FONT>
</TD>
<TD WIDTH="50%" VALIGN="TOP"><FONT SIZE="2">Persons on the Job<BR><BR>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="74%">
<TR>
<TD WIDTH="49%"><FONT SIZE="2"><b>Name</b></FONT></TD>
<TD WIDTH="24%"><FONT SIZE="2"><b>Start Time</b></FONT></TD>
<TD WIDTH="20%"><FONT SIZE="2"><b>End Time</b></FONT></TD>
</TR>
<TR>
<TD WIDTH="49%">Carlos Almonte</TD>
<TD WIDTH="24%"> </TD>
<TD WIDTH="20%"> </TD>
</TR>
</TABLE>
<font size="-1"><br>Please use the back of this workorder for comments.</font></FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<!---<p style="page-break-after: always"></p>--->
<table Align="Center" width="85%">
<tr>
<td valign="Top">
<font size="+4"><div align="center"><b><u>WARNING!!</u></b></div></font>
<div align="center"><font size="+3">To all residents of:</font></div><br>
<font size="+3"><div align="center">2651 Eighth Avenue</div></font>
<br>
<div align="center"><font size="+4">Your stairhalls will be cleaned on:</font></div></font>
<br><br>
<font size="+3"><div align="center">Friday Oct-07/2011 12:00PM-06:11PM</div></font>
<br><br>
<font size="+4">
<b>DANGER TO ANYONE ATTEMPTING TO ENTER STAIRWAY !!!!</b>
<BR><BR>
<b>MUST USE CAUTION WHEN USING THESE STAIRCASES FOR THE NEXT 48 HOURS!</b>
</font>
<br><br>
<font size="+3"><p align="right">Thank You for your cooperation,<br>
The Management</p></font>
</td>
</tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 05, 2001 08:49 AM -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
<META NAME="Author" Content="NetCorrespondence.com">
<TITLE>Confirmation</TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%" VALIGN="TOP">
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%">
</TD>
<TD WIDTH="50%">
<P ALIGN="RIGHT"><font size="+1"><b>CONFIRMATION OF SERVICES<BR> for Pest Control Services</b></font>
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<table>
<tr>
<td align="left" valign="Top">
</td>
<td valign="top">
<FONT SIZE="5">Pest Pro Services</FONT><BR>
32 Drysdale Street<BR>
Staten Island NY 10314<BR>
Tel:718 983-0004<BR>
Fax:718-477-0333
<BR>
</td>
</tr>
<tr>
<td colspan="2">Sales Representative: Debbie</td>
</tr>
</table>
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<DIV ALIGN="RIGHT">
<P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="75%">
<TR>
<TD>Order#:</TD>
<TD> 92681</TD>
</TR>
<TR>
<TD>JobDate:</TD>
<TD> 10/07/2011</TD>
</TR>
<TR>
<TD>Location:</TD>
<TD> Manhattan</TD>
</TR>
<TR>
<TD>StartTime:</TD>
<TD> 12:00 PM</TD>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">Lemle and Wolff<BR>
Telephone: 718 884-7676 Fax: 718 884-5300<BR>
Billing Address: 5925 Broadway<br>
Address: Bronx, NY 10463<BR>
</TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2">
JOB TYPE: Pest Control Services<BR>
Attention: Eriberto Jacques 172*44*29419<BR>
Job Address: 2651 Eighth Avenue<BR>
Job City: New York
Borough or Town: Manhattan<BR>
<BR>
Site Manager/Super: Eriberto Jacques 172*44*29419 Tel: 718 884-7676
Beeper: Cell: Location
of Site/Mtc: Eriberto Jacques 172*44*29419<BR>
<BR>
</TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP"><BR>
Dear Customer,<br><br>
Thankyou for choosing us as your building maintenance company. Your building/s will be serviced on:<br>
<br>
<font size="+1"><b>Day:</b> Friday<br>
<b>Date:</b> Oct-072011<br>
<b>Start Time:</b> 12:00 PM<br></font>
<br>
Please post
any notices if applicable.
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<B><FONT SIZE="2">SPECIAL INSTRUCTIONS:</FONT></B>
<br>
Service to all of 10 apartments in building thorough treatment for mice roaches and insects. MUST LIST ALL APARTMENTS IN BUILDING ON LIST. TREAT all common areas and basements and common areas. MUST SEE SUPER FOR ACCESS
<br>
<br>
<br>
<TABLE BORDER="1" CELLSPACING="1" WIDTH="80%">
<TR>
<TD WIDTH="67%"><FONT SIZE="2">Agreed Price:</FONT></TD>
<TD WIDTH="33%" Align="Right"><FONT SIZE="2">$30.00</FONT></TD>
</TR>
<TR>
<TD WIDTH="67%"><FONT SIZE="2">P.O. #:</FONT></TD>
<TD WIDTH="33%"></TD>
</TR>
</TABLE>
<br><br>
<b> All cancellations require at least 24 hours of notice to us
Failure to do so could result in extra charges.</b>
</TD>
</TR>
<TR>
<TD COLSPAN="2">
</TD>
</TR>
<TR>
<TD VALIGN="TOP">
Date Confirmed: <br>
Confirmed By:
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<!---<p style="page-break-after: always"></p>--->
First, make a stylesheet for your print layout:
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
Key there being media="print".
Next, reset the base style so it's cross-browser normalized. Check out YUI3's CSS reset syntax for a quick reference: http://yuilibrary.com/yui/docs/cssreset/
From there, you'll want to omit visual stuff people hate printing out, like logos, graphical navs, etc:
#logo, .nav-tab, .etc {
display:none;
}
Finally, set the page breaks so you don't get unintentional content-splitting across multiple pages:
#some-important-element {
page-break-before: always;
}
Once you set this up, you won't have to worry about cross-browser quirks interfering with your web-print renderings.