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.
Related
OS: OSX macOS Sierra 10.12.6
Selenium Version: 3.6.0
Browser: Safari
Browser Version: 11.0.1(12604.3.2)
Expected Behavior - click() action should work on a button located inside an iframe in Safari browser
Actual Behavior - No action when performed button.click() action on Safari browser
Steps to reproduce -
Open safari browser
Access web application login screen
Enter valid credentials and click on Login button, pop up appears
Switch to iframe
Click on button placed inside an iframe
No action when clicked on button. Same code is working fine in other browsers(Chrome, Mozilla, IE11)
Below is the code:
SafariOptions options = new SafariOptions();
options.setUseCleanSession(true);
driver = new SafariDriver(options);
driver.manage().window().maximize();
driver.get("testurl");
driver.findElement(By.id("UN")).sendKeys("admin");
driver.findElement(By.id("UN")).sendKeys("admin$");
driver.findElement(By.id("Login")).click();
driver.switchTo().frame(driver.findElement(By.xpath("//*[starts-with(#class,'dijitDialog') and contains(#style,'z-index: 950;')]//*[starts-with(#id,'AxDojo_Dialog_frame')]")));
driver.findElement(By.xpath("//*[#id='ButtonPlaceHolder']/button[2]")).click();
No action when last step is executed.
As work around found an alternate to perform click on the button with below code
driver.findElement(By.xpath("//*#id='ButtonPlaceHolder']/button[2]")).sendKeys(Keys.ENTER);
But like this we need to change in many areas, Selenium is browser independent and maintenance of code browser wise is tedious task to us. Please can anyone look into this issue.
Please find HTML code inside iframe.
<iframe id="AxDojo_Dialog_frame_1508320744505" name="AxDojo_Dialog_frame_1508320744505" style="border: 0px; width: 605px; height: 159px;" width="605" height="136px" scrolling="auto" frameborder="0" src="about:blank" axpageload="1"></iframe>
#document
<!DOCTYPE html>
<html style="overflow-y: hidden"><head>
<title>Login</title>
<link href="../AxCommon/Styles/ECDefault/main.css" type="text/css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="../Packages/Scripts/JQuery/jQuery.js"></script>
<script type="text/javascript" language="javascript" src="../AxCommon/Scripts/AxSystemBroadcast.js"></script>
<script type="text/javascript" src="../AxCommon/Scripts/AxMyParent.js"></script>
<script type="text/javascript" src="./Scripts/AxDialog.js?v=14082015"></script>
<style type="text/css">
.DialogBtn{width: 80px; font-size: 10pt;white-space:nowrap;}
.DialogCustomBtn{font-size: 10pt;white-space:nowrap;}
#popupMandatoryDiv { display:none;position:relative;height:auto;background:#FFFFFF;z-index:999999;overflow:auto;border:1px solid black;padding:5px 20px 10px 18px;font-size:12px;}
li {list-style: none; }
/*li:before {content:'\2022'; display: block; position: relative; max-width: 0px; max-height: 0px; left: -13px; top: -4px; color: red; font-size: 20px;padding-right: 5px;}*/
li:before {content:'\2217'; display: block; position: relative; max-width: 0px; max-height: 0px; left: -13px; top: -2px; color: red;font-weight:bold}
</style>
</head>
<body>
<div id="divMask" style="height: auto; width: auto;">
<table id="Table1" cellspacing="6" cellpadding="4" border="0">
<tbody><tr>
<td rowspan="3" style="width: 3px; height: 5px" valign="top" align="center"></td>
<td colspan="2" valign="top" align="center" height="10"></td>
</tr>
<tr style="width:100%">
<td valign="top" align="center" width="10%">
<img id="IconImage" src="../AxCommon/Images/28 information.gif">
</td>
<td valign="middle" align="left" height="5" width="90%">
<div id="divPrompt" align="left" style="DISPLAY: block; FONT-SIZE: 9pt; OVERFLOW: hidden; DIRECTION: ltr;">You are already logged into Excelicare in other active session(s). Please choose one of the options below:</div>
</td>
</tr>
<tr style="width: 100%; display: none;">
<td valign="top" align="center" width="10%">
</td>
<td valign="top" align="left" height="5" width="90%">
<div id="popupMandatoryDiv" align="left" style="DISPLAY: block; FONT-SIZE: 9pt; OVERFLOW: auto; DIRECTION: ltr;display:none">
</div>
</td>
</tr>
<tr>
<td valign="middle" align="center" colspan="2" style="padding-top: 10px">
<div id="ButtonPlaceHolder"><button class="DialogCustomBtn" onclick="AxSysF_CloseWindow(6)">Open new session / <br>end other session(s)</button>
<button class="DialogCustomBtn" onclick="AxSysF_CloseWindow(7)">Open new session / <br>retain other session(s)</button>
<button class="DialogCustomBtn" onclick="AxSysF_CloseWindow(0)">Cancel login<br> </button> </div>
</td>
</tr>
<tr id="trchkPlaceHolder" style="visibility: hidden; display: none;">
<td> </td>
<td valign="middle" align="left" colspan="3" id="tdchkPlaceHolder">
<div id="checkPlaceHolder"></div>
</td>
</tr>
</tbody></table>
<div>
<br>
<div id="lblInfo" style="display: block;"><b>Note : </b> If you choose to <i>Open new session/end other session(s)</i> any unsaved data in the other session(s) will be lost.</div>
</div>
</div>
<input id="hdnTitle" type="hidden" value="Login">
<script type="text/javascript">
var strProductType = '<%=System.Configuration.ConfigurationSettings.AppSettings("ProductType")%>';
strModulePageName = 'frmdialog';
$(document).ready(function() { PageLoaded();setTimeout('self.focus()', 10);});
function setCallback(CallbackFn) {
_CallbackFn = CallbackFn;
}
document.oncontextmenu = function (event) {return false;};
</script>
</body></html>
As per the screenshot/HTML you provided, there needs some modification in your code block as follows:
The line :
driver.switchTo().frame(driver.findElement(By.xpath("//*[starts-with(#class,'dijitDialog') and contains(#style,'z-index: 950;')]//*[starts-with(#id,'AxDojo_Dialog_frame')]")));
Though the outer HTML element does have the class attribute as dijitDialogPaneContent but doesn't have style attribute as z-index: 950;.
The line :
driver.findElement(By.xpath("//*[#id='ButtonPlaceHolder']/button[2]")).click();
As you are using xpath with index e.g. button[2] the xpath becomes brittle and vulnarable. I would have prefered to expand the <button> tag and use the <span> or any other tag/text present within to construct an unique css/xpath.
Following those 2 observation you can make some minor changes in your code as follows:
driver.switchTo().frame(driver.findElement(By.xpath("//div[#class='dijitDialogPaneContent')/iframe[starts-with(#id, 'AxDojo_Dialog_frame')]")));
//clicking the first button
driver.findElement(By.xpath("//button[#class='DialogCustomBtn' and contains(.,'end other session(s)')]")).click();
In-case the loading sequence of this <iframe> is constant, our xpath would be much more generic as follows:
driver.switchTo().frame(driver.findElement(By.xpath("//div[#class='dijitDialogPaneContent')//following::iframe[1]")));
//clicking the first button
driver.findElement(By.xpath("//button[#class='DialogCustomBtn' and contains(.,'end other session(s)')]")).click();
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.
I am trying to create a PDF that contains table which is partly filled, partly empty. To accomplish this I am using DomPDF via a Laravel wrapper.
It seems that DomPDF somehow miscalculates the height of the empty cells and also displaces the table grid and content.
Here is a minimal broken example:
<html>
<head>
<style>
html, body {
font-family: DejaVu Sans;
}
table {
border-collapse: collapse;
border: none;
margin: 0;
width: 100%;
}
table.main td {
padding: 0;
border: 2px solid black;
}
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
height: 14px;
}
</style>
</head>
<body>
<table class="main">
<tr>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</table>
</td>
<td>
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
This is how that table looks like in the generated PDF:
I have tried to add min-height and max-height for the table cell, but no results, it still randomly misaligns everything.
It turns out that this requires line-height to be set exactly equal to the font size. This will work:
.main table td {
border: 1px black solid;
text-align: center;
font-size: 10px;
line-height: 10px;
height: 14px;
}
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:
The IE8 documentation says it supports min-width, but it doesn't seem to work for me.
The html I want to be a minimum width is in table cells.
I saw another question here which suggested adding a 1-pixel height div to each cell, with a width setting, but that doesn't work - IE renders it as 18 pixels high, for some reason.
Here is the html code:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table.keyboard div.key {
height: 50px;
font-size:50px;
border: 5px outset gray;
min-width: 60px;
text-align: center;
}
table.keyboard div.spc {
height: 1px;
width: 60px;
background-color: green;
}
table.keyboard td:hover {
background-color: lightblue;
}
table.keyboard {
border: 3px inset blue;
}
</style>
</head>
<body>
<div id="body">
<div>Here is some stuff</div>
<table class='keyboard'>
<tbody>
<tr>
<td><div class='key'>1</div><div class='spc'></div></td>
<td><div class='key'>2</div><div class='spc'></div></td>
<td><div class='key'>3</div><div class='spc'></div></td>
<td><div class='key'>4</div><div class='spc'></div></td>
<td><div class='key'>5</div><div class='spc'></div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The "spc" div appears 18 px high!
Of course, if min-width worked, I wouldn't need the div...
<table class='keyboard'>
<tbody>
<tr>
<td><div class='key'>1</div></td>
<td><div class='key'>2</div></td>
<td><div class='key'>3</div></td>
<td><div class='key'>4</div></td>
<td><div class='key'>5</div></td>
</tr>
</tbody>
</table>
Any clues?
Just to make this easier, I have put 3 different versions of this code on my website.
http://jsfiddle.net/3htmA/
IE8. your code works perfect.
The HTML TABLE spec uses COL to define column widths. See the following spec: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4
Here's an example of how it's used:
http://www.htmldog.com/guides/htmladvanced/tables/
Min-width on table cells works differently than block-level elements. Table cells are controlled on the column level, not on the individual cell level. If a given cell size increases or decreases, the entire column will be affected, unless explicitly controlled by the tag.
Try this:
table.keyboard .key
{
min-width:60px;
width: expression(this.width < 60 ? 60: true);
}
This width expressions is an alternative for min-width, it supposed to be a workaround for older versions of IE.
I think your problem is that your column is determining the width of the element, not the div.
EDIT:
Also check if your browser is not in Compatibility mode.