I'm struggling with a problem in the Outlook 365 client, that I hope you can help me with.
I have a very simple table setup with some space in top, and 365 thinks it should insert white lines in top and bottom:
https://www.screencast.com/t/mWFj57wIGx
Here is the complete code example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Email Framework Version 1.0.1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<style type="text/css">
.ReadMsgBody {
width: 100%;
background-color: #F6F6F6;
}
.ExternalClass {
width: 100%;
background-color: #F6F6F6;
}
body {
width: 100%;
background-color: #f6f6f6;
margin: 0;
-webkit-font-smoothing: antialiased;
font-family: Arial, Times, serif
}
h1,
h2,
h3,
p,
td {
line-height: normal !important;
}
table {
border-collapse: collapse !important;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
#media only screen and (max-width: 639px) {
.wrapper {
width: 100%;
padding: 0 !important;
}
}
#media only screen and (max-width: 480px) {
.centerClass {
margin: 0 auto !important;
}
.imgClass {
width: 100% !important;
height: auto;
}
.wrapper {
width: 320px !important;
padding: 0 !important;
}
.header {
width: 320px !important;
padding: 0 !important;
background-image: url(http://dummyimage.com/320x400/fff/fff) !important;
}
.container {
width: 300px !important;
padding: 0 !important;
}
.mobile {
width: 300px !important;
display: block !important;
padding: 0 !important;
text-align: center !important;
}
.mobile25 {
width: 150px !important;
padding: 0 !important;
text-align: center;
display: inline-table;
}
.mobile50 {
width: 300px !important;
padding: 0 !important;
text-align: center;
}
.mobileOff {
width: 0px !important;
display: none !important;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color:#F6F6F6; font-family:Arial,serif; margin:0; padding:0; min-width: 100%; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;">
<!-- Start Background -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#F6F6F6">
<tr>
<td width="100%" valign="top" align="center">
<!-- Start TEST -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#111111">
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
Menu 1
</td>
<td width="360" class="mobile" style="font-family:arial; font-size:12px; color:#fff; line-height:18px; margin:0;" align="center">
Menu 2
</td>
</tr>
</table>
<!-- End Container -->
</td>
</tr>
<tr>
<td height="20" style="font-size:20px; line-height:20px;"> </td>
<!-- Spacer -->
</tr>
</table>
<!-- End TEST -->
<!-- Start Content -->
<table width="760" cellpadding="0" cellspacing="0" border="0" class="wrapper" bgcolor="#ffffff">
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
<!-- Spacer -->
</tr>
<tr>
<td align="center">
<!-- Start Container -->
<table width="720" cellpadding="0" cellspacing="0" border="0" class="container">
<tr>
<td width="720" class="mobile" style="font-family:arial; font-size:12px; line-height:18px; margin:0;">
{content}
</td>
</tr>
</table>
<!-- End Container -->
</td>
</tr>
<tr>
<td height="10" style="font-size:10px; line-height:10px;"> </td>
<!-- Spacer -->
</tr>
</table>
<!-- End Content -->
</td>
</tr>
</table>
<!-- End Background -->
</body>
</html>
Does anyone know what I can do to remove these white lines?
I have bad news, the current thinking is that there is no way to fix this issue with Outlook.
Outlook 2007/2010/2013/2016 Windows 10 Mail and maybe every Office client (I could not test in 365) adds space to the body of the email message. It will add a 15px space to the top and bottom of an email and 10px spacing to the left and right sides.
This is the drawback to HTML Email. Since there are no standards, each email client has a different set of standards they support or quirks they add.
Don't take my post as discouragement, see it as the rest of us simply have not found a solution. Maybe you will discover a solution to this problem. In most clients, there will be no gap.
Good Luck.
Also, thank you for posting your code snippet. It allows people to easily test your code to see if we can find some solution, if available.
Related
I need to create like this model in PDF :
In html works great like this :
But when i loaded to pdf(barryvdh dompdf) I got this result? i'don't know why some content changes his place
This my html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
table{
width: 100%;
}
table tr td{
text-align: left;
border:1px solid;
display: inline-block;
width: 45%;
height:150px;
margin-top: 2px;
}
</style>
</head>
<body>
<table>
<tr>
#foreach($colisenattent as $coli)
<td>
{{$coli->data}}
</td>
#endforeach
</tr>
</table>
</body>
</html>
The issue lied in your css, At first glance though it looks ok.
At first display: inline-block; this css breaks the dompdf code so you will end up in some dompdf error,
Dompdf\Exception
The row #1 could not be found, please file an issue in the tracker with the HTML code
So you need to remove that.
use vertical-align: top; instead.I have added my own styling as well to make it close to ideal.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css" media="all">
table{
width: 100%;
border-collapse: separate;
border-spacing: 5px 0px 1px 0px;
}
th, td{
text-align: left;
vertical-align: top;
border: 3px solid;
border-radius: 5px;
width: 45%;
height: 150px;
margin: 2px 2px 2px 2px;
padding: 2px 2px 2px 2px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</thead>
<tbody>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
<tr>
<td>Text Text</td>
<td>Text Text</td>
</tr>
</tbody>
</table>
</body>
</html>
DEMO Image
The HTML is currently creating a single row with n columns. Do you instead want to create n/2 rows with two columns?
If so, try something like this:
<table>
#for($i = 0; $i < count($colisenattent); $i += 2)
<tr>
<td>
{{ $colisenattent[$i]->data }}
</td>
<td>
#if (isset($colisenattent[$i + 1]))
{{ $colisenattent[$i + 1]->data }}
#endif
</td>
</tr>
#endfor
</table>
I need to select a value of a td based on another td's text in the same row. The XPath should be the same and only text will be changeable. In the following HTML, I have to select $33.00 based on Labor, $0.66 based on Finance, $33.66 based on Total, and so on.
* {margin: 0; padding: 0;}
body {font-family:"Times New Roman", "serif","Arial","tahoma"; font-size: 12px;}
.center {width: 1200px; margin: auto;}
.top-left {float: left; width: 70%; font-weight: bold;}
.top-right {float: right; width: 30%; text-align: right;}
h2 {margin: 0 0 10px; border-bottom: 1px solid #ccc; padding: 10px 0;}
.terms {margin: 15px 0 0; font-weight: normal;}
.invoice-to {margin: 15px 0 0;}
.clear {clear: both;}
.table-holder {margin: 50px 0 0; font-size: 12px;}
table {border-collapse: collapse;}
.table-holder table th {border: 1px solid #ccc; border-bottom: 2px solid #ccc; text-align: left; padding: 4px 2px;}
.table-holder table td {border: 1px solid #ccc; padding: 4px 2px;}
.table-holder table td p {padding: 4px 2px;}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>Invoice :: 6</title>
</head>
<body style="">
<div class="center" id="wrapper">
<h2>INVOICE</h2>
<div class="table-holder">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tbl" style="font-size: 9px;">
<tbody><tr>
<th>Invoice ID</th>
<th>Fund</th>
<th>Work ID</th>
<th>Provider ID</th>
<th>Provider Name</th>
<th>Provider Location</th>
<th>Client</th>
<th>Project</th>
<th>Manager</th>
<th>Service Title</th>
<th>Location Name</th>
<th>Street</th>
<th>City</th>
<th>State</th>
<th>ZIP</th>
<th>Service Date</th>
<th>Completed Date</th>
<th>Approved Date</th>
<th>Total Hours</th>
<th>WO Subtotal</th>
<th>OAI Fee</th>
<th>Service Fee</th>
<th>International Fee</th>
<th>General Liability Liaison Fee</th>
<th>High Value Supply Fee</th>
<th>State Taxes Fee</th>
<th>Total Payment</th>
</tr>
<tr>
<td>6</td>
<td>ID# 20</td>
<td>WO177</td>
<td>695</td>
<td>Constantin Jenkins</td>
<td>CHAMPLIN, MN</td>
<td></td>
<td></td>
<td>Gideon Keebler</td>
<td>Basic Work Order</td>
<td></td>
<td>938 Randolph Avenue </td>
<td>Saint Paul</td>
<td>MN</td>
<td>55102</td>
<td>09/09/2020 8:00AM</td>
<td>09/09/2020 10:56PM</td>
<td>09/09/2020 10:56PM</td>
<td>0.00</td>
<td>$30.00</td>
<td>$0.00</td>
<td>$1.50</td>
<td>$0.00</td>
<td>$1.50</td>
<td>$0.00</td>
<td>$0.00</td>
<td>$33.00</td>
</tr>
<tr>
<td colspan="27" style="background: #ccc; padding: 1px;"></td>
</tr>
<tr>
<td colspan="25" style="border: none;"></td>
<td style="border: none;">
<p>Labor</p>
<p>Finance(2.00%)</p>
<p><strong>Total</strong></p>
</td>
<td style="border: none;" align="right">
<p>$33.00</p>
<p>$0.66</p>
<p><strong>$33.66</strong></p>
</td>
</tr>
</tbody></table>
</div>
</div>
</body>
</html>
Help me please someone
Try this one to get required output:
//td[p="Total"]/following-sibling::td/p[count(//p[.="Total"]/preceding-sibling::p) + 1]
I've just modified #JaSON 's answer and now it's working fine
//td[contains(., "Finance")]/following-sibling::td/p[count(//p[contains(., "Finance")]/preceding-sibling::p) + 1]
After reading many articles, I can't seem to find an answer as to why my images have no margin on the right side and my table paragraph text gets cut off on the right side. The paragraph text is fine on my other pages, just in the table it gets cut off.
This is all using css3 media queries responsive design. This happened to another site I built for a client. Any insight would be greatly appreciated!
Thanks!
Here is my css media query for the phone screen:
#charset "utf-8";
#import url("phone.css") only screen and (max-width:320px);
container {
width: 100%;
height: 100%;
}
#header img {
position: relative;
height: auto;
width: auto;
max-height:100%;
max-width:100%;
min-height:100%;
min-width:100%;
overflow:hidden;
}
#navigation {
font-size:large;
height: auto;
width:100%;
float:none;
overflow:hidden;
}
#menu {
float:none;
margin:0px;
display:none;
width:100%;
position:relative;
list-style-type:none;
}
.nav-btn {
width:100%;
background-color:#09F;
text-align:center;
box-sizing:border-box;
padding:15px 10px;
font-weight:bold;
font-size:large;
text-align:center;
cursor:pointer;
display:block;
height:100%;
}
.nav-btn:after {
content:url(images/mobilemenu.png);
}
#menu li {
width:100%;
font-size:large;
font-weight:bold;
background-color:#09F;
display:block;
margin:0px;
border:#000 medium solid;
float:none;
overflow:hidden;
text-align:center;
}
#menu img {
margin:0px;
padding:0px;
width:90px;
height:90px;
position:relative;
}
#navigation ul li {
margin:0px;
width:100%;
position:relative;
float:none;
overflow:hidden;
}
#menu li a {
width:100%;
display:block;
}
#content {
width:100%;
height:100%;
}
.socialmedia {
width:30px;
height:30px;
max-width:30px;
max-height:30px;
}
.bigfoot {
width:50px;
height:50px;
max-width:200px;
max-height:200px;
}
#content img {
height:auto;
width:100%;
position:relative;
overflow:hidden;
margin:5px;
}
#content table, tbody, th, td, tr {
display:block;
}
#content table {
border-collapse: collapse;
width: 100%;
height: auto;
padding: 10px;
position: relative;
min-width:320px;
}
#content td p {
position: relative;
margin: auto;
text-align: center;
padding: 5px;
min-width: 100%;
min-height: 100%;
}
#content tr {
position:relative;
width:100%;
height:auto;
overflow:hidden;
}
#content td {
position:relative;
width:100%;
height:auto;
min-width:100%;
min-height:100%;
overflow:hidden;
}
#content tr td img {
width:100%;
height:auto;
max-height:250px;
max-width:250px;
}
#footer {
width:100%;
height:100%;
}
And my html for the page:
<div style="background-image:url(images/beer%20content%20background2.jpg)" id="content">
<h1 align="center">Our Beers</h1>
<p>
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<img src="images/Alberts_Web.png" alt="albert's ale" width="350"/>
<p>Albert's Ale is a German inspired beer with a crisp malt base, and 2 varieties of hops. This pale ale is hoppy, and a real refreshing thirst quencher. Enjoy year round! <br />6% Alcohol.</p>
</td>
<td>
<img src="images/Hieroglyph_Web.png" alt="Hieroglyph"width="350"/>
<p> Hieroglyph is a double IPA. 8% Alcohol.</p>
</td>
</tr>
<tr>
<td>
<img src="images/Trapezeious_Web.png" alt="Trapezious" width="350"/>
</td>
<td>
<img src="images/Sifu_Web.png" alt="Sifu" width="350"/>
</td>
</tr>
</table>
<h2 align="center">Occasional & Seasonal brews</h2>
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
<tr>
<td>
<img src="images/Krock'd_Web.png" alt="Krock'd" width="350"/>
</td>
<td>
<img src="images/Viking_Web.png" alt="I Wish I was a Viking" width="350"/>
</td>
</tr>
<tr>
<td>
<img src="images/Fat Bobby_Web.png" alt="Fat Bobby" width="350"/>
</td>
<td> </td>
</tr>
</table>
</p>
<br />
<p align="center">Check out our upcoming events where we will be sampling our beer!</p>
<p align="center">Cheers!</p>
</div>
<!-- InstanceEndEditable -->
</div>
</body>
<!-- InstanceEnd --></html>
A quick note, I did apply the viewport meta tag on all of my pages to initial scale 1.0.
First of all: There are no media queries in the code you posted...
Apart from that: Although in the CSS you define the width for your tables as 100%, you have inline settings that give the tables 550px width:
<table class="beers" align="center" width="550" border="0" cellspacing="5" cellpadding="5">
I suppose that's the reason for them not fitting on a mobile screen. Erase all that inline stuff that interferes with the CSS.
Similarly with images...
I've tried everything I can think of, but I cannot get the whitespace between cells to show in Outlook 2013. This is being sent from NationBuilder. How do I add cellspacing so that it renders in Outlook?
Thank you!
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <!-- So that mobile webkit will display zoomed in --> <meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS --> <title>NationBuilder</title> <style type="text/css"> body {
background-color: #ffffff;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
font-family: 'Palatino Linotype', serif;
}
body {
color: #333333;
margin: 0;
padding: 0;
}
A:link {
color: #2594aa;
text-decoration: none
}
A:visited {
color: #2594aa;
text-decoration: none
}
A:active {
color: #2594aa;
text-decoration: none
}
table {
border-spacing: 0;
border-collapse: collapse;
border-spacing: 0;
}
table td {
border-collapse: collapse;
}
#bodytable {
border-spacing: 10;
border-collapse: sepatate;
}
#bodytable td {
border-collapse: separate;
}
p {
font-family: chaparral-pro, Helvetica, Arial, sans-serif;
margin-bottom: 8px;
margin-top: 5px;
}
.body-content img {
max-width: 100%;
}
ul {
font-family: font-family: chaparral-pro, Helvetica, Arial, sans-serif;
text-align: left;
}
h1 {
margin-top: 35px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 20pt;
color: #e37c00;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase
}
h2 {
margin-top: 10px;
margin-bottom: 10px;
font-weight: bold;
text-align: left;
font-size: 14pt;
color: #c8d300;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize
}
h3 {
margin-bottom: 0px;
margin-top: 10px;
font-weight: bold;
text-align: left;
font-size: 12pt;
color: #000000;
font-family: 'Trebuchet MS', sans-serif;
text-transform: capitalize;
text-decoration: underline
}
dt {
font-weight: bold;
margin-top: 10px;
margin-bottom: 6px;
}
/* Constrain email width for small screens */
#media screen and (max-width: 600px) {
table[class="container"] {
width: 100%!important;
}
}
/* Give content more room on mobile */
#media screen and (max-width: 480px) {
table[class="container"] {
width: 100%!important;
}
div[class="body-content"]img {
width: 100%;
}
}
/* Styles for forcing columns to rows */
#media only screen and (max-width: 600px) {
/* force container columns to (horizontal) blocks */
table[class="container"] {
width: 100%!important;
}
}
</style> </head> <body style="margin:0; padding:0;" bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- 100% wrapper --> <table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff"> <tr> <td align="center" valign="top" bgcolor="#ffffff"> <!-- header --> <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color:#2594aa;"> <tr> <td align="center"> <table width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td width="600" style="padding:20px; font-family:chaparral-pro,Helvetica,Arial,sans-serif;" valign="middle" height="100"> <img src="{{ settings.site.meta_image_url }}" alt="{{ settings.official_name }}" width="120" height="auto" border="0" valign="middle" style="vertical-align:middle;"> <a style="color:#000000;font-weight:bold;text-decoration:none;padding:20px;font-size:28px;" href="{{ settings.site.full_url }}"> {
{
settings.official_name
}
}
</a> </td> </tr> </table> </td> </tr> </table> <!-- ### 600PX CONTAINER ### --> <table style="font-size: 14px;" width="600" cellpadding="0" cellspacing="0" class="container" border="0"> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding: 20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;" bgcolor="#ffffff" class="body-content"> {
{
body
}
}
</td> </tr> <tr> <td height="30"></td> </tr> <tr> <td style="font-family:'proxima-nova','Helvetica',Arial,sans;padding:20px;line-height:1.5;background-color:#ffffff;-webkit-border-radius:5px;-moz-border-radius: 5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;"> {
{
settings.official_name
}
}
{
% if settings.has_address? %
}
ยท
{
{
settings.address.one_line
}
}
{
% endif %
}
<br/>This email was sent to <a style="color:#505054;" href="{{ recipient.email }}"> {
{
recipient.email
}
}
</a>. To stop receiving emails,
<a style="color:#505054;" href="{{ settings.site.unsubscribe_url }}">click here</a>. <br/><b>Don't forget to like us on Facebook!</b>
<br/>You can also keep up with {
{
broadcaster.name
}
}
on Twitter,
Facebook or Instagram. </td> </tr> </table> <p style="text-align:center;margin: 20px 40px; font-size: 0.8em;font-family:Helvetica,Arial,sans-serif;">Created with NationBuilder,
software for leaders.</p> <!-- ### 600PX CONTAINER ### --> </td> </tr> </table> <!--/100% wrapper--> </body> </html>
<html>
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<title></title>
</head>
<body>{{ recipient.first_name_or_friend }} --
<h1 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">The
Rogers Park Food Co-op has some exciting upcoming events!</h1>
<table id="bodytable" border="0" cellspacing="10" cellpadding="20" width="100%" style="border-spacing: 10px !important; border-collapse: separate !important; background-color:#ffffff;">
<tbody>
<tr>
<td style="background-color: #f8febf; border-collapse:seperate !important;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Berger Park Sustainability Open House
</h2>
<p>
<strong>Date: April 22, 2016 from 7 - 8:30pm</strong>
<br />
<strong>Location:
Berger Park Cultural Center
<br />
6205 N Sheridan Rd</strong>
</p>
<p>
Come celebrate the renovation of Berger Park,s south lawn! The architects plan will be unveiled. Also, Edgewater organizations committed to sustainability will have presentation tables. Share your ideas for other improvements to your park.
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/177/attachments/original/1460228200/April_22BergerPark2016-SustainOpenHouse.pdf?1460228200">
<img align="right" style="margin: 6px 1px; border: 1px solid black; float: right;" title="BergerSmall.gif" src="BergerSmall.gif" alt="BergerSmall.gif" width="100" height="129" />
</a>
<p>Presentation Tables:</p>Berger Park South Lawn Renovation
<br />Loyola Sustainability Institute Student sustainability projects
<br />Edgewater Environmental Sustainability Project
<br />Monarch butterfly project at Berger Park
<br />LetsGOChicago
<br />Rogers Park Food Co-op
<br />Free Little Libraries
<p>Please RSVP at
https://nextdoor.com/events/il/chicago/earth-month-at-berger-park-sustainability-open-house-581265
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Meet the Farmers
</h2>
<p>
<strong>Date:
April 27, 2016 at 5pm - 7pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/174/attachments/original/1458565305/Meet_the_Farmers.jpg?1458565305">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="MeettheFarmers_sm.jpg" src="MeettheFarmers_sm.jpg" alt="MeettheFarmers_sm.jpg" width="100" height="155" />
</a>
<p>FREE EVENT!</p>
<p>Get some face-time with the local farmers who supply the best Chicago restaurants and Farmers Markets!</p>
<p>Learn about where your food comes from by talking to the people who grow it!</p>
<p>Get 10% off Dinner from Uncommon Ground!</p>
<p>Stay for live musicfrom 8-10 pm.</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Farm Fresh Jams
</h2>
<p>
<strong>Date:
April 27, 2016 at 8pm - 10pm</strong>
<br />
<strong>Location:
Uncommon Ground
<br />
1401 W Devon Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="FarmFresh_sm.jpg" src="FarmFresh_sm.jpg" alt="FarmFresh_sm.jpg" width="100" />
</a>
<p>Fundraiser Concert for the Rogers Park Food Co-op</p>
<p>
<strong>Featuring performances by:</strong>
</p>
<p>Signal-to-Noise</p>
<p>Luna Blu</p>
<p>Abbie & Marlon</p>
<p>Abud: A Bard.</p>
<p>
<strong>Get 10% off Dinner from Uncommon Ground!</strong>
</p>
<p></p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Moah's Ark 4th Annual Plant Sale
</h2>
<p>
<strong>Date:May 7th and 8th</strong>
<br />
<strong>Location:Moah's ark</strong>
<br />
<strong>1839 W Touhy Ave</strong>
</p>
<a href="https://d3n8a8pro7vhmx.cloudfront.net/rogersparkfoodcoop/pages/173/attachments/original/1458531431/PosterDraft.PNG?1458531431">
<img align="right" style="float: right; margin: 6px 1px; border: 1px solid black;" title="moah.jpg" src="moah.jpg" alt="moah.jpg" width="250" height="188" />
</a>
<p>Our 4th annual plant sale will feature a big variety of heirloom tomatoes and peppers, plus herbs, flowers and more.
</p>
<p>We have several new tomatoes, including 7 varieties of dwarf heirlooms, old favorites like the cherokee purple, green and chocolate, Moah's yellow, and a couple new italian imports.</p>
<p>This is a 2 day event, Saturday and Sunday, which is Mother's Day. Mom's get a free plant.</p>
<p>RSVP to this event so that you will be notified of the full list which i will be putting up soon.</p>
<p>Happy spring!!</p>
<p>RSVP
here
</p>
</td>
</tr>
<tr>
<td>
<h2 style="color: #e37c00; font-family: 'Trebuchet MS', sans-serif; text-transform: uppercase; text-align: center;">
Click Here For Full Event Listing
</h2>
</td>
</tr>
<tr>
<td style="background-color: #f8febf;">
<h2 style="text-decoration: none; font-family: 'Trebuchet MS', sans-serif; text-transform: capitalize; color: #2594aa;">
Exclusive Offers for Co-op Owners!</h2>
<p>In our effort to provide value for our Owners, the Rogers Park Food Co-op is excited to offer the following exclusive deals for owners!</p>
<h3>$50 Discount to Natures Farm Camp</h3>
<p>To celebrate their love of Co-ops, Nature's Farm Camps has decided to offer a $50.00 discount for Natures Farm Camp registrations to the Chicago-area food cooperative members.</p>
<p>
<em>
<strong>Owners will receive a coupon code in an upcoming email.</strong>
</em>
</p>
<p>From naturesfarmcamp.com:</p>
<blockquote>We are an overnight summer camp where kids (ages 8-14) step out of their every day and immerse themselves in nature growing, foraging, cooking, making, building and exploring. Campers do with their hands, head and heart. In the process they
discover more about life and themselves, all while having a blast with new friends in the great outdoors.
</blockquote>
<hr />
<h3>Biggest Slim-Down with Hank: Help The Co-op While Getting Fit!</h3>
<p>Every few months, personal trainer Hank Rouse and his team of coaches run a Biggest Slim Down Contest. This past Holiday Season we had a Maintain Don't Gain Contest. To win cash prizes, all the contestants had to do was maintain their weight
(or even lose weight). I'm so excited to announce an Exclusive Opportunity for RPFC Co-Owners.</p>$25 will be donated to the Rogers Park Food Co-op for each participating Co-Owner who achieves the 3% Body Weight (Loss/Gain) benchmark.
<p>NEW Contest: Begins April 18th</p>
<p>Applications accepted until April 13th.</p>More Information at
http://www.facebook.com/events/495659513953786/
<br />
</td>
</tr>
</tbody>
</table>{{ broadcaster.name }}
<br />
{{ settings.site.full_url }}
</body>
</html>
Here is the HTML: https://jsfiddle.net/63v8cra7/1/
Screenshot from Thunderbird:
From Outlook:
Due to current limitations on getting DIV tags to work well across browser platforms for the particular liquid layout I desire, I have opted to use a combination of Tables and DIVs for layout. That being said, a couple of issues remain.
The FIRST issue is that in Firefox, my table row height for my footer is being rendered differently than it is being rendered in IE when using a table with a height of 100%. What happens is that in Firefox the footer row for the table has a height that is greater than the height specified for the table row. This, in turn, throws off my footer layout.
Here is the code for the page:
<html>
<head>
<meta NAME="DESCRIPTION" CONTENT="Cold Fusion Applications and Development">
<meta NAME="keywords" CONTENT="cold fusion, coldfusion, sql server, graphic design, houston, texas, tx, web developer, web development, e-commerce, survey, surveys, web applications, php, mysql, access, foxpro, sql, perl, shopping cart, web programming, macromedia, webmaster, html, cfml, xml, 77057, cfware, cfware.com, www.cfware.com, hosting, dhtml, dynamic html, web programmer, graphic designer, website, resume">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<!-- BODY -->
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<!--TABLE I -->
<table class="fullheight" width="100%" height="100%" min-height="100%" border="1" align="center" cellpadding="0" cellspacing="0">
<tr><td height="116" align="center" valign="top">
<!-- HEADER -->
<div class="header">
<div class="lfc">Cornerstone</div>
<div class="rfl"><img src="c4sqlogo.gif" width="295" height="68"></div>
<div class="lf4">Foursquare</div>
</div>
<div class="spacer"></div>
<!-- HEADER END -->
</td>
</tr>
<tr><td align="center" valign="center" bgcolor="#FFFFFF">
<!-- CONTENT -->
<div class="content">
<table class="fullheight" width="100%" height="100%">
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
<td></td>
<td align="center" valign="middle">
<h1 class="font-black">Cornerstone Foursquare Church</h1>
<br>
<h2>7791 Hillbarn Dr. Houston, TX 77040</h2>
<br>
<h2>(713) 856 - 7773</h2>
<br>
<br>
<h3>Service Times:<br>Sunday Morning Worship 10:30AM<br>Sunday Evening Bible Study 6:00PM
<br>Wednesday Evening Bible Study and Prayer 7:00PM</h3>
</td>
<td></td>
<tr>
<td></td>
<td></td>
<td></td>
</tr><tr>
</table>
</div>
<!-- CONTENT END -->
</td>
</tr>
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"> w w w . c 4 s q . o r g </div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
<!-- TABLE I END -->
</body>
</html>
And here is the code for the sytle sheet:
html, body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: :#a02f1d;
height: 100%;
width: 100%;
}
a {
color: #ffffff;
text-decoration: none;
font-size: 12;
font-weight: 500;
}
.header {
color: #ff0000;
margin: 0 auto;
width: 760px;
height: 116px;
background-image: url(stripe.gif);
background-repeat: repeat-x;
}
.fullheight {
height:100%;}
.lf4 {
float: left;
margin-top: 0px;
clear: left;
width: 240px;
margin-left: 190px;
color: #a02f1d;
font-size: 26px;
font-weight: semi-bold;
font-style: italic;
}
.lfc {
float: left;
margin-top: 8px;
margin-left: 20px;
color: #a02f1d;
font-size: 48px;
font-weight: semi-bold;
font-style: italic;
}
.rfl {
float: right;
margin-top: 24px;
margin-right: 20px;
clear: right;
}
.content {
margin: 0 auto;
width: 760px;
overflow: hidden;
color: :#a02f1d;
}
.spacer {
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 4px;
overflow: hidden;
}
.clearspacer {
background-color:#000000;
}
.footer {
color: #ffffff;
background-color:#a02f1d;
margin: 0 auto;
width: 760px;
height: 30px;
clear: both;
}
.footertext {
color:#ffffff;
margin-top: 6px;
font-size: 12px;
}
The SECOND issue has to do with modifying the existing layout so that there is a centered vertical area of 760px in width that displays in a shade of color different from the surrounding viewport. The primary difficulty is that in order to get my footer to stick to the bottom in both browsers and resize with the viewport, I had to re-adopt a table layout. The current strategy, however, is to use as few nests as possible in order to benefit from the speed and clarity from using DIVs. I would opt to use a DIV layout to the exclusion of a TABLE layout if it were not for the apparently, currently insoluble problem of getting a working sticky-footer to work with a DIV liquid layout.
I know this is quite unrelated, but I recommend that you use the w3c validator to validate your HTML once in a while.
A couple suggestions:
Add a doctype - if use use the right one you can get IE to standards mode rather than quirks mode http://www.quirksmode.org/css/quirksmode.html, so behaviour will be more consistent between IE and other browsers.
As suggested by K4emic - validate your markup.
Add a css reset to zero default margins and paddings, a good starting point here http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/.
You will find that these things will make chasing down layout bugs a lot easier. Otherwise, you just won't know where to start, is it your css, your html, the default browser stylings, the rendering mode of IE......?
As the other responders pointed out you first have to make sure that your document is well formed. That is, it must conform to a DTD. I will point out one issue that is easy to spot:
<tfoot height="28"><td height="28" align="center" valign="middle" bgcolor="#FFFFFF">
<!-- FOOTER -->
<div class="clearspacer"><img src="1.gif" height="10" width="1"></div>
<div class="footer"><div class="footertext"> w w w . c 4 s q . o r g </div></div>
<!-- FOOTER END -->
</td>
</tr>
</table>
In this snippet you can see that your
<tfoot>
element is unclosed. It should contain
<tr>
but that is missing.
These small errors are probably causing the inconsistent behavior that you are witnessing. After they have been corrected if you are still getting the behavior then you can look at the browser differences. Some HTML editor like Frontpage and Dreamweaver can be set to out put code that conforms to a DTD and highlight areas that do not conform. I would recommend using one.