How to stop table from adjusting width - html

I have a table set up for an email form but when I view it in Outlook the column gets pushed out and it doesn't align properly.
I want the text the sit in the column next to the image but It get's pushed over to the right when I view it in Outlook.
I've tried adding the width to the tables properties but it still plays up.
Obviously it views fine in JSFiddle but I'm hoping someone knows where the problem lies.
http://jsfiddle.net/KmqLg/
<table width="500px" border="1">
<tr>
<th height="40" colspan="2" align="left" bgcolor="#FFFFFF" scope="row">
<h1><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-arrow-right-icon.png" width="16" height="30" />NAME</h1>
</th>
</tr>
<tr>
<th height="70" width="70" align="left" bgcolor="#FFFFFF" scope="row">
<img src="http://www.nasa.gov/images/content/617883main_VIIRS_4Jan2012.small.jpg"
width="70" height="70" />
</th>
<th width="430" height="41" align="left" bgcolor="#FFFFFF" scope="row"><strong>Text Text Text Text Text Text Text Text Text Text Text Text</strong>
</th>
</tr>
</table>
This is what Outlook is doing to my table:
As you can see, the text doesn't sit to the left of the cell.

Try to remove px from width property in table and th tags like this
<table width="500" border="1">
For Outlook 2007 you could try to add inline css too
<th height="40" style="width:40px;" colspan="2" align="left" bgcolor="#FFFFFF" scope="row">
CSS SUPPORT
Try this:
<table width="500" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="40" width="498" bgcolor="#FFFFFF" scope="row">
<h1><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-arrow-right-icon.png" width="16" height="30" />
NAME</h1>
</td>
</tr>
<tr>
<td>
<table border="0" width="498" cellspacing="0" cellpadding="0">
<tr>
<td height="70" width="70" bgcolor="#FFFFFF" scope="row">
<img src="http://www.nasa.gov/images/content/617883main_VIIRS_4Jan2012.small.jpg" width="70" height="70" style="display: block;" />
</td>
<td width="428" height="70" bgcolor="#FFFFFF" scope="row"><strong>Text Text Text Text Text Text Text Text Text Text Text Text</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>

Related

HTML is ignoring valign

So I am building the final page of an online exhibit I am working on. The final page uses the exact same format as an earlier page in the exhibit (with an image to the left and a paragraph to the right of the image) so I just copy/pasted all the code and changed URLs, text, and dimensions of images and td elements as I needed to. I have changed nothing to do with the alignment of the various elements on the page, but now I have an element that is basically ignoring td valign="top" and appears to be aligned to center instead. I've done a line by line comparison of the html of the new page with the original but I can't find anything that should have changed it. Basically the text part of the page (title of page and body of page) should start on the same line as the top of the image, but instead it's starting in the center after a huge amount of white space.
Here's the particular table in question with the text and full URLs removed to make it a bit shorter:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="*image*" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
There is a " in front of valign, so it's not reading the attribute.
<td width="500" "valign="top"><div align="center">
The full code should be:
<table width="917" border="0"></br>
<tr>
<td width="400" valign="top">
<table width="10" border="1" align="center" bordercolor="#8AC3C9">
<tr>
<td width="184" bordercolor="#8AC3C9"><div align="center"><img src="http://placehold.it/400x267" alt="image" width="400" height="267" hspace="1" vspace="1" border="0" align="middle"></div></td>
</tr>
<tr>
<td bordercolor="#8AC3C9" bgcolor="#8AC3C9"><div align="center" class="style2">*Image*</td>
</tr>
</table>
</div>
</td>
<td width="500" "valign="top"><div align="center"><font size="+2" face="Georgia"><b>*Title of page*</b></font></div></br>
<div align="justify"><font face="Georgia">*Body of page*
</div></td>
</tr>
Here's a working codepen: http://codepen.io/vic3685/full/vyKmwg/

html email rounded button with images

I am having trouble making a rounded button with images.. the button displays fine in a browser but inside an email client (this includes yahoo and gmail) the button breaks..
here is the HTML table code that i am using:
<table width="144" cellpadding="0" cellspacing="0" border="0" style="background-color: #9C084A">
<tr>
<td width="12"><img src="http://thehotdeal.net/clients/1/padma/1.gif" width="12" height="12" border="0" alt="...">
</td>
<td width="130"></td>
<td width="12">
<img src="http://thehotdeal.net/clients/1/padma/2.gif" width="12" height="12" border="0" alt="...">
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0" border="0"></td>
<td align="center">
<p style="padding: 0"> <span mc:edit="date" style="color: #ffffff;">2012 - $25</span></p>
</td>
<td cellpadding="0" cellspacing="0" border="0"></td>
</tr>
<tr>
<td>
<img src="http://thehotdeal.net/clients/1/padma/3.gif" width="12" height="12" border="0" alt="...">
</td>
<td cellpadding="0" cellspacing="0" border="0"></td>
<td>
<img src="http://thehotdeal.net/clients/1/padma/4.gif" width="12" height="12" border="0" alt="...">
</td>
</tr>
</table>
Here is how this looks.. notice a line below it..!
There are a few elements could be altered to make this render better cross client:
display:block; on your images
put your background color on each td individually using bgcolor="#9C084A"
explicitly set width and height on each td
use valign on your images if need be
Here is the jsfiddle with these alterations - http://jsfiddle.net/X5QTR/

Table row on top of columns

