I'm not primarily an html programmer, but I'm using HTML to format the display of one of my screens in iPhone. So what I have is something that is supposed to be a paragraph like display with an embedded image in the top right, so that while next to the image, the text wraps and doesn't overlap, but will continue to the right once it is below the image.
I hen need a table of comments posted below that, so knowing that my view is 728 pixels wide, I did
<table width="768">
When I do this code in my smaller (240 px wide) view, the comments appear below the image, but in the larger view, it doesn't. Anyone know why this might happen?
Here's a sample of the html I'm using:
<body bgcolor="#FFFFFF">
<p>
<img src="http://www.smspal.com/iPhonePhoto.jpg" width="320" height="480" align="right">
Tweet
</p>
<table width="728" cellpadding="3" cellspacing="0" >
<tr>
<td>
<b>
<font size="2">Parent1 Parent1</font>
</b>
</td>
<td>
<p align="right"><font size="1">Tue. May 3, 2011 at 3:47 PM</font></p>
</td>
</tr>
<tr>
<td colspan="2">
<p align="left">
<font size="2">Add a comment</font>
</p>
</td>
</tr>
</table>
<hr noshade size="1" />
</body>
Your giving an absolute pixel size on your table to match the pixel width of a specific screen. The size is absolute so on a smaller screen size nothing more can be displayed to the left or right of it so it has nowhere to go but down.
Try using a percentage width as that is a relative size that will conform to many different screen sizes.
Why don't you just put the image inside the table? You can use the colspan attribute to keep the image in the right corner.
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.
Outlook (2013) seems to be display my HTML emails substantially larger than any other client.
Relatively speaking, everything appears to be the correct proportions. But when compared to the email rendered in any browser or other client, the Outlook one looks HUGE.
Is anyone else getting this? Is it just my Outlook settings somehow or is there something I should have in my HTML to compensate?
Outlook on the left, Chrome GMail on the right, cut from the same screenshot.
The markup is nothing special:
<table cellspacing="0" cellpadding="0" style="width:100%;border-collapse:collapse;mso-table-layout-alt:fixed;">
<tr>
<td></td>
<td style="display:block!important;max-width:520px!important;margin:0 auto!important;padding:0 10px 40px;" style="width:520px;padding:0 10px 40px;">
<div style="max-width:520px;margin:0 auto;display:block;width:auto;">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<p style="font:700 20px/28px Arial;margin:22px 0 0;padding:0;color:#000000;">This is an H1 element</p>
<p style="font:100 15px/23px Arial;margin:16px 0 0;padding:0;color:#4d4e53;">This is a paragraph element with text about us and how we should put a period in here somewhere, but I'm a developer not a content writer so that's on you. The color of the paragraphs is #4d4e53 while the Header (H1-H4) are black.</p>
<p style="font:700 18px/26px Arial;margin:16px 0 0;padding:0;color:#000000;">This is an H2 element</p>
<p style="font:100 15px/23px Arial;margin:16px 0 0;padding:0;color:#4d4e53;">This is another paragraph element. This is a link to somewhere and <span style="white-space:nowrap;">614-123-4567</span> is how a phone number is formatted.</p>
</td>
</tr>
</table>
</div>
</td>
<td></td>
</tr>
</table>
With high resolution screens Outlook zoom level can automatically be set to 120 dpi. Glad to know everything is rendering in correct proportions, but in case they don't, here is a solution you can use,
https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013
Basically you add the vml code at the top and set width and height of elements inside style tags.
The structure of my table is
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
<h1 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:16pt;font-weight:100; margin-bottom:10px;">Simpilfied IT management for any enterprise</h1>
<h2 style="color:#FFF;font-family:Segoe,Tahoma,Verdana,Arial,sans-serif;font-size:14pt;font-weight:100;">Gain control over any hybrid cloud with our cost-effective all-in-one cloud solution</h2>
</td>
</tr>
</table>
aand I want the image inside the first cell to have the same height as the second cell (so that the image blends into the background color of it. I know there are alternative ways of doing this, but I'm constrained since this is an HTML email for Outlook).
Right now the right cell is always having a height of 196px, even if I strip its contents to nothing:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="404">
<img src="assets/Hero-Image2.png" width="404" height="192" style="width:404px;height:192px;border:0;margin:0;outline:0;"/>
</td>
<td width="396" bgcolor="#00188F">
</td>
</tr>
</table>
The right cell is always 196px and this causes the left cell to be the same height. Makes no sense.
If you add a display: block to the style of your image it will be fixed.
<img src="//placehold.it/404x192" style="width:404px; height:192px; display: block" />
The first answer should help you to understand why
EDIT: Actually, you dont need nothing but the display block and the image sizes.
What are the dimensions of your image?
I don't think HTML is "smart" enough to stretch your image to fit to your exact request.
Maybe you should try resizing your image in paint/photoshop to a dimension that has the same height/width ratio as 404:192 and see if that helps.
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>
So I have to pages which are the same. Each are displaying some articles in a table layout. The table layout and CSS are the same. However, the one page is listing hundreds of archive articles which after it gets about 80% loaded, the table cell that contains all the text shrinks to about 30% of the actual row width.
However, there is nothing different on the layout, properties, CSS. The row containing the cell that is shrinking is the right width. The odd thing is even if I put a "width="100%" on the cell in question, it still is short of the row's width by about 20%.
Any thoughts, suggestions?
NOTE: I removed the text and just left the actual layout and cell/table/row properties.
Correct page:
<tr>
<td>
<table width="100%" cellpadding="4">
<tbody><tr>
<td width="100%" valign="top" align="left">
<a class="docnavigation" href="removed link ">
<strong></strong>
</a>
<br>
<span class="steelNewsArticleDate"> </span> - <span class="Normal">
<br>
</span>
</td>
</tr>
</tbody>
</table>
Problem Page:
<tr>
<td>
<table width="100%" cellpadding="4">
<tbody><tr>
<td width="100%" valign="top" align="left">
<a href="removed link" class="docnavigation">
<strong> </strong>
</a>
<br>
<span class="steelNewsArticleDate"></span> - <span class="Normal">
<br>
</span>
</td>
</tr>
</tbody>
</table>
Look into the width of the <td> that contains the table. Setting the width to 100% only tells the table to expand to 100% of its container's width.
The problem had to do with a missing tag from a Wysiwyg editor cleaning up some bad HTML incorrectly. So it was forcing what would have been a parent row into a child table row.