I am making HTML Emailer.
The issue that I am facing is, when I put 5th images in a single row then it expands table width, rather than going down in the center of new line.
<table cellspacing="8" style="margin: 0 auto; text-align: center; max-width: 500px !important; " width="500">
<tr>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
<td align="center" style="text-align:center;height:60px; padding:10px;'.$border.'">
<img src="http://www.hubilo.in/images_for_links/facebook.png" width="110">
</td>
</tr>
</table>
What I want is , when i put 5th image then it should be down to the center of the new line. also it would be great , that the same output can be displayed in Outlook
Any help would be grateful.
Thank You.
Try using display:inline-block in your td.
Related
What is the correct inline css to move text or an image center in Outlook. Any time I open it in a browser, it looks great but the bottom image and text always stay left in Outlook. Not sure what else to try. Any help is appreciated
<table cellpadding="0" cellspacing="0" border="0" width="800" align="left">
<table align="left" width="800px;">
<tr width="800px">
<td><img width="800px;" src="images/ArlingtonPic-edited.png"></td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="800px" style="font-size:20px; margin-left: auto;
margin-right: auto; text-align: center; vertical-align: middle;">
<strong>Arlington Concrete Floor Boxes</strong></td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="350px" style="font-size:16px; padding: -10px 10px 0 10px;">
<p>Our NEW heavy-duty<strong>FLBC4502</strong> 4.5"<strong> concrete floor
box</strong> has more! <strong> <span style="color: red">SIX conduit hubs and FOUR plugs.</span></strong>
And the NEW FLBC4502LR leveling ring makes
installation easier than ever on our FLBC4500
and FLBC4502, and others concrete boxes. <br>
It is <em>REVERSIBLE!</em></p>
</ul>
</td>
<td width="350px" style="font-size:16px; padding: 0 10px;">
<p>The screw holes on SIDE A fit all 4.5" boxes,
and accommodate our 6" round covers,
and most others on the market.
SIDE B features a second set of holes
that fit a cover with a 3-3/8" hole pattern.
These Arlington <strong>cover kits</strong> fit
our concrete boxes. <br>
<em>That is convenience!</em></p>
</td>
</tr>
</table>
<table align="left" width="800px;">
<tr width="800px">
<td width="800px" style="margin-left: auto; margin-
right: auto; text-align: center; vertical-align: middle;">
<img src="images/ArlingtonLogo.png">
</td>
</tr>
</table>
On your table cell use following attributes:
<td valign="middle" align="center">...</td>
for vertical and horizontal align.
This will add image in center in outlook.
<table width="100%">
<tr>
<td align="center">
<img src="https://4de5ad3168da.png" align="middle" width="200" height="130">
</td>
</tr>
</table>
what I need
this is what appearing
I am quite new to HTML and what I want is to have an image icon over another image to clarify more there is a banner and what I need is to have a small icon in the top right corner.
I have used this code
<DIV style="position: relative; top:0px; left:700px; width:200px;
height:5px"><a href="%%ftaf_url%%"><img
src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-612a-`4609-b5a6-3bc4231cdf86.png" border="0"></a></DIV>
it appears fine in content block but when i send email this icon is always appearing to be in left of screen no matter what I do. I have also used below code but this also doesn't helped.
<div style="display: flex; justify-content: right;">
<img src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-
612a-4609-b5a6-3bc4231cdf86.png" style="width: 40px; height: 40px;" />
</div>
use the below code
<div style="justify-content: right; text-align: right">
<img src="http://image.S7.exacttarget.com/lib/fe8c13727d67037a74/m/1/ff6a555c-
612a-4609-b5a6-3bc4231cdf86.png" />
</div>
Neither flexbox or position work reliably in HTML Email. Most common way to achieve this is using <table>s instead of <div>s, creating a bunch of table rows, and aligning the content.
Not sure what your code looks like, but something like this will work:
<table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td style="background: url('cross-hatch-background.jpg');">
<table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0" width="100%" style="">
<tr>
<td style="padding: 10px;">
<img src="envelope.png" align="right">
</td>
</tr>
<tr>
<td style="padding: 10px;">
<img src="logo.png" align="center">
</td>
</tr>
<tr>
<td style="padding: 10px;">
navigation
</td>
</tr>
</table>
</td>
</tr>
</table>
I have a design for HTML emails which must display like
| image'a'here<<<<<<<<<<<space>>>>>>>>>>>>>>>>>image'b'here |
<table class="wrapper">
<tr>
<td class="header" style="padding: 15px 15px 0;">
<table class="max-width" cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<!--RB logo-->
**<td style="width: 93% !important;vertical-align: top;">**
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<a class="link-style" href="https://www.reportbee.com/" target="_blank">
<img src="https://gallery.mailchimp.com/0135a40176b33deb024da1fea/images/d86f927a-3eef-4e8f-9dae-99753e62b0b5.png" alt="Report Bee" title="Report Bee"></a>
</td>
</tr>
</table>
</td>
<!--RB flag-->
<td>
<table class="block" cellspacing="0" cellpadding="0">
<tr>
<td> <img src="https://gallery.mailchimp.com/0135a40176b33deb024da1fea/images/2cddc1b3-1e85-4759-8cb1-7e07e9a2d89c.png" alt=""></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
I tried to specify width for the which contains my first image. But Gmail doesnot accept the width for and it displays my email as
| image'a'here image'b'here |
what am I doing wrong?
When I want two images to sit at opposite ends of an email, I use:
<td width="40" align="left"><img></td>
<td width="100%"><img></td>
<td width="40" align="right"><img></td>
As both images have fixed widths, the spacer in the centre that is 100% pushes the images to the outside.
if you are sending html email just pass following info in header
MIME-Version: 1.0
Content-type:text/html;charset=UTF-8
Main things is content type: **Content-type:text/html**
pass content type text/html for html email
i have experienced a problem like this before.. after doing a lot of research online, i came to know style tag and any most of the css elements will not work in gmail and outlook
so if you are giving a width for td please make it like td width=" " then you can see the effect
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I'm composing an HTML email which looks fine in every major email client except Outlook 2013, which is adding vertical gaps between my image slices. I unfortunately don't have Outlook 2013 installed on my computer so it's making it hard to test, but a screenshot from my client suggests that it looks like this -
My code is available here - HTML version.
I have no idea what more I can do to get rid of the gaps - I've set line-height for the tds and images to zero, I've set the images to display: block, I've set the tables to border 0, cellpadding and cellspacing zero, and border-collapse: collapse. What else can I do to fix it?
Edited to add - I'm actually not sure if the gaps are between images or table rows. From the screenshot it actually looks like it might be the table rows.
Problem solved - changing the line-height of the tds containing the images to the height of the image, rather than 0, resolves the gaps and doesn't break the layout in other clients. So
<td width="150" style="line-height: 83px;">
<img src="" height="83px">
</td>
You are running into issues because you are going about the whole layout wrong. You shouldn't need to break your watch image up into multiple pieces, and definitely shouldn't have an image containing the letters 'DS' from the title in the center.
Because you have a complex layout, it is better to use colspans and nested tables - it is a cleaner technique than cutting images into little pieces. Images that are cut horizontally will always cause issues - if not in the initial send, Outlook will force gaps in there if it was forwarded anyway. If you must cut an image, try to do it vertically as it will remain perfectly intact in all clients.
It is also good practice to have all CTA's (calls to action) and important copy/text in html, not images, as most clients block images by default. It is also considered spammy to have an email that has a bad ratio of images to text.
Give this a try:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="450">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="400" style="padding:30px;">
Fall in love with...
</td>
<td valign="top" width="50"> <!-- It is easier to split an image vertically -->
<img alt="Ring Overhang" src="" width="50" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450">
<img alt="Shop now screenshots" src="" width="450" height="200" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450" style="padding-top:30px; padding-bottom:30px;">
Luxury Watch Brands <!-- Titles like this should always be in text not images -->
</td>
</tr>
<tr>
<td colspan="2" valign="top" width="450">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150">
<img alt="Watch 1" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="150">
<img alt="Watch 2" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="150">
<img alt="Watch 3" src="" width="150" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td valign="top" colspan="3" width="250">
<table width="250" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img alt="Ring Image" src="" width="250" height="250" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td>
<img alt="Big Watch" src="" width="250" height="450" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td>
Shop Luxury Watches > <!-- Call to actions are better in text not images -->
</td>
</tr>
</table>
</td>
</tr>
</table>
the best output for an emailer can be done by slicing image vertically,(not horizontally) and arrange it in multiple nested in single row . It will work flawlessly in all clients