I'm designing a wordpress page inside of the wordpress editor, and I can't figure out how to get the grey image placeholder to align to the top of the table cell. As long as the text in the left cell doesn't go below the grey image, everything is fine. But as soon as the text gets below the bottom of the image, the image pushes down. Here's the code:
<table border="1">
<tbody>
<tr>
<td style="vertical-align: top;">
<img class="alignleft size-full wp-image-71" alt="webi" src="#"
width="437" height="114" />
<p>
SOME TEXT
</p>
</td>
<td style="width: 355px;">
<img class="alignright size-full wp-image-61" alt="palvelut_kuvapaikka"
src="#"
align="top" width="355" height="355" />
</td>
</tr>
</tbody>
</table>
Just set the vertical-align: top property on the right td as well?
to align it to the top in a table you need to use in css: vertical-align: top
Related
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>
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 build a newsletter with table (I have to cause some emailclients ignore div boxes etc ).
The problem that I have is that I would like to have the text " Test test " on the same height beginning like the pic left to it. and the blue button should also be on the same height. I made a pic from the Photoshop layout how it should look like and on js fiddle so you see how it is now.
<tr style="background-color:#deeef4;">
<td width="250" cellpadding="0" colspan="2" valign="top" style="padding:15px 25px;">
<p style="display:inline;color:#00668a;">OBERTAUERN <span style="color:#a9a9a9;font-size:13px">Gültigkeit der Pauschale: 22.03. – 12.04.2014 & 19.04. – 04.05.2014</span>
</p>
<br>
<img src="http://www.awesom-media.de/linie.png">
</td>
<tr style="background-color:#deeef4;">
<td width="300" style="padding:10px 25px;display:inline;">
<img src="http://www.awesom-media.de/ab1.jpg">
</td>
<td width="400" style="text-align:left">
<p>Test Test</p>
<ul>
<li>7 Tage Aufenhthalt inkl. Frühstück</li>
<li>6-Tages-Skipass für die Skiregion Obertauern</li>
</ul><img src="http://www.awesom-media.de/button.png" width="345" height="35" border="0">
</td>
</tr>
</tr>
jsfiddle
I updated your JSFiddle: http://jsfiddle.net/sBaNL/1/
I did two things:
Remove the top margin from the <p> surrounding Test Text
Make the surrounding <td> to vertically align its contents to the top:
.
<td width="400" style="text-align:left; vertical-align: top;">
<p style="margin-top: 0px;">Test Test </p>
...
</td>
To avoid all such uncessary margin, padding etc to all elements, you do the following in the beginning of the css files
*:{margin:0px;padding:0px;...}
This will overright all the browser's default properties.
It is due to p default display:block property which takes some margin by default.
Change it to display:inline and you can also remove the margin-top
p{
display:inline;
margin-top : 0px
}
Js Fiddle Demo
for image button you can add the margin-top style="margin-top:15px"
I am looking for a way to align one object to the left, and one object in the center of a single table row. The object aligned to the center should be in the complete center of the table row, not of the space left after the first object.
Here are the relevant lines of code (at this stage it is messy- I only started today):
<tr align="center">
<img src="Logo.png" width="100px" height="100px" style="padding:5px" alt="This image cannot be displayed." align="left" style="max-width:100px"/>
<div align="center" style="width:100%"> <img src="Banner.png" style="padding:9px" alt="This image cannot be displayed." align="center" style="clear:both" /> </div>
</tr>
So how it currently appears, the first object (aligned left) appears left, right where I want it. The second object (aligned center), is aligned to the REMAINING space, not the total space of the table row, which is what I am aiming for.
If anyone knows how I could achieve this, it would be appreciated.
On html:
<table id="myid" border=1 style="width: 100px">
<tr>
<td> 1 </td>
<td> a </td>
</tr>
<tr>
<td> 2 </td>
<td> b </td>
</tr>
</table>
On JS (using jquery):
$("#myid").find("tr").each(function(){
tds = $(this).find("td");
tds.eq(0).attr("align","center");
tds.eq(1).attr("align","right");
});
Test it here:
JSFiddle
I am not a html programmer but I have to fix an urgent problem. Since this is a private project, I can't post the code here. But here is the obfuscated page source (Note: a href tag is created by Spring Security tag)
<td width="359">
<table style="margin-left:auto; margin-right:8px">
<tbody><tr>
<td>
<img src="/img/Login.gif" alt="Login" height="18" border="0" width="120">
<br>
<br>
<img src="/img/newAct.gif" alt="new account" height="18" border="0" width="120">
</td>
</tr>
</tbody></table>
</td>
Above html code creates a 1 pixel shadow right under the second image. Please see attached picture and red arrow pointing to 1 pixel line.
Thank you for your help in advance!
<img src="..." style="margin-top:0px;">