I'm trying to vertically align text and an image element inside a table cell. I am using align="absmiddle" and it works in IE, but not in Chrome.
How can I vertically align the text and image in the middle on both Chrome and IE?
Here's the code:
<tr>
<td height="17" bgcolor="#550000">
<div align="center">
<strong><font color="#000000" size="3">Text</font></strong>
<img src="Image.jpg" alt="US Image" width="30" height="15" border="0" align="absmiddle">
</div>
</td>
</tr>
Demo: http://jsfiddle.net/8xTta/
using absmiddle is not only a common HTML mistake, but is also considered bad practice when used this way, i.e. you should always separate styles from content, and use external stylesheets instead of inline styles embedded in the markup.
to solve this and achieve cross browser compatibility, replace the align:absmiddle; rule and use vertical-align: middle; instead.
here's a nice reference on vertical alignment that may be of interest to you.
Related
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.
I need to position this form into place on top of the image in sidebar of my blog posts page:
http://insightcxo.com/category/blog/
Right now the image and the form are in the same container but are below one another.
Your markup has several issues in it. This is what I'm seeing in the provided link:
<td align="center" valign="top">
<a href="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png">
<img class="aligncenter size-full wp-image-1035" src="http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png" alt="blog form background" width="370" height="400">
</a>
<p></p>
<table class="bodyContainer webFormBodyContainer" width="100%" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF">
<!-- form is in here -->
</table>
</td>
First, you've got an <a> tag with an <img> in it, which has a height of 400px. So that's pushing your <table> (which includes your <form>) down.
What you want to do is only have that image as a background image, and not a background of an <a> tag. That way, you can nest your <form> inside the container with the background image.
Something along the lines of this:
<div style="background: url('http://insightcxo.com/wp-content/uploads/2015/08/blog-form-background.png');">
<form></form>
</div>
Although a few extra pointers:
Don't use <table> tags for layout purposes. Only use them for actual data tables.
Avoid inline styles (I've done that above just to show you where the background image style should go. Instead, set a class, like .form-container, and apply your styles in a separate CSS file.
Avoid having extra markup. What's that empty <p> tag doing there?
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 am working on e-mail template. Code is something like this :
<table width="702" cellpadding="0" cellspacing="0" align="center" id="template">
<tr>
<td align="left" valign="top">
<img src="/email/new/top_bar.png" width="702" height="11" alt="" border="0">
<img src="/email/new/bottom_bar.png" width="702" height="11" alt="" border="0">
</td>
</tr>
</table>
I always get vertical whitespace between these two images.
I tried using valign, vspace but no luck. How to get rid of it?
You get whitespace because the images are laid out inline (between two rows of lines there is spacing). You can either lay them out as block elements....
img { display:block; }
.. or you can use the vertical-align property to define a different vertical align which should remove the spacing...
img { vertical-align:top; }
http://vidasp.net/media/CSS-vertical-align.gif
BTW, please stop using deprecated attributes (cellpadding, cellspacing, align, border). For each of those attributes there is a CSS alternative which should be used. Also, use some CSS reset code (like Yahoo CSS Reset)...
Strange: This shouldn't be.
Maybe the E-Mail client interprets the line break in between the <img>s as white space.
Try setting them directly next to each other: <img src...><img src...
Your lines are high enough to accommodate text in the default font, which is higher than your 11 pixel images, hence the gap.
You need to make the lines smaller; the simplest way for your example is to shrink the font:
<td style="font-size: 1px;" align="left" valign="top">
Tested in IE 8, Firefox 3.6 and Chrome 6.
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.