I'm doing a responsive HTML email template for MailChimp and having some peculiar behaviour in Outlook 2003+ on Windows. The template is responsive, but the issues are experienced in desktop, large screen in Outlook. I'm no newcomer to this, and am normally able to get Outlook 2003+ to play nice with my designs, but have run out of ideas in this case.
To provide context, in my approach to responsiveness I've tried both methods described here http://templates.mailchimp.com/development/responsive-email/responsive-column-layouts/ and neither worked in this instance.
The emails render perfectly in all other mail clients and platforms that I've tested.
You can view the HTML here:
Rendered HTML - https://dl.dropboxusercontent.com/u/6136148/mailer-SO.html
Code as .txt - https://dl.dropboxusercontent.com/u/6136148/mailer-SO.txt
The two specific issues I'm experiencing are:
In Outlook only, the right column in the first 'two-column' section, beginning "Twitterverse" is pushed down a huge amount; I can't work out why. I considered the 'MS Word 1800px page-break' issue, but don't think this is what is happening. Do you?
In Outlook only, the three-column 'In Focus' section; the three columns refuse to site inline, regardless of image, table, or td width, when I set it in the HTML, or CSS, or MSOutlook Conditional CSS. Just can't get it to play nice. It seems not to be the padding either.
I am really hoping someone, versed in responsive email design, can import the template to their MailChimp, send a test to themselves in Outlook 2007 or 2013, and let me know what they think.
Download template ZIP - https://dl.dropboxusercontent.com/u/6136148/mailer-SO.zip
Please let me know if I've forgotten to mention anything pertinent. As always, thanks for all your help.
I had this problem and the solution is conditional commenting for mso.
You need to add tables only for Outlook to keep the columns inline.
<!--[if gte mso 9]>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td align="left" valign="top" width="200">
<![endif]-->
...responsive html code for first column here...
<!--[if gte mso 9]>
</td>
<td align="left" valign="top" width="200">
<![endif]-->
...responsive html code for second column here...
<!--[if gte mso 9]>
</td>
<td align="left" valign="top" width="200">
<![endif]-->
...responsive html code for third column here...
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
Example here: https://litmus.com/community/discussions/277-outlook-2007-2010-3-column-issue
Related
I am working on selenium webdriver and i want to insert data into the tables which are provided on web site, i have used sendkeys method but its not working for me. is there any other way to insert data into tables ?
Inserting data using selenium the only way to use is sendkeys() method. If I understand correct, your html table will be like below:
<html>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
<td>
<input></input>
</td>
</tr>
</table>
</body>
</html>
Get the xpath of the input table row of nth column, and use sendkeys() method
driver.findElement(By.xpath("html/body/table/tbody/tr[2]/td[1]/input")).sendKeys("Alice");
driver.findElement(By.xpath("html/body/table/tbody/tr[2]/td[2]/input")).sendKeys("Smith");
which works for me as code written above. Hope it will help you.
Before clicking to the cell it was having class attribute value emplty after clicking it switches from empty to current.
So now i am clicking every cell and then inserting value within it.
It is working like this now.
I am running AngularJS 1.2.3 and Bootstrap3 to create a simple task list app.
The code and Bootstrap3 CSS works everywhere (IE11.x, Chrome v31.0.1650.63 m, Opera v18.0.1284.63), except FireFox 25.0.1
If I add the link to bootstrap3 via
<link href="3rdPartyLibs/bootstrap3/css/bootstrap.min.css" rel="stylesheet">
then when AngularJS ng-repeat runs to create the table rows then FireFox v25.0.1 does not render the table header or rows and display them to the user However, if you look at the source, they are being created.
Here's an image of the page and an image of the source:
It should look like this:
FireFox displays this (notice there are no rows):
In FireFox, if I click the [Add New Task] button numerous times, it actually alters the DOM as I expect it to (adding rows to the table), but it doesn't display that to the user. However, the source is altered -- rows are added to the table -- and the source looks like this:
Referencing Bootstrap2 Makes It Work
All I have to do to make it work is reference Bootstrap2 on my machine (i have both locally) by altering the link to : (notice there is no 3 in the bootstrap directory.
<link href="3rdPartyLibs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
After I do that, it works in FireFox too and looks like:
Does bootstrap3 work in FireFox? Is there some special initialization I have to do?
Is Bootstrap3 not ready for prime-time, or is it FireFox?
Figured It Out While Attempting To Convert To Bootstrap2
I decided to convert this thing to work with Bootstrap2 since that would mean all browsers would work. While doing that I discovered that if I simply add a wrapper to my table, then it fixes the problem.
Here's a summary of what I had and what I did:
***note:**If you see unclosed tags, that is bec. it's a summary, please don't try to tell me I need to close those tags. It is valid HTML in the real thing. thanks.*
I had
<html>
<div>
<button1>
<button2>...
</div>
<table>
<thead>
<th>
</thead>
<tbody>
<tr ng-repeat="t in allTasks"
</tbody>
</table>
</html>
I simply wrapped my table in another div and now it works in FireFox. Looks like this:
<html>
<div>
<button1>
<button2>...
</div>
<div>
<table>
<thead>
<th>
</thead>
<tbody>
<tr ng-repeat="t in allTasks"
</tbody>
</table>
</div>
</html>
Now it looks like it should in FireFox
I'm trying to have a backup for some issues we're seeing with our responsive emails that come from ad serving. Occasionally, our ads come with a 3rd party script that pulls in a 1x1 tracking pixel. We use a global rule for our images to resize... img{width:100%;height:auto;} and there's no way we can target this tracking pixel using a class or id. I'm playing with the idea of using the nth-child selector to size the tracking pixel properly at least on mobile devices, as they can for the most part support that kind of CSS, although, I'm not writing it properly. Any help would be greatly appreciated.
http://jsfiddle.net/pxdunn/jk8EC/
HTML:
<td align="center" bgcolor="#ffffff" class="ad-728">
<font style="font-family:Arial,Helvetica,sans-serif;color:#858585;font-size:10px;text-transform:uppercase;line-height:13px;display:block;" align="center">Advertisement</font>
<table>
<tbody>
<tr>
<td width="100%" height="2" style="line-height:2px;font-size:2px;"> </td>
</tr>
</tbody>
</table>
<a href="http://oascentral.modernhealthcare.com/RealMedia/ads/click_lx.ads/mhoemail/jcr_dd_1113/102920131102/x19/crain/MHO_EZ_JOINTCOMM_DD_728_1113/Savelivessavemoney-Ad_ModernHealthcare_10-11-2013-2.jpg/1" target="_blank">
<img src="http://oascentral.modernhealthcare.com/RealMedia/ads/adstream_nx.ads/mhoemail/jcr
_dd_1113/102920131102#x19" border="0"/>
</a>
<a href="#">
<img src="http://placehold.it/1x1/"/>
</a>
</td>
CSS:
img {width:100%;height:auto;}
td[class="ad-728"] img:nth-child(n+2) {width:1px!important;max-width:1px!important;}
Nth child and other CSS pseudo classes are limited in support in html email. Your best bet is to create a tiny table and put the tracking link/image in there. 100% of 1 pixel is 1 pixel...
If you don't have the ability to choose where the tracking code is placed (added dynamically on send for example), you'll have to rethink your auto 100% strategy.
Also, keep in mind that declaring 100% in the style tag is not fully supported either - you should be inlining your CSS.
I have looked at this article by Ventrian and another here in our community. I cannot seem to get this to work, so here is what my module looks like in a nutshell.
View.aspx
<%# Control language="C#" Inherits="KDMC.Modules.kdmc_userTraderListView.View" AutoEventWireup="false" CodeBehind="View.ascx.cs" %>
<%# Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>
<asp:Panel ID="Panel1" runat="server">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1" OnItemDataBound="traderWorks">
<HeaderTemplate>
<table id="datatable">
<thead>
<tr>
<th>Some heading</th>
</tr>
</thead>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("SomeData")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer2 %>" SelectCommand="SELECT Whatever from WHerever"></asp:SqlDataSource>
<script type="text/javascript">
$('#datatable').dataTable();
</script>
<dnn:DnnCssInclude runat="server" FilePath="~/DesktopModules/<modulename>/media/css/jquery.dataTables.css" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/<modulename>/media/js/jquery.js" />
<dnn:DnnJsInclude runat="server" FilePath="~/DesktopModules/<modulename>/media/js/jquery.dataTables.min.js" />
</asp:Panel>
According to the articles and anytime I have ever plugged css and jquery into a skin file this should work! What is causing DNN not to see it in my module?
Edited
I think I see the issue. I think DNN is seeing the files that are plugged in using the <dnn:DnnCssInclude runat="server> or <dnn:DnnJsInclude runat="server> tags. The module does not see
<script type="text/javascript">
$('#datatable').dataTable();
</script>
How do I fix this? According to this article in our community that it needs to be instantiated. How do I do this?
My guess is the problem is likely due to the relative placement of the various scripts and content. If your using FireFox, you can hit Ctrl-Shift-J to bring up the error console and it will display Javascript errors when you refresh the page.
Anytime you're dealing with Javascript in DNN (or ASP.NET), it's important to look at the rendered code (by doing a view source (Ctrl-U) on the page) so you can see what is actually being generated by the code. Assuming you're using a recent version of DNN (6.x or greater) you shouldn't need to instantiate jQuery but you can verify that by looking at the source and verifying jQuery is being included.
You should verify that your JsIncludes are being rendered before your "$('#datatable').dataTable();" script and that the datatable object is being rendered above the that script as well. If not, you can specify the placement of the JsInclude bits by specifying the provider within the call (i.e. ForceProvider="DnnPageHeaderProvider")
I am developing a application in which one of my template renders a table with n number of rows. Now in each row, i have a column with buttons like edit and delete.
When clicked on edit, a edit form appears in the same window in some div. That form needs to be populated with values fetched from backend.
Now nothing great in this.
My problem is this:
I have a view which renders the complete table using the following template structure:
<script type="text/template" id="ledgersing">
<div class="span6 widget">
<div class="widget-header">
<span class="title">Ledgers</span>
<button class="btn btn-danger pull-right" id="addLedgerButton">Add Ledger</button>
</div>
<div class="widget-content">
<table width="100%" class="table table-striped dataTable">
<thead>
<tr><th>Name</th><th>Email</th><th>Phone</th><th>Action</th></tr>
</thead>
<tbody>
<% _.each(ledgers,function(data){ %>
<tr>
<td><%= data.name %></td>
<td><%= data.email %></td>
<td><%= data.contact_number %></td>
<td><span onClick="alert(<%= data.id %>)">x</span></td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</div>
</div >
</script>
In this it just alerts a id when clicked on x. Now do i need to necessarily use onClick event like this? I mean that i will need the id in whatever construct i use for processing. What can be a better solution? I know backbonejs can handle this mess with ease if application is structured properly.
So essentially i want to know from experts, what will they do in such a scenario. How will they structure the application? I am novice to this frontend framework.
Instead of using _.each in your templates, I'd go with one view per table row as each one has some bit of complexity (edit, delete)
In these view, you use the events hash to register your DOM events. Never use onclick in your HTML, this is a really bad practice.
Don't hesitate to look at the TodoMVC Backbone example for ideas on how to organize your app.
I'm also developing a backbone application for the first time and went thru exactly the same mistake.
I first I just tried to translate my php / asp / ruby / whatever_server_side_template_technology into underscore templates, and got something pretty much like what you had.
Now I can realize it's a mistake. You should use subviews. The events and the associated model will be connected to that subview. Pretty soon you'll have lots of view listening to events and updating themselves when data changes, but if you're carefull it will be ok.
Here's a demo app I'm working on: https://bb-jugar.rhcloud.com/index.html#Wine
and here's the github repo: https://github.com/opensas/BackboneBootstrap
This is how I solved it: https://github.com/opensas/BackboneBootstrap/blob/master/demoapp/js/src/views/crud/RowsView.js