I have been opening the locally hosted email in chrome, selecting all, copying, and pasting into GMail for many years now. 2-3 days ago it started posting the bgcolor instead of the image even though no code or process was changed. Is there an updated way to do this now?
Here is the doc: http://www.homesnappers.com/email2.html
Here is a snippet of the code:
<table data-module="Layou-1" data-bgcolor="Background Color" width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#494c50" class="currentTable">
<tr>
<td data-bg="Main BG" align="center" background="http://www.homesnappers.com/wp-content/uploads/2016/08/bg-2.jpg" style="background-size:cover; background-position:top;"><table border="0" align="center" cellpadding="0" cellspacing="0">
Any help or insight would be greatly appreciated!
Related
So,
I've made an email, with HTML4.01
Strickly using nested tables.
<body bgcolor="#666666">
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#666666">
<tr>
<td width="600" height="60">
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="600" height="60" align="center"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#FFFFFF"><br>
Etkö näe tätä viestiä? Siirry HTML-versioon
</span></td>
</tr>
</table>
</td>
</tr>
Like this, for example. There is over 800 lines of code in this one document.
Now i've been asked to make a resposive single page site out of the same content.
My question is, is there a easy or semi-easy way to make responsive page out of HTML tables ?
As you can see, there is lots of hard-coded widths and heights
I would love to skip some of the work with some crazy css trick.
I did a google search and found this https://www.w3schools.com/howto/howto_css_table_responsive.asp but it didnt do anything, atleast for now.
Style 1#
I removed all the pixel and point fixed sizes inside every td and tr.
It was painful and slow and i much rather use #2 now...
Style #2
I just redid everything with bootstrap grids,
once you understand bootstrap grid, its way faster than looking for fixed sizes in tables. It will also be much easier to make changes once you have your template.
I have create a lots of HTML for a client.
We are both using Chrome but the images of my HTML are displaying normally but not for my client.
We clean our cash, I checked 100 times the path, name and extensions of my images and everything seems good to me.
Is there something that can blocked the images on the desktop of my client ?
Thank you very much for your time !
I add an example of my code here :
<table cellpadding="0" cellspacing="0" border="0" width="750" class="devicewidth" align="right">
<tbody>
<tr>
<td class="webonly"><img src="./img/banner-1-FR.png" alt="banner" width="100%" style="display:block;min-width:100%; " class="webonly" /></td>
<td class="mobonly"><img src="./img/banner-2-FR.png" alt="banner-2" width="100%" style="display:none;min-width:100%; " class="mobonly" /></td>
</tr>
</tbody>
</table>
My images are all in the file : img
I just can't see where's the problem is.
I'm having trouble getting my HTML email template to render properly when it is sent from Mailchimp to Outlook 2007, 2013 and 2016. The thing is, when I upload the HTML directly for testing on Litmus, the email renders fine across all Outlook previews. When I send the test email from Mailchimp to Litmus, the email looks out of proportion in Outlook 2007, 2013 and 2016 (for Win7).
Is Mailchimp doing something with my Outlook-targeting conditional comments, and how can I work around that?
My conditional comments seem to work sometimes to fix the width on some elements of my MC email (you'll see in the screenshots, the textbox is the right size for the top card but not on the second one). But for the life of me, I can't figure out why one works and the other doesn't, I'm writing the same comment for both.
Screenshots:
when Mailchimp sends the email to Outlook (what went wrong)
when the HTML is rendered for Outlook directly (what it's supposed to look like)
Conditional comments:
I've put in Outlook-specific conditional comments like so:
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<!--BODY TABLE-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
...
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
Thank you for the help! Really appreciate it.
I feel your pain, I've had the same issue for templates I was making for a client. I wanted to make the icons retina proof and let the client upload any image size he'd like. Unfortunately after many many hours debugging en searching the web, I read the following on a MailChimp post:
Outlook doesn’t recognize the HTML that constrains images. This means
that if you use HTML to resize an image uploaded to a campaign or
template, it may display at the original size in Outlook. Be sure to
resize your images before you upload them to MailChimp, or use our
built-in image editor.
source: MailChimp Knowledge Base
I didn't really believe that this could actually be true so I kept trying to constrain the images. I've put fixed width on the img, td, tr, table.. nothing helped.
Sadly I can't really explain what happens, hopefully the link to the MC article gives you a better view on it.
But my best answer is to set a max-width & width to your img and td anyway. And tell your client to resize the images to the allowed size. Setting a max-width and width will also display the #px when hovering over the editable image in your MailChimp editor. I also found out that when you do upload a bigger size, MailChimp throws a lil' warning.
If it may help in any way; see my code below that I used in my templates to make it fluid.
<table mc:repeatable mc:variant="Item with image top and CTA" width="650" cellpadding="0" cellspacing="0" border="0" align="center" class="full-table" style="width:650px;">
<tr>
<td style="padding:30px 20px 40px 20px;" bgcolor="#FFFFFF">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom:15px;max-width:610px;">
<img src="/images/img.jpg" alt="x" style="width:100%; max-width:610px;" width="610" mc:edit="article_image">
</td>
</tr>
</tr>
</table>
</td>
Are you using retina images in your emails? From experience I have found that outlook's, if they are given a big image, they display it at a big size if a specific width is not assigned to the img tag. Below is an example of a code i use for the images in my emails.
<img src="[IMAGE PATH]" width="" height="" style="width:px; height:px;display:block;" border="0">
Also can you post the img tag of the offending element so i can have a look at it better please?
Cheers
I am still a newbie user of Sublime so there might be an easy way to do this.
I have an HTML where one HTML tag is forced into 2 lines. I possibly copied it from somewhere else and this just got stuck there.
Here is an example:
<table border="0" cellpadding="0" cellspacing="0"
align="center" width="100%"
style="margin-right: auto; margin-left: auto;" class="deviceWidth">
After cellspacing a width a new line starts for no reason which makes the whole code hard to read.
So what I need is without going through the code and one buy one deleting the extra spaces, a way to delete these automatically and in bulk.
So in essence the force the above code to appear like this:
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="margin-right: auto; margin-left: auto;" class="deviceWidth">
can you help me with this?
Any answer is appreciated!
I have noticed a 'bug' or whatever with Internet Explorer when viewing HTML emails. I'm using Version 11 and its still present.
If I want to align a table in the center of the page, it is also causing the text in any <td> cells to be centered, even if I set the attribute to align="left" and use inline CSS to specify text-align="left".
Here is some example code (try sending this as a HTML email to your yahoo or gmail account and view it in IE):
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#CCC;">
<tr>
<td>
<table width="650px" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left:11px;padding-right:11px;background:#FFF;">
<tr>
<td align="left" valign="top" style="text-align:left;">Moreover, while in most other animals that I can now think of, the eyes are so planted as imperceptibly to blend their visual power, so as to produce one picture and not two to the brain; the peculiar position of the whale's eyes, effectually divided as they are by many cubic feet of solid head, which towers between them like a great mountain separating two lakes in valleys; this, of course, must wholly separate the impressions which each independent organ imparts.<br><br> The whale, therefore, must see one distinct picture on this side, and another distinct picture on that side; while all between must be profound darkness and nothingness to him. Man may, in effect, be said to look out on the world from a sentry-box with two joined sashes for his window. But with the whale, these two sashes are separately inserted, making two distinct windows, but sadly impairing the view. This peculiarity of the whale's eyes is a thing always to be borne in mind in the fishery; and to be remembered by the reader in some subsequent scenes.</td>
</tr>
</table>
</td>
</tr>
</table>
You should see that the text will be center aligned rather than left aligned. This 'bug' is only present when viewing the code as an HTML email. If you view it as a webpage then it works fine!
I have tested it using web versions of Outlook and Yahoo as well as a different online mail account and the problem is the same only in IE. I tried it in Chrome, Firefox, and Android's built-in browser and it works fine.
I don't understand how to fix it other than not to have my tables centered in the middle of the page. It doesn't look aesthetically pleasing to have my email contents to the left of the page either.
Instead of using align="center" in your parent table tag, try putting it in the parent <td>. Also lose the align="center" on your child table tag, and you don't need CSS text-align:
<table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table bgcolor="#FFFFFF" width="650px" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top" style="padding-left:11px; padding-right:11px;">
Your text here...
</td>
</tr>
</table>
</td>
</tr>
</table>