Here is what I have, the only CSS is styling for my tags, so there is no relevant CSS effecting this.
<tr>
<td colspan="2" valign="top"><span style="font-size:20px; color:#ed8f49">Fall Classes with</span><img src="REDACTED.png" height="90" width="482"></td>
</tr>
When I have only the TD things work fine, but as soon as I put that text in a span or try to make it h1 it aligns to the bottom, even if I add alignment attributes to the span as well.
Try:
<td colspan="2" style="vertical-align: top;">
The attribute valign is deprecated and should not be used.
You need align="top" or style="vertical-align:top on your image :)
Related
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 am working on Newsletter HTML and I can't give margin to center align the divs. How can I align the button into the center of the div. Here is the simple code
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td>
<div style="text-align:center;">
<a href="#" style="display:block; width:150px; text-decoration:none; font-weight:bold; color:#fff; background:#c72622; font-size:20px; border-radius:7px; -webkit-border-radius:7px; padding-top:10px; padding-bottom:10px;">
Buy Now
</a>
</div>
</td>
</tr>
</table>
Add align="center" to your containing table cell. This is the best way to center align in HTML email.
steer clear of all padding and margin, they are poorly / wrongly supported in a lot of clients. use lots of nested tables and <tr> <td height="1234" align="center/left/right"> instead. Avoid the <table align="center/left/right"> attribute wherever you can because outlook will generate extra whitespace. I use <table align="center"> for my wrapper tables.
For vertical alignment, use the valign attribute of your <td>s and <tr>s. Works best if another td in the row has an image with the height you'd like to vertical align to.
My problem is posted as "solved" here, but apparently I don't understand the solution (?). I have piles of legacy html that appears to be starting to fail in my browser, I dunno why, maybe because of "unsupported" attributes? (Extremely frustrating, by the way. Why eliminate these much simpler attributes that worked fine for decades? I don't give a frickin' rip what anyone thinks of my coding style, as long as it WORKS.)
In particular, I use and the valign doesn't work.
So I tried the following, with never a success:
<td align=center vertical-align:top>
<td text-align:center; vertical-align:top>
<td text-align:center; vertical-align:text-top>
<td vertical-align:text-top>
Now I'm only more frustrated. Any suggestions?
The vertical-align:top is not supposed to occur in the td tag itself. You have to put it in a style="" line or in the CSS rules for td.
Using style="":
<td align="center" style="vertical-align:top">
<td style="text-align:center; vertical-align:top">
<td style="text-align:center; vertical-align:text-top">
<td style="vertical-align:text-top">
For the CSS method, you will have to give a seperate class or id to each td in order for their styles to be different.
You can use valign= top not valign: top or vertical-align: top in your html markup and use vertical-align: top; in css
In your html you could do this
<td align=center valign=top>
In your css stylesheet
td{vertical-align: top;}
And in your inline-style
<td align=center style="vertical-align: top;">
Insted vertical-align:top use valign="top".
Here is your the code:
<td align="center" valign="top">
Note: Never use : in the HTML attributes so instead of using valign:top you should use valign="top"
I want to align a table data at the top. Example.
data-- I want to align this at top
text.... - this contains a lot of text that makes the first table data at the center
Like this:
klasdjlkasjdlsakjdlk
kldjaslkdjsadkjasldj
dlasjidlaskdjlaksjdl
asdasd ajsdlkasjdlaskjdlkas
laksjdlaksdjsalkdjak
adlksjdlasjdkasjdlka
I want it to be like this.
asdasd klasdjlkasjdlsakjdlk
kldjaslkdjsadkjasldj
dlasjidlaskdjlaksjdl
ajsdlkasjdlaskjdlkas
laksjdlaksdjsalkdjak
adlksjdlasjdkasjdlka
Any ideas?
Define in your css td vertical-align :top and text-align :left
td{vertical-align:top;text-align:left;}
without css
<td valign="top" align="left"> // here your data </td>
Is this just a standard HTML table?
<td valign="top">text</td>
Here is how to do it without CSS:
<table width="100" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
asdasd
</td>
<td>
klasdjlkasjdlsakjdlk
kldjaslkdjsadkjasldj
dlasjidlaskdjlaksjdl
ajsdlkasjdlaskjdlkas
laksjdlaksdjsalkdjak
adlksjdlasjdkasjdlka
</td>
</tr>
</table>
It is best to do this with CSS, rather than inline as you'll have more flexibility and your code will be leaner and easier to read.
If you only want to do it for particular cells, then consider using classes.
For inline (not recommended), use the following:
<td valign="top">...</td>
To use css, use the following in your stylesheet:
td { vertical-align: top; }
I have a table column like this, where I want to align an image and a text.
The text must be in the middle of the image.
<td><img height='50px' src='blabla'>Hello</td>
The above aligns the text at the bottom of the image.
I have also tried adding vertical-align:middle to the td style property, without luck.
I have also tried adding a <font> and styling that to vertical-align:middle without luck.
I know of one way, and that is adding another table column and having the text and image in separate columns, then it would be possible to align the text vertically in the middle, but I am trying to avoid this.
Any ideas?
You have to add the vertical-align to the img, not the td:
<td>
<img style="vertical-align: middle;" src="test.jpg"/>
test
</td>
To apply the style to all images in tds, use an external CSS:
td img {
vertical-align: middle;
}
Have you tried using valign="middle"
<td valign="middle"><img height='50px' src='blabla'>Hello</td>
Also, no need to add "px" to the height of the img.
Here you go:
<table>
<tr>
<td><img height='50' width='50' src='http://www.google.com/images/logos/ps_logo2.png' style='vertical-align:middle;">Hello</td>
</tr>
</table>
http://jsfiddle.net/FDRy8/
use vertical-align:middle on the image and not the td
td img{
vertical-align:middle;
}
working example at http://www.jsfiddle.net/gaby/pPVtH/
Add vertical-align to the row as well, not just the cell.