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 ;)
Related
I have the following html in one of my mails:
<center>
<table class="button">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</center>
The problem is that on Gmail this Set Now button is properly centered but on Yahoo it is aligned to the left side. Here is picture that shows the problem:
Try following code :
<td align="center">
Set Now
</td>`
Nesting another <table> is safer than using <center>. This should cover all your bases:
<td style="text-align: center;">
<table class="button" align="center" style="margin: auto">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</td>
Try with
<table class="button" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center">
Set Now
</td>
</tr>
</tbody>
Set margin-left and margin-right to auto to the parent table. Like this,
<table class="button" style="margin-left:auto;margin-right:auto;">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
Although I must say that only styling the anchor tag to be a button is not going to work across all email clients, you probably should use code generated from here https://buttons.cm/
I'd like to send a responsive newsletter. I know how to do it with my style.css
<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff">
<tbody>
<tr>
<td style="padding-bottom:5px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
<tbody>
<tr>
<td style="padding:15px;background-color:#fff">
image
</td>
</tr>
</tbody>
</table>
</td>
<td style="padding-bottom:5px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
<tbody>
<tr>
<td style="padding:15px;background-color:#fff">
text
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-bottom:5px" valign="top">
<table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
<tbody>
<tr>
<td style="padding:15px;background-color:#fff">
text
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
but I have one problem.
In desktop looks great,
image text
text image
but in mobile
looks
image
text
text
image
and I want it like
image
text
image
text
I found Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3 and I was wondering if there is something like that in tables.
I tried to change align="center" with aling="left" and align="right" but nothing.
Can anyone help me?
Rather than getting the side-by-side effect by using two table cells (td's), you need to make each side a whole table, and use the align property on the table. This lets you have the left or right sides in either order when the email goes to one column.
Julie Ng's Antwort template has a good description + example of this technique:
https://github.com/InterNations/antwort/wiki/Columns-to-Rows-%28Version-1.0%29
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 new to html/css, and I'm coding a website with a rather intricate layout.
Because I'm a musician, I want to have a personal website, but I have a problem. I have these two tables, one on the left and one on the right, and I want text in the middle of the tables, but it doesn't go there and instead, goes on top of the tables. Is there any way I can make it so that it can do this?
Here's my code:
<html>
<table width="400" height="675" border="5" style="float: left" cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(embedded gadget)
</div>
</td>
</tr>
<h2 align="center">FAQ</h2>
<table width="400" height="675" border="5" style="float: right;" cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(information on the album here)
</div>
</td>
</tr>
</html>
First of all I recommend using bootstrap-3 as it is very well documented and easy to make good looking sites.
That being said I am not great at HTML or CSS either. Also you are not closing your table with . You could try doing this:
<table width="100%">
<tr>
<td>
<table width="400" height="675" border="5"cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(embedded gadget)
</div>
</td>
</tr>
</table>
</td>
<td>
<table width="400" height="675" border="5"cellpadding="2" cellspacing="2">
<tr>
<td>
<div>
(information on the album here)
</div>
</td>
</tr>
</table>
</td>
</tr>
<table>
You have a HTML error where you haven't closed your table tags.
As a beginner in HTML you need some tools to check what you've created is valid. Try running your page through a HTML validator which will tell you about errors like that And/or use View Source in Firefox which highlights errors like that in red.
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