Working on an email blast and for the life of me I cannot get the text to center in mobile view. The URL is: http://strictpixel.com/clients/relevant/fbc/email/
I am referencing the top navigation, under the logo. In mobile, it slides to the left and I am not sure why.
I know this is something simple but I have been pulling my hair out for an hour.
Thanks!
Yeah that really is a mess and you should consider refactoring. There's no way you need all those nested tables.
However, if you plan to keep it this way, the problem is likely stemming from your HTML being invalid. First, the <center> tag is dead and should not be used. Second, you break the flow of your table structure beginning after the comment I inserted below:
<p class="template-label">469-952-6404</p></td>
<td class="expander"></td>
</tr>
</table>
</td>
<!-- You can't start the new table below here without first either
opening a new <td> or closing the <tr> and <table> that is open!! -->
<table class="container">
<tr>
<td class="wrapper">
<table class="twelve columns" style="background-color:#f1f5f8;vertical-align:center;">
...
My best guess is that you missed opening up the next <td> tag just before that table begins.
Use an online HTML validator to help you find where your table structure is broken. Something like http://www.freeformatter.com/html-validator.html may prove useful.
Related
Our CRM allows us to send automatic emails to our customers using their software. Things like purchase receipts and so forth. While they offer HTML editing of the emails, it's heavily restricted and we may not use any CSS.
As far as what their style guide does allow, it appears to be all HTML and some inline styling, for example:
<span style="color:#ffffff">white</span>
<div style="color:#ffffff">
<img src="dickbutt.gif" style="width:30px;height:20px">
...are all OK according to the guide. However, no other CSS or CSS references are allowed, including:
<link rel="stylesheet" href="/stylesheet.css" type="text/css">
or
<style type="text/css">
#import "/stylesheet.css";
</style>
or
<style type="text/css">
body { color:green; }
</style>
To add insult to injury, and I should have included this above, everything above the <body> tag (and including the body tag itself) is stripped out upon saving the file in their in-software HTML editor. They have some kind of auto-code modification scripts that reference the "approved" code in their style guide, and strips what's left. So what am I left with? Not much at all. Basically from between opening <table> to the closing </table>. They even strip out </body> and </html>.
With the remaining code, I'm unable to use #media at all or allow any <td> stacking. So, are their any alternate ways of linking to a style sheet you know about? ...a method that will allow stacking without access to CSS? I'm basically looking for a way to make these emails responsive under the restrictions outlined above.
I uploaded the style guide to JSfiddle: https://jsfiddle.net/Lxfqus7f
Yes, yes 100 times yes. Everyone who has ever designed an email template has had the same complaints. Email design is Web design circa 1999. First off just forget CSS references just inline everything you can and do not bother with #media tags, forget they even exist.
Table Design
Think of a <table> as a spreadsheet, a <tr> as a table row, and a <td> as a table cell. Instead of "stacking" TDs try nesting tables. A new table can go inside a TD and in a sort of Matryoshka doll style fashion you can make any layout you want.
<table>
<tr>
<td>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</td>
<td>5</td>
</tr>
</table>
The above works fine.
Responsive emails
The words responsive and email do not normally go together. What email clients render is severely limited but there are ways to work around it. Like setting your Master Table's width to 100% and having two TDs on each side. Like this:
<table width="100%" cellspacing="0" cellpadding="0">
<tr height="500px" valign="top">
<td width="*" bgcolor="#00FFFF"> </td>
<td width="550px" bgcolor="#FF0000"> <center><br><br> <H1>Body</h1> </center> </td>
<td width="*" bgcolor="#00FFFF"> </td>
</tr>
</table>
Here are both examples in a JSfiddle.
http://jsfiddle.net/e8r9ky4x/
Looks like your style guide includes the use of some inline styles:
<p>Our studio is <span style="color:purple">purple.</span></p>
Define sections of text that require different HTML <div>
<div style="color:#FC8301">
<h3>This title.</h3>
<p>This is sentence.</p>
</div>
Since you're automatically generating emails anyway, why not just let this one slide and declare your styles in variables and use them where appropriate?
Are they stripping out all style tags? Could you just put a style hidden at the begginning of a TD?
<td><style>/*rules are for quitters!*/</style>Stuff</td>
Using a style tag in the body may not be the best of things to use and may even induce vomiting in many web developers, but it IS a possibility to utilize in Email.
I would strongly recommend not to use it this way outside of cases like you have listed, and would recommend HEAVY testing across all clients as it can sometimes cause buggy results.
I would look to make your inline styling do most of the heavy lifting and just use the style tags in body for items that cannot be done any other way.
Below is some good resources on Responsive HTML email made to work on GMAIL APP (which strips the style tag almost completely) and should help give you a baseline on best way to create your emails.
Hybrid coding approach - http://labs.actionrocket.co/the-hybrid-coding-approach
Hybrid coding redux - http://labs.actionrocket.co/the-hybrid-coding-approach-2
Is Hybrid right option - http://labs.actionrocket.co/hybrid-is-the-answer-is-it-the-right-question
I'm working on some email that will be deployed via Exact Target. We have a lot of AMPScript dictating what is going on within the email(s). The content blocks of the email are dynamically filled, and when a field is left empty there is still a call made to that table section, which then inserts a blank space on the email. Thus throwing the design out of whack.
My question is, is there anyway I can have those empty cells completely removed from the page when not in use?
here is the code sample ...
Set #SendLog_blockC1 = lookup("RaceDataSendLog","BLK_C1","SubID",#SubLookup,"JobID",#JobLookup,"BatchID",#BatchLookup)
...
...
...
Set #blockC1 = Concat("My Contents\Newsletter\",#SendLog_blockC1)
....
....
....
....
%%[IF empty(#blockC1) THEN]%%
%%[ELSE]%%
<tr>
<td align="left" valign="top" >
%%=ContentAreaByName(#blockC1,"",0)=%%
</td>
</tr>
%%[ENDIF]%%
Thank you in advance.
On the assumption you're referring to that space above your ELSE - this should work:
<!--%%[
IF empty(#blockC1) THEN
ELSE]%%-->
<tr>
<td align="left" valign="top" >
%%=ContentAreaByName(#blockC1,"",0)=%%
</td>
</tr>
<!--%%[ENDIF]%%-->
This will hide the AMPscript in the HTML, in addition - you don't really need the IF to produce the space, you can just have the ELSE right after it.
and thank you for your responses. I was finally able to resolve the issue of the extra spacing.
What I did was remove the <tr> and <td> tags from around the if/else statements. I then placed those <tr> and <td> tags around the content blocks that are brought in by the PM's when they decide which blocks to use. This solved the problem of the extra spacing. Client is happy!!!
Thanks again guys!!!
I'm messing around with the aesthetics of a site I'm building and have been left scratching my head on something that looks like it should be simple, or so I thought.
I am using a table to place the content of my the site into, and when I run it through my local host (Using XAMP) the scale of table <td> tags is how I want it, but when I host it through my godaddy account the <td>s in my main content <tr> are scaled differently (seems to be influenced by the header row).
Here's the link to my current page and you'll see the problem. (BTW the site is not finished so any spelling mistakes and stuff like that feel free to ignore :))
http://www.sittingducksfc.co.uk/
So how would I go about creating evenly sized <td>'s within that row? as you can see the furthest right <td> is squashed to the same scale as the loginbox at the top. I have been fiddling with it for a while but I'm probably missing some simple css but I haven't found any previous question with the same problem.
Regards
Mike
So the problem appears to by your stylesheet... You have the three <td> which all have the width of 33%
I am using Google Chrome 31.0.1650.63m and it shows up fine but other browsers may not, i would suggest to do the following change
<td colspan="1" style="background-color:white;text-align:center;width: 30%;height:30%;">
I would also suggest using a stylesheet as opposed to editing the style in-line
Hi all thanks for your responses.
From trail and error i have gone for a different approach and stacked multiple tables into my main div and that allows me to specify the particular widths of each td within that particular table.
From further investigation it can also be seen
here and i apologize for a repeat question.
Here is my example code.
<div>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="80%"></td>
<td width="20%"></td>
</tr>
</table>
<table width="100%" height="100%" border="0" cellspacing="10" cellpadding="10">
<tr>
<td width="33%"></td>
<td width="34%"></td>
<td width="33%"></td>
</tr>
</table>
</div>
This can be stacked many times without each table affecting the other.
I have a table like this below. And there is a div container with information (usually large text), so I want to position these divs straight under each tr row to make them toggleable (like sliding panel). Can you please advise how to position it with CSS/Javascript? Though, this html is not semantic so if there is another way to do this without a div inside tr (I can't remove table in the code, but maybe some dd/dt?) - it'll be great!
<table width="100%" id="datatable" class="table-sortable">
<thead>
<tr>
<th id="th_name">Name</th>
<th id="th_email" class="table-th-sort ">E-mail</th>
<th id="th_birthday">Birthday</th>
</tr>
</thead>
<tbody>
<tr class="table-tr-group-head">
<td class="someclass">Name1</td>
<td class="table-td-sort">abc#abcd.com</td>
<td class="someclass">01.01.1981</td>
<div class="info">Large text1</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name2</td>
<td class="table-td-sort">def#abcd.com</td>
<td class="someclass">02.02.1982</td>
<div class="info">Large text2</div> <!-- this one -->
</tr>
<tr class="table-tr-group-head">
<td class="someclass">Name3</td>
<td class="table-td-sort">ghi#abcd.com</td>
<td class="someclass">03.03.1983</td>
<div class="info">Large text3</div> <!-- this one -->
</tr>
</tbody></table>
P.S I cannot inject another tr row after each like <tr><td> </td><td><div class="info">Large text</div></td><td> </td></tr> because this table is generated by Javascript and somehow when I make it there is a data shift.
Moo, I fought with this one for quite a while on my app....there's no simple solution really. Datatables can't handle colspans, which limits the ability to add rows as you've noticed. Unless you want to do some creative spanning of divs the old fashioned way, adding a row is basically out. Since Datatables has such tight control of the table syntax, doing some sort of shifting via CSS could be theoretically possible, but incredibly difficult....but I suspect if you went this route, you'd be doing a massive jumble of javascript inner html insertion.
After banging my head for quite a while, I settled for Qtip (http://craigsworks.com/projects/qtip/) I have the tip pop under the row it was triggered from via context and css, which gives a quasi-illusion of the table shifting. For a while I considered dumping Datatables, but I found that our customers really appreciate the functionality that it provides and others don't even come close. As an added bonus, it's very easy to setup and is very customizable.
Good luck.
I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
First Website
</title>
</head>
<body>
<table id="main" align="center" width="600 px">
<tr id="trBanner">
<td id="tdBanner">
<img src="../../../My Pictures/banner copy.bmp.jpg"
</td>
</tr>
<tr id="trNavLinks">
<td id="lnkHome">
Home
</td>
<td id="lnkLife">
Life
</td>
<td id="lnkTeachings">
Teachings
</td>
<td id="lnkExperiences">
Experiences
</td>
<td id="lnkPhotoGallery">
Photo Gallery
</td>
<td id="lnkReach">
How to Reach
</td>
<td id="lnkContact">
Contact Us
</td>
</tr>
</table>
</body>
</html>
alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg
Without seeing your code very long - don't use tables!
I know it's hard for those people who developed a long time with tables in webdesign, but belive me - after you learned how to design it with CSS & DIV-Tags, you will thank god for this!
Here is a tutorial for you: http://www.colorplexstudios.com/articles/div_web_design_tutorial/
And if you want to have an answer to your code-question:
It's because you have 1 cell in the first row and 3 cells in the second row. Use the colspan-attribute. You find a tutorial for this here: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
Don't use tables, use a right combination of div tags and position attributes. They're way better than tables, and more editable if you need to make any changes.
Eek, remove the tables. Use a UL instead, with display: inline on it in the CSS. Then adjust it to your liking (margin, padding). Put that inside of a div, and position it in your page.
As others have recommended, tables are not the most appropriate element for your site's layout. However, the simple fix is:
<td id="tdBanner" colspan="7">
This will make your banner span the entire width of your table. On a side note, the ids on a page should be unique, so if you need to give an id to your td tags, they should be different than the a tags.
I would check out some of the CSS tutorials that others have linked to.