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
Related
I am coding a custom email template HTML/CSS and I need to replicate the attached image.
My question is about the blue background color element, which goes beyond two table rows, one would be the "Welcome to the family", and the other would contain the video.
How can I implement that?
<!-- BEGIN MODULE: BODY CONTENT // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top" style="background-color:#1D75B9; border:0;">
<h2 style="margin:40px 20px; text-transform:capitalize; text-align:center;">Welcome to the family!</h2>
</td>
</tr>
<tr>
<td valign="top">*|YOUTUBE:[$vid=fj77lSG6Bl8, $max_width=500, $ratings=N, $views=N, $border=N, $title=N, $trim_border=N]|*
</td>
</tr>
</table>
<!-- // END MODULE: BODY CONTENT -->
Any example that makes the same thing would be helpful to me.
thank you
You can do like this :
<body style="margin:0px; padding:0px;">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign="top">
<tr>
<td valign="top">
<img src="WvLArjpg6991210.png">
</td>
</tr>
<tr>
<td valign="top">
<img src="second.png" width="461">
</td>
</tr>
</table>
</div>
</body>
You have cut images into pieces and use in <tr><td><img src></td></tr>
So I am building the final page of an online exhibit I am working on. The final page uses the exact same format as an earlier page in the exhibit (with an image to the left and a paragraph to the right of the image) so I just copy/pasted all the code and changed URLs, text, and dimensions of images and td elements as I needed to. I have changed nothing to do with the alignment of the various elements on the page, but now I have an element that is basically ignoring td valign="top" and appears to be aligned to center instead. I've done a line by line comparison of the html of the new page with the original but I can't find anything that should have changed it. Basically the text part of the page (title of page and body of page) should start on the same line as the top of the image, but instead it's starting in the center after a huge amount of white space.
Here's the particular table in question with the text and full URLs removed to make it a bit shorter:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="*image*" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
There is a " in front of valign, so it's not reading the attribute.
<td width="500" "valign="top"><div align="center">
The full code should be:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="http://placehold.it/400x267" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
Here's a working codepen: http://codepen.io/vic3685/full/vyKmwg/
So I have a responsive email that has a left and right box. Which looks like this:
But in Microsoft Outlook 2003 - 2013 these two blocks render like this:
You can find my code for these boxes here: https://jsfiddle.net/uhjjqkmo/
Unfortunately I am unable to post the full code (discretion of the client).
Example DOM layout:
<!-- START:LEFT -->
<table width="295" align="left" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
Left
</td>
</tr>
</tbody>
</table>
<!-- END:LEFT -->
<!-- START:RIGHT -->
<table width="295" align="right" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
Right
</td>
</tr>
</tbody>
</table>
<!-- END:RIGHT -->
I have added some extra css rules to your code:
Updated fiddle
And I found out that it was better to put width="49%" on the floating tables (instead of width="295")
BEFORE:
AFTER:
Then an extra tip I can give you is to combine align and float.
<table align="right" style="float:right; Float: right;">
<tr>
<td width="200"><img src="" alt="" /></td>
</tr>
</table>
This to get the best possible results for floating tables in email e.g. when trying to float an image in text ;)
I have the following code for a background Image on a table, which has some image links on top of it as well as a logo. I am using a mailchimp account and I would like to make the background editable. it is not possible to make background images editable.
So I am wondering about alternative solutions to have the social links and logo on top of a image while still allowing a image underneath to be editable, so background image without a background property in a table, that is compatible in most email clients, that allows for editing in Mailchimp.
<table mc:edit="backgroundImage" class="backgroundHeader" background="http://104.131.7.150/public/vancouverSunrise.jpg" border="0" cellpadding="0" height="400" cellspacing="0" width="100%">
<tr valign="top">
<td>
<div align="right" style="padding: 40px 15px 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0" width="30">
<!-- LOGO/PREHEADER TEXT -->
<tr align="right">
<td><a mc:edit="linkedin" href="*|CUSTOM_URL|*"><img src="linkedin.png" width="46.6" height="44" /></a></td>
<td><a mc:edit="facebook" href="*|CUSTOM_URL|*"><img src="facebook.png" width="46.6" height="44" /></a></td>
<td><a mc:edit="twitter" href="*|CUSTOM_URL|*"><img src="twitter.png" width="46.6" height="44" /></a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr valign="top">
<td>
<div align="center" style="padding: 10px 15px 0px 15px;">
<table border="0" cellpadding="0" cellspacing="0" width="30" class="wrapper">
<!-- LOGO/PREHEADER TEXT -->
<tr align="center">
<td><img src="image.png" width="244" height="126.6" /></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
You can't use z-index either so hacking an img on top of another is impossible.
You need to have a set up based around the code from http://backgrounds.cm/ and have your mc:edit attributes get to the filename in both the background attribute of the TD (not the table, table backgrounds don't work in most clients) and the VML script from the generated code. You also need to update the height and width attributes on the TD and VML.
I am placing a heading/title on a HTML page using following code:
<table width="100%" height="55px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height:10px">
</td>
</tr>
<tr>
<td style="width:105px;"></td>
<td align="left" style="padding-right:10px;padding-left:10px">
<div style="font-family:quicksand;font-size: 28px; color:##bdbdc0;z- index:1000000;position:relative;">
De Graef <font size="2">Landelijk & Sfeervol Wonen</font>
</div>
</td>
</tr>
</table>
Other content is in other tables.
When i zoom in or zoom out, or simply change resolution, this text is not moving it's position in sync with the other page elements.
Any ideas?
Change your header row to this :
<tr>
<td align="center" style="font-family:quicksand;font-size: 28px; color:##bdbdc0;margin-left:-50px;background-color:##4D4946;">
<table width="956" border="0" height="100%" cellspacing="0" cellpadding="0" style="background-color:##4D4946;">
<tbody>
<tr>
<td style="background-color:##4D4946;">
<br>
<br>
<img style="background-color:##4D4946;" src="images/logonew.png">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I'm helping you here but should seriously consider rewriting all of it in a clean and modern way, most of your code is deprecated :
Use appropriate HTML markup for segmenting your document
Use <table> only when then you need an actual table
Use separate CSS files for keeping your markup clean
Read the W3C recommendations about all of this