The text I have on top in the table row is somehow affected by the second column below it..cant seem to have it take up the entire width of the table.
http://jsfiddle.net/PmWBw/2/
Sorry I know I am the only one still working in tables. HTML emails still exist.
<table width="800" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
<table>
<tr style="width: 800px;">TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</tr>
</table>
<td valign="top" width="260" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
</td>
</tr>
</table>
</td>
<td valign="top" width="260" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
</td>
</tr>
</table>
</td>
</table>
For starters, your first row consists of a td inside a tr that's inside ANOTHER td. If nothing else, that should probably be addressed.
Also, a bit unrelated to you original question, but it seems a bit redundant to have tables inside of your cells, when I'm not seeing any real benefit or function gained by the added code. You're styling your inner tables with the same things you can be applying to either the td or the image itself. At least in this particular application.
Just a thought.
UPDATED:
<table width="600" class="bodyContent" style="border: 1px solid #b8b7b7;margin-bottom: 20px;">
<tr>
<td colspan="2">
<table>
<tr style="width: 600px;">
<td>TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT TEST TEXT</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" width="260" class="leftColumnContent">
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_left.png" mc:label="image" mc:edit="tiwc300_image00" />
</td>
</tr>
</table>
</td>
<td valign="top" width="260" class="rightColumnContent">
<!-- // Begin Module: Top Image with Content \\ -->
<table border="0" cellpadding="20" cellspacing="0" width="100%">
<tr mc:repeatable>
<td valign="top">
<img src="http://www.homeplan.com/newsletter/images/top_right.png" mc:label="image" mc:edit="tiwc300_image01" />
</td>
</tr>
</table>
</td>
</tr>
</table>
First of all, you can not have the code looking like this:<td><tr><td>asdf</td></tr></td>. It the <tr> needs to be wrapped by <table>.

HTML Email and Lotus Notes - Content is repeating

I have an HTML Email campaign that I have tested with EmailOnAcid.com. The email displays fine in almost all clients except Lotus Notes v6.5, v7, v8 :(
In Lotus Notes 6.5 & 7, at the end of the email, Lotus seems to repeat the email from the start again, so it looks like the same email has been put in twice, but it hasn't.
Is there a mimimum height for HTML emails in Lotus? (height of my email is around 474px).
I have specified height on all image elements and on tags.
In Lotus Notes 8, there is a minor problem; the lower part of the footer image repeats itself?
Does anyone have ideas as to what is causing these problems??
Thanks in advance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Email</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="650" align="center">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="650"><img src="http://www.website.com/images/hdr.jpg" width="650" height="36" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="137" height="53"><img src="http://www.website.com/images/hdr_left.gif" width="137" height="53" border="0" alt="" style="display:block;margin:0;"></td>
<td width="513" height="53"><img src="http://www.website.com/images/hdr_right.jpg" width="513" height="53" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="650"><img src="http://www.website.com/images/spacer_top.jpg" width="650" height="28" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="397" valign="top"><img src="http://www.website.com/images/gold_main.jpg" width="397" height="271" border="0" alt="" style="display:block;margin:0;"></td>
<td width="240" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="240">
<tr>
<td><img src="http://www.website.com/images/title_text.gif" width="240" height="105" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
<tr>
<td><img src="http://www.website.com/images/spacer_white.gif" width="240" height="12" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
<tr>
<td><font style="font-family:verdana; font-size:10px;" color="#808180"><b>TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE</b></font></td>
</tr>
<tr>
<td><img src="http://www.website.com/images/spacer_white.gif" width="240" height="12" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
<tr>
<td><font style="font-family:verdana; font-size:10px;" color="#808180"><b>TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE</b></font></td>
</tr>
</table>
</td>
<td width="13"><img src="http://www.website.com/images/spacer_white.gif" width="13" height="2" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650" height="12"> </td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650" height="85">
<tr>
<td width="397" height="85"><img src="http://www.website.com/images/ftr_left_cmras.jpg" width="397" height="85" border="0" alt="" style="display:block;margin:0;"></td>
<td width="253" height="85"><img src="http://www.website.com/images/ftr_right_lnk.gif" width="253" height="85" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It appears this might be an issue with the EmailsOnAcid testing system.

Table HTML layout

I am trying to setup tables so the result outcomes like this:
Code:
<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868 ;">
<td align="center" valign="top" width="240" height="25" style="border:1px #FFF solid;">About me</td>
</tr>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</tr>
</table>
Can't get it to work like how I wanted.
The problem I get with my code is that "About me" only covers for the first cell and not the other.
You need colspan="2" in the <td> of the first row so that it spans two columns.
Semantically, you would like to use <th> (table heading) instead of <td> as well.
See also:
HTML table tutorial
This should do the trick:
<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<tr style="background: #686868 ;">
<td align="center" valign="top" colspan="2" width="240" height="25" style="border:1px #FFF solid;" >
About me
</td>
</tr>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</td>
</tr>
</table>
Note the colspan attribute on the first <td> tag - this will ensure that it spans the width of two columns.
Additionally, you might also like to expand your table to contain the thead and tbody elements, providing separation between the different sections of content:
<table width="60%" cellpadding="0" cellspacing="1" id="theBoxer">
<thead>
<tr style="background: #686868 ;">
<th align="center" valign="top" colspan="2" width="240" height="25" style="border:1px #FFF solid;" >
About me
</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left" valign="top" width="250" height="112" style="">
Points:<br>
Lalala: <br>
Lalala: <br>
</td>
<td align="left" valign="top" width="250" height="112" style="">
Lalala: <br>
Lalala:
</td>
</tr>
</tbody>
</table>