I've found multiple post for aligning text next to an image, it works but at the same time it doesn't work. When gmail renders the html code, it renders it perfectly. When outlook renders the html code, the vertical alignment is off.
May I get some suggestions of how to get text and images to vertically align in a row in both gmail and outlook.
<td>
<div>
<img src="..." style="height:24px; width:33px; vertical-align:middle;" />
<span>Test</span>
</div>
<div>
<img src="..." style="height:24px; width:33px; vertical-align:middle;" />
<span>Test</span>
</div>
</td>
Email client compatibility is like cross-browser compatibility on a steroid induced rampage. I would suggest going old school with a TABLE to achieve the effect you want. Dated HTML practices tend to fare well in email clients.
<table>
<tbody>
<tr>
<td>
<img src="http://via.placeholder.com/150" />
</td>
<td>Hello world!</td>
</tr>
</tbody>
</table>
Related
On the left, I have buttons and the rest of the screen is a table, and I need a vertical line to act as a separator between the two but without any use of CSS/styles/classes.
Here is the base code:
<section align="left">
<div id="buttons">
<button type="button">Fire</button>
<br>
<button type="button">Water</button>
</div>
</section>
<!-- NEED A VERTICAL LINE HERE -->
<section align="center">
<table id="pokemons">
<tr>
<td>
<h5>Charizard</h5>
</td>
<td>
<h5>Blastoise</h5>
</td>
</tr>
<br>
<tr>
<td>
<h5>Pikachu</h5>
</td>
<td>
<h5>Squirttle</h5>
</td>
</tr>
</table>
</section>
I currently have this (for some reason in online editors the table isn't aligned to the middle, but on my local code it's fine):
I need this:
If you want to avoid using CSS, then your page will look atrocious.
There is not really a way to do that. I would make an <hr> tag and use transform: rotate(90); in your CSS.
I'm sorry but you will have to use CSS. No way around it, unless you use CSS or JavaScript.
I created an email template that uses a two-column layout. This was my approach:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
It works great on desktop! I have a two-column layout exactly as I wanted it. The problem is on phones because screens are too small for a two-column layout. I need one picture per row, not two, for mobile devices. What I could do is to use float:left;width:100% for the <td> elements that contain the images so that I have the one column layout that I need. However, that float:left;width:100% should apply only when #media screen and (max-width:450px) for example. But there is no way to use #media screen and (max-width:450px) using inline CSS. Remember, this is for an email template. So I cannot invoke external CSS files or add CSS to the <head> of the page because this is code that will be sent for an email template.
I found at https://kb.benchmarkemail.com/using-css-in-html-emails/ this advice, but that is not a solution for responsive tables:
Things To Do
Use tables for layout. Tables are more consistently supported. We
recommend that you place your CSS code inline to your content. It
should look something like this: Your content
here.... Declare width, cellpadding, and cellspacing for all
tables and table cells. This will result in a fixed width for the
template. Use hspace and vspace tag attributes to add whitespace
around an image. Margin and padding inline styles are supported by
most, but not all email clients
Any ideas? Thank you.
Google offers CSS support: https://developers.google.com/gmail/design/css as A. Meshu pointed out in his comments to my question.
I found at https://templates.mailchimp.com/development/responsive-email/ that they say this:
"You can leave the media query styles in the <head> of your email, as
clients that support media queries don’t strip out the <head> or
<style> areas."
That made me think I had to send a complete <HTML> document, so I even included <html><head><style type="text/css">..........</style></head><body>...........</body></html>.
For my other email templates I just send code for the <body>. I start the template with a <div> and everything works. But for this template now I am using this structure:
<html>
<head>
<style type="text/css">
#media screen and (max-width:450px) {
.responsive {
float:left!important;
width:100%!important
}
}
</style>
</head>
<body>
..........
</body>
</html>
Thanks to A. Meshu for providing very important hints in his comments to my question to figure it out.
Since table elements are block-level, I would say to change those tds into nested tables like it's 1999, and then float the first one left:
<table>
<tr>
<td colspan="2" align="center">
<h1>Header of my email template</h1>
</td>
</tr>
<tr>
<td>
<table style="float:left;">
<tr>
<td>
<img src="image1.jpg" alt="Image 1" />
</td>
</tr>
</table>
<table>
<tr>
<td>
<img src="image2.jpg" alt="Image 2" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<p>Footer of my email template</p>
</td>
</tr>
</table>
Having to rebuild an email for a client and for some reason I am getting a strange glitch happening in Outlook (this is not happening in any other browser), where it is splitting the jpeg into 2. I have not seen this happen before and not sure how to fix it, anyone have any ideas?
<td width="218" height="418" rowspan="5">
<img alt="alt text here" border="0"
src="http://www.maximiles.co.uk/m3img?l=9096912522165" style=
"display: block; width: 218; height: 418;">
</td>
Well, outlook does that because it uses very old rendering engine for HTML emails.
Instead of using width and height in your img tag, you should scale / fit the image using proper tr and tds along with aligning text on the left. If you had the whole html part, that could be of help.
https://litmus.com/blog/a-guide-to-rendering-differences-in-microsoft-outlook-clients
<table>
<tr>
<td>
<table>
<tr>
.....
.....
<td width="218" height="418" rowspan="5">
<img alt="alt text here" border="0" src="http://www.maximiles.co.uk/m3img?l=9096912522165" >
</td>
....
....
</tr>
</table>
</td>
</tr>
</table>
Here is my page structure with three column: 30-40-30
Here is fiddle: http://codepen.io/karimkhan/pen/BDfhJ
Proble is :
I want to position div in right section at particular height with div-height is 200px.
When I put style="height:150px" in right section div, right div remains on top and left and middle section move at 150px height.
Why?
<table border="0" width="100%">
<tr>
<td style="width:30%">
<div class="left">
Hi
</div>
</td>
<td style="width:40%">
<div class="middle">
<input type="text" id="url" width="80%">
<button type="submit" onclick="GetSentiment()" value="Submit">GetSentiment</button>
</div>
</td>
<td style="width:30%">
<div class="right" style="height:150px">
nice
</div>
</td>
</tr>
</table>
This is because the text in the <td> elements is vertically centered by default. If you apply styles to the <div>s in the other <td> elements, they will also behave. Alternatively, you can do <td valign="top"...> for each <td>.
EDIT: I notice that the code you posted above is much simpler than the code you posted on github. There may be other factors, including JavaScript or other styles affecting your production code. Without the production HTML, CSS, and scripts, it's impossible to determine everything that could be affecting the layout.
I have an html newsletter which works in most email carriers but the formatting is messed up in outlook. I have put vspace="10" on the image tag to put 10px margin on the top and bottom of the image to have a space between the image and text below it. However, in Outlook the vspace is not being picked up and the text appears directly under the image with no space between.
Does anyone know how to get this to work? I tried to put a margin-bottom of 10px on the image, but again this did not work.
It might be easier to use a nested table and define the height of the row to be 10px. What you are contending with in Outlook 2007+ is Word HTML rendering which handles CSS in it's own special way.
With HTML Email there is a lot of nuances between the different browsers. One thing i have learnt from creating emails is that it needs to be extremely simple. Both margin & padding are not supported by Outlook (due to it using the word rendering engine).
The solution
Replace the image and the space with a table containing 2 spacer gifs and the image in the centre. For example (you need to use absolute paths to your images):
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="YOUR IMAGE" width="" height="" />
</td>
</tr>
<tr>
<td>
<img style="display:block" border="0" src="images/spacer.gif" width="IMAGEWIDTH" height="10" />
</td>
</tr>
</table>