I am writing html for an email and mock-ups of my footer looks like this:
I am facing issues with the vertical alignment of the last row in this mockup, where company logo follows the "Powered by" text. My <td> tag looks like this which is trying to achieve what is in the above mock-up:
<td height="20" style="height: 20px; vertical-align: middle;" align="center" valign="middle">
Powered by
<img valign="middle" src="http://cdn.mcauto-images-production.sendgrid.net/37cafc0cf58b37be/f5b816c0-c7cc-41eb-b01b-21a635204c2b/72x20.png" alt="logo" style="width:71px;height:20px; vertical-align: middle" />
</td>
The code above is not properly middle aligning the text and the logo and producing this for Outlook 2007, although it is working for other mainstream email clients:
You can see that logo and "Powered by" text are not properly aligned in the middle, how can I fix that? Also note that, I cannot use multiple <td> tags inside a <tr> for that purpose because I want horizontal center alignment as well.
My preferred method in these situations is to add a table with no width (equating to width:auto) and utilise table cell vertical alignment which is usually super reliable.
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle">
Powered by
</td>
<td valign="middle" align="right" style="width:76px;">
<img src="https://via.placeholder.com/71x40" alt="logo" style="width:71px;height:40px; vertical-align: middle" />
</td>
</tr>
</table>
So no height set on any table cells, literally letting the image's natural height set the height of it's wrapping cell and then the text cell will match it naturally.
I've also set the image table cell to be slightly wider than the image and aligned the image to the right to give some space between the two pieces of content.
Related
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
I've been screwing around with this for almost 2 hours and still can't get it to render the right way in Microsoft Outlook.
It was enough of a pain to get it to render in Internet Explorer, but I got it:
Still, here's how it looks as an HTML email in Outlook:
Don't worry about the line break for now; the problems I need to fix are
(1) The 1 pixel of white vertical space between the left piece and center piece
(2) The center piece having pixel more height than the left and right pieces
Here's the HTML:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td align="left" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
<td align="left" valign="center" bgcolor="#0a9fda" style="padding: 0 10px;" width="220" height="35">
CLICK HERE TO LEARN MORE
</td>
<td align="left" width="6">
<img src="images/right-button-corner.png" style="display:block;" height="35"/>
</td>
</tr>
</table>
If I can't get it, I'm going to give up and use a single image. Any input much appreciated!
In regard to the height issue.
The height of the middle td is the content height (in this case it is line-height) + padding-top + padding-bottom.
You can remove padding declaration and valign and width attributes to make text vertically aligned to the middle and your button will be scaling horizontally (no breaks). I assume that would be good choice, considering you coded fixed height value of 35px.
Example of the middle <td>:
<td align="center" bgcolor="#0a9fda" style="height: 35px;" height="35">
<a href="http://example.com" style="color: #FFF; font-size: 14px;
font-family: Arial; text-decoration: none;">
CLICK HERE TO LEARN MORE</a>
</td>
Additional Notes
You can control how the call-to-action text should break by using entity. For example CLICK HERE TO LEARN MORE will break after "HERE" if the td width is insufficient to fit the text in one line.
Images should have border: none inline style to prevent uncontrolled gaps.
Also note, that valign attribute value center is incorrect. It can have values of top, bottom, or middle which is default.
There are more issues with your code.
Validate your code with some tool, for example http://validator.w3.org/.
I would try the following.
Try align="right" on the left button image:
<td align="right" width="6" height="35">
<img src="images/left-button-corner.png" style="display:block;"/>
</td>
I'm trying to create an e-mail newsletter in HTML. The layout has a fixed-width (600px) center. If the viewport is larger than 600px in width, there should be some decoration images on the left and the right. These images should be 'glued' to the viewport's edges:
As you can see, when the viewport scales, the fixed-width (blue) content stays centered, but the (red) images on the left and on the right are moving with the viewport's edges.
If the viewport gets too narrow, the (red) images should become fixed such that they don't overlap the (blue) center content.
To accomplish this, I'm using <div>s with auto margins for the (red) images, for example: margin:0 auto 0 0.
This works well, except that on small devices like the iPhone, I want the e-mail client to just show the (blue) centered content:
But the <div>s with the (red) images on the side influence the content width, so the e-mail clients show them too.
How can I achieve this? Using Javascript and/or CSS media queries is not an option, since most e-mail clients strip CSS and JS from the e-mail HTML.
You should use tables.
You'll need 3 tables for that.
First, the good old centering table:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
Then, another centering table of 3 columns in percents:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left" valign="middle">YOUR LEFT CONTENT HERE</td>
<td width="70%" align="center"> YOUR MAIN CONTENT TABLE HERE </td>
<td width="15%" align="right" valign="middle">YOUR RIGHT CONTENT HERE</td>
And, in the middle TD of the previous center, you can put your 600px wide main content table.
This might need some styling tweaks with floats and block elements aligns, but the basic structure is there.
*Table 2 is nested in table 1's main TD cell.
For mobile mail clients, just put a class on the two LEFT and RIGHT tds, then have them display:none; in your media query. Since the content will be nested inside those, it will inherit the display none and your 3 columns table will effectively become a single column one.
This is not possible without media queries. There is no way to get the left and right columns to pop or hide on resize. Even if you used a float/align technique, it would just pop the right side only (then center with the left above).
I would suggest a fluid table with a max width div to keep your main content at 600px.
<style>
#media only screen and (min-device-width: 600px) { /* don't over stretch */
.main {
width:600px !important;
}
}
</style>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td width="15%" align="left">left
</td>
<td width="70%" align="center">
<div class="main" style="max-width:600px !important;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
center
</td>
</tr>
</table>
</div>
</td>
<td width="15%" align="right">right
</td>
</tr>
</table>
What about a table where the middle cell has a fixed width and the other two cells have a) either a background image aligned to either side, or b) have an image with overflow:hidden on the cells?
Here's a more minimal solution to what you want to achieve.
For the red elements, you can continue to set their positions with margin: 0 auto 0 0... etc, but include this CSS:
width: 0;
overflow: visible;
z-index: 1;
This way, the red elements won't "clash" with the blue <div> when they "meet".
For the blue <div>, declare a higher z-index:
z-index: 2;
Because the z-index of the blue is higher than the red, the red elements will hide underneath the blue element when they "overlap".
Note: gmail does not yet support z-index (source), but you could look into creating the same effect through default stacking.
Side notes:
It REALLY does not have to get as complex as using tables. Read: Why not use tables for layout in HTML?
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>
I'm trying to build a single row css table with multiple cells that has text that is vertically centered inside the cells. Basically the table behaviour I am trying to mimic with css is this:
<table width="100%" height="54" border="0" bgcolor="red">
<tr>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
<td width="20%">text</td>
</tr>
</table>
So that my code is semantically correct I want to use divs to achieve the same effect.
<div class="job_wrapper">
<div class="info">
<div>01</div>
<div>Campaign 001</div>
<div>DEMO Client</div>
<div>128</div>
<div>449</div>
</div>
</div>
Problem is that the workaround for display:table-cell in IE involved using the float property which overrides the display value to block. hence I lose the vertical centering of text in a table cell.
Is there a workaround to display:table-cell in IE that still gives me the ability to center text vertically in IE?
Cheers
check out the style sheet from http://jogger.pl/404.
they have an interesting workaround in there.