I've just been given a take home exam for a job as an email developer. My task is to try my best to create an HTML email out of a .png file. I've been using tables, and I've come to a section where I have to insert an image alongside text, and I'm crashing and burning. The header text is too far displaced from the paragraph, and the image doesn't sit well; does anyone have any ideas on how to resolve the issue? My code is as follows:
div #costume-section {
width:645px;
height: 225px;
padding-left: 05px;
background: #ff821d;
color: white;
}
<div id="costume-section">
<table>
<th id="cos-font">Costume Contest</th>
<tr>
<td>Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
👋 Rachelledev
Think about this like you are working in a spreadsheet. You have set a th and a tr table row.
Since you have your header text outside of the row containg the 2 td's the header text sits on top of the tr containing the text and the image.
Rearranging the table markup you don't really need the th in this scenario unless its a requirement.
<div id="costume-section">
<table>
<tr>
<td>
<h1>Costume Contest</h1>
Duhh, of course - Wear it all day if you wanna. Perhaps you will be the winner of the contest? (must be present at party to be voted on) We'll hold a kid contest too!</td>
<td><img src="http://mandrill-emails.s3.amazonaws.com/melt-holidays/20151020/costumes.png" /></td>
</tr>
</table>
</div>
I need to put 3 links in the same line aligned like left, center, and right without using CSS.
Its something like this, I hope this helps
If you really want to do all of this without using any CSS, you can use tables.
<table>
<tr>
<td>First link</td>
<td>Second link</td>
<td>Third link</td>
</tr>
</table>
Otherwise you don't really have much of an option if you want the spacing and all you got on your image example. I would also not recommend using tables all that much, because pretty much everything should be responsive for mobile devices these days, and tables are really hard to fit in to a 320px of screen width.
This is extremely bad practice. A list of links is not tabular data. HTML is not a layout tool. This is how things were done in 1996. The web is better (in some ways) now and we do not do things this way now.
It is possible to hack a layout with a table and obsolete presentational attributes. The data is not tabular, however, so this is bad food for screen readers and search engines.
It is also not HTML 5. What you want to achieve is not possible with HTML 5. This is HTML 4.01 Transitional which, when it was released two decades ago, was only ever intended as a stop-gap while people converted over to using CSS for presentation.
<table width="100%">
<tr>
<td width="33%">A link</td>
<td width="34%" align=center>A link</td>
<td width="33%" align=right>A link</td>
</tr>
</table>
assuming you can add inline styling ,you can use this
<div>
<a href="" >firstlink</a>
<a href="" style ="text-align: center;
width: 90%;
display: inline-block;
margin: auto;">secondlink</a>
<a href="" >thirdlink</a>
</div>
else you can use one by answered by community wiki
I am making a simple newsletter layout that can only contain basic HTML but am getting caught up on formatting it properly. I have very little html experience, if I could use css I could lay this out but this is meant to be low level html that most e-mail clients can display properly.
This is a bit of code that I've done to get the image and a button (in the position of button 2) looking correct but it's getting the top and bottom buttons sitting there correctly that's the issue.
<table width="100%" style="text-align:center;">
<td>
<img src="http://localhost/temp/leftpic.png"></td>
<td>
<img src="http://localhost/temp/button.png"></td>
</table>
This is my design outcome. With the outter border being a table border centered in the middle of the page.
Is it possible to format something relatively close to this without using css?
I appreciate any help, cheers.
You CAN use css, you just have to avoid third-party files. You need to define the CSS rules inline, that is, in the style attribute, as you are already doing it for table. However, your HTML is invalid. You need to have tr elements outside your td elements and it is healthy to actively wrap your tr elements inside a tbody, which should be the child of your table.
By the way: the reason one should avoid third-party css in this case is that it might mess the design of the page of gmail/yahoo.
Something like this will start you off... This is with no CSS and no styling (other than what you have originally).
Although you state no CSS yet your first line is styling (albeit inline). Did you just mean no external file?
This is how we used to do layout before CSS, so this is using HTML tables:
<table width="100%" style="text-align:center;" border="1">
<tr>
<td width="50%">
<img src="http://localhost/temp/leftpic.png" width="390" height="480" />
</td>
<td>
<table>
<tr>
<td><input type="button" value="bn1" /></td>
</tr>
<tr>
<td><input type="button" value="bn2" /></td>
</tr>
<tr>
<td><input type="button" value="bn3" /></td>
</tr>
</table>
</td>
</tr>
</table>
Since you have a fixed height of your image on left, you can also use
<tr height="160">
Since 160 * 3 = 480 (the height of your image)
See an example here https://jsfiddle.net/on6ytfyn/
You probably want to remove the border in the first line of code too.
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 have a bowling web application that allows pretty detailed frame-by-frame information entry. One thing it allows is tracking which pins were knocked down on each ball. To display this information, I make it look like a rack of pins:
o o o o
o o o
o o
o
Images are used to represent the pins. So, for the back row, I have four img tags, then a br tag. It works great... mostly. The problem is in small browsers, such as IEMobile. In this case, where there are may 10 or 11 columns in a table, and there may be a rack of pins in each column, Internet Explorer will try to shrink the column size to fit on the screen, and I end up with something like this:
o o o
o
o o o
o o
o
or
o o
o o
o o
o
o o
o
The structure is:
<tr>
<td>
<!-- some whitespace -->
<div class="..."><img .../><img .../><img .../><img .../><br/>...</div>
<!-- some whitespace -->
</td>
</tr>
There is no whitespace inside the inner div. If you look at this page in a regular browser, it should display fine. If you look at it in IEMobile, it does not.
Any hints or suggestions? Maybe some sort of that doesn't actually add a space?
Follow-up/Summary
I have received and tried several good suggestions, including:
Dynamically generate the whole image on the server. It is a good solution, but doesn't really fit my need (hosted on GAE), and a bit more code than I'd like to write. These images could also be cached after the first generation.
Use CSS white-space declaration. It is a good standards-based solution, but it fails miserably in the IEMobile view.
What I ended up doing
*hangs head and mumbles something*
Yes, that's right, a transparent GIF at the top of the div, sized to the width I need. End code (simplified) looks like:
<table class="game">
<tr class="analysis leave">
<!-- ... -->
<td> <div class="smallpins"><img class="spacer" src="http://seasrc.th.net/gif/cleardot.gif" /><br/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/pinsmall.gif"/><img src="/img/pinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/><img src="/img/nopinsmall.gif"/><br/><img src="/img/nopinsmall.gif"/></div> </td>
<!-- ... -->
</tr>
</table>
And CSS:
div.smallpins {
background: url(/img/lane.gif) repeat;
text-align: center;
padding: 0;
white-space: nowrap;
}
div.smallpins img {
width: 1em;
height: 1em;
}
div.smallpins img.spacer {
width: 4.5em;
height: 0px;
}
table.game tr.leave td{
padding: 0;
margin: 0;
}
table.game tr.leave .smallpins {
min-width: 4em;
white-space: nowrap;
background: none;
}
P.S.: No, I will not be hotlinking someone else's clear dot in my final solution :)
You could try the css "nowrap" option in the containing div.
{white-space: nowrap;}
Not sure how widely that is supported.
I've got around this type of issue in the past by dynamically creating the entire image (with appropriate pin arrangement) as a single image. If you are using ASP.NET, this is pretty easy to do with GDI calls. You just dynamically create the image with pin placement, then serve to the page as a single image. Takes all the alignment issues out of the picture (pun intended).
Why not have an image for all possible outcomes for the pins? No Messing with layouts for browsers an image is an image
Generate them on the fly caching the created images for reuse.
What would make the most sense is changing out which image is displayed on the fly:
<div id="pin-images">
<img src="fivepins.jpg" />
<img src="fourpins.jpg" />
<img src="threepins.jpg" />
<img src="twopins.jpg" />
<img src="onepin.jpg" />
</div>
Since you are using images anyway, why not generate an image representing the whole layout on the fly? You can use something like GD or ImageMagick to do the trick.
Add a "nowrap" in your td tag...
Since you're going for maximum compatibility, consider generating a single image representing the frame.
If you're using PHP, you can use GD to dynamically create images representing the frames based on the same input that you would use to create the HTML in your question. The biggest advantage to doing this is that any browser which could display a PNG or GIF would be able to display your frame.
I figured out that there is a setting on the client where they can select the view as 1) Single Column, 2) Desktop View, and 3) Fit Window.
According to MSDN, the default is supposed to be to Fit Window. But my wife's IE Mobile phone was defaulting to a Single Column. So no matter what, it would wrap everything into a single column. If I switched to any of the other two options it looked fine.
Well, you can set this with a meta tag:
<meta name="MobileOptimized" content="320">
will set the page width to 320 pixels. But I don't know how to make it go to auto.
This does not work on BlackBerry's prior to v4.6 - you're stuck with single column unless the user manually changes to desktop view. With 4.6 or later, the following is supposed to work, but I haven't tested it:
<meta name="viewport" content="width=320">
You might need an actual space immediately following the semi-colon in
Try it with the <div> tag on the same line as <td>...</td>
I may have misunderstood what you are after but I think that you can do what I've done for logos on a map.
The map background tile is drawn then each image is told to float left and given some interesting margins so that they are positioned as I want them to be (view source to see how it's done).
Use the word joiner character, U+2060 (i.e. )
Maybe this is just one case where you could use tables to enforce layout. It's not optimal, and I know you aren't supposed to use tables for things that aren't tabular, but you could do something like this.
<table>
<tr>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> ></td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
</tr>
<tr>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><img src="Pin.jpg"></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Do you have tried to define a width for the column? Like <td width="123px"> or <td style="width:123px">. And maybe also for the div ?
Have separate images for every possible arrangement of each row.
That would only require 30 images (16+8+4+2)
You can replace img with span and use a background image with each span, depending on a CSS class:
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
<p class="..."><span class="pin"></span><span> </span><span class="pin"></span>...
(Personally I think it's better to have four lines with a p tag instead of a single div with br.)
Then in CSS you can have something like this:
p.smallpins {
margin: 0;
padding: 0;
height: 11px;
font-size: 1px;
}
p.smallpins span {
width: 11px;
background-image: url(nopinsmall.gif);
background-repeat: ...
background-position: ...
}
p.smallpins span.pin {
background-image: url(pinsmall.gif);
}
There isn't any nobr HTML tag; I am not sure how well-supported this is, though.
You could use CSS overflow:visible and non-breaking spaces between your elements (images), but no other white space in the HTML content for those lines.
Would it not be easier if you do it like this?
<div id="container">
<div id="row1">
<img/><img/><img/><img/>
</div>
<div id="row2">
<img/><img/><img/>
</div>
<div id="row3">
<img/><img/>
</div>
<div id="row4">
<img/>
</div>
</div>
Whereby your CSS would handle the alignment?
.container div{
text-align:center;
}