I have a image tag (as below) in my table, when view in IE there is a gap between the rows but not happening in Chrome.
My HTML code is as below
<table id="Table_01" width="1282" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img id="login_01" src="/image/login_01.png?v=1" width="1282" height="156" alt="" usemap="#mapLogo" border="0" />
</td>
</tr>
Upon testing, it seems like the gap was due to my code structure. By changing my Row tag as below, where the TD and IMG and /TD under single line, IE is showing properly.
<table id="Table_01" width="1282" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img id="login_01" src="/image/login_01.png?v=1" width="1282" height="156" alt="" usemap="#mapLogo" border="0" /></td>
</tr>
No more gap in IE and Chrome.. Nice job Microsoft!
Related
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/
I am having a outlook html email nightmare here.. Basically there is one table and one image on the top and content on the bottom.:
The image is always substracting 1px so it is never 100% with the table. Anyone knows a solution?
<table cellpadding="0" cellspacing="0" style=
"margin-left:2px;padding:0px; width:846px; background-color:#000">
<tr>
<td>
<div style="font-size: 0px;"><img border="0" src=
"img/header1.jpg" style=
"display:block;align:bottom;border:none;padding:0; width:846px;"></div>
</td>
</tr>
<tr>
<td>Blah.. Content</td>
</tr>
</table>
I'm pretty sure this is from outlook's issue with border-collapse. Try this:
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="left" valign="top">
<img src="http://placekitten.com/g/640/300" width="640" height="300" alt="" style="display:block;" border="0" />
</td>
</tr>
</table>
Use the img tag for images.
Outlook uses Word for rendering HTML markup. You can read more about that in the following series of articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
We have run into a problem with emails accessed through gmail using browsers on iOS only recently. We have a call to action button that we would like to center on the email. We have previously been able to do this using a table within a table and an align=center, but now it just doesn't work.Here's an example of the code I'm talking about:
<table width="551" height="51" border="1" cellpadding="0" cellspacing="0" class="mobile- content-size" style="min-width:551px;">
<tr>
<td height="51" style="text-align:center;" class="cta-one-row">
<!-- start button -->
<table border="0" bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="cta-show-them-table" style="color:#6a797b; text-decoration:none; background-color:#3b3b3b; border-radius:3px; width:230px;" height="50">
<tr>
<td align="center" valign="middle" height="50" style="color:#FFFFFF;" class="cta-show-them">CALL TO ACTION
</td>
</tr>
</table>
<!-- end button -->
</td>
</tr>
</table>
Here's a link of what it looks like rendered on emailonacid.
Has anyone else run into this sort of problem or have a fix? It's rather important that these buttons are centered!Thanks!
Having a little trouble with a HTML email on older versions of IOS in that tables will not align next to eachother. I am creating a responsive email layout for a client and have a need to use align="left" to float tables. ( sample code below )
I have tested on every client i can think of and it is only old IOS versions with this issue.
Sample code: ( this isnt the actual code i am using but same princible )
<table cellspacing="0" cellpadding="0" width="600" border="0" class="full-width">
<tr>
<td width="600" class="full-width">
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 1</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 2</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 3</td>
</tr>
</table>
</td>
</tr>
</table>
Here is an image of whats happening with IOS 5 (Incorrect) and IOS 6 (correct):
Image of IOS 5 and 6 respectively with table included
Any assistance would be greatly appreciated. If you need further info let me know.
You have align="200" on your table cells - not sure if it is just a typo in the sample code, but that could possibly be messing things up. Otherwise, it looks good to me, maybe try adding float:left; to the aligned tables as a fallback to see if it helps.
Also set the width of your table cells to 100% or 200 to make sure they are behaving as expected and check that your full-width class or other css isn't doing anything funky.
Right, after hours of playing around with the code the answer is... :
Make sure the container TD also as align="left" so the code would become:
<table cellspacing="0" cellpadding="0" width="600" border="0" class="full-width">
<tr>
<td width="600" class="full-width" align="left">
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 1</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 2</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="200" align="left">
<tr>
<td width="200">Some Text Here 3</td>
</tr>
</table>
</td>
</tr>
I have a table defined as
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width="600" border="0" cellspacing="0" cellpadding="25">
<tr>
<td width="210">Content 1 with grey background</td>
<td width="390">COntent 2 with white background</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="600" colspan="2"><img src="image.jpg" width="600"></td>
</tr>
</table>
Now this image.jpg has 210 px as grey background and 390px as white background in order to align with the above table cells.
However, it shows up as non aligned in outlook 2007. It shows up fine in others.
Any suggestions?
You're lucky it shows at all. The background property is loosely if at all supported by most email clients. I would suggest against using it or using just an <img> tag instead.
Here's more info on what outlook 2007 supports:
http://www.email-standards.org/clients/microsoft-outlook-2007/