I have designed an app and applied inline style, such image and text appear side by side. I see there is an extra space between image and text. I also see "Demo Analysis Application" is shown as "Demo Analysis" and in next line "Application". I want image and next to it "Demo Analysis Application".
I have shown what I tried below.I have marked what I don't want in the picture.
<table class="mainTable" style="margin:auto;">
<tr>
<td colspan="1" style="height:65px;width:200px;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<img src="images/test.jpg" alt="Logo" width="200px" height="100px">
</td>
<td colspan="1" style="height:65px;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<p style="height:65px;width:200px;font-weight:bold;font-size:26px;">Demo Analysis Application</p>
</td>
</tr>
</table>
<table class="mainTable" style="margin:auto;">
<tr>
<td colspan="1" style="height:65px;width:auto;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<img src="https://cdn.pixabay.com/photo/2017/04/05/11/56/image-in-the-image-2204798_960_720.jpg" alt="ANSYS Logo" width="200px" height="100px">
</td>
<td colspan="1" style="height:65px;padding:0px; padding-top:30px; padding-bottom:20px; border:0px; margin:0px;">
<p style="height:65px;width:200px;font-weight:bold;font-size:26px;">Demo Analysis Application</p>
</td>
</tr>
</table>
Please check this code.I think this is what you want.
Related
Let me start by saying that I haven't built an HTML email in a long time; I've been spoiled by CSS for far too long, so going back to building things with tables is incredibly frustrating. I am having trouble getting two rows to sit flush against each other; there is a gap that I can't eliminate, no matter what I've tried. Scouring other posts on S.O. only yields solutions I've already tried and that have not worked. About 40% of the intended audience is viewing emails on Outlook, meaning CSS support is incredibly limited. Things I've tried:
border-collapse:collapse (which I already put in place by default from the start)
setting margin: 0 (just about everywhere)
cellspacing and cellpadding to zero (which I already did by default when building the tables).
display:block and display:inline-block (not really supported by Outlook, but didn't solve my problem anyway).
Here are my code snippets (ignore any CSS classes; again there is not yet any embedded CSS, those are just placeholders at this point. Any embedded CSS will primarily be to handle email client-specific issues.)
<!--2 Column Layout : BEGIN-->
<tr>
<td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
</td>
</tr>
</table>
</td>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2 Column Layout : END-->
<!--2nd Hero Image : BEGIN-->
<tr>
<td class="full-width-image">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
</td>
</tr>
<!--Hero Image : END-->
The small gap at the bottom of the row is visible if you look closely. It is 4px in height.
I t looks good; not bad. Also, you don't need to add all the css details to each row and column; just add: or or ; and then in your css sheet (If you don't have it then just create on) add td.Whatever-you-decide-to-name-it or tr.Whatever-you-decide-to-name-it or table.Whatever-you-decide-to-name-it.
Hope this helps!!!
Since your img is not containing a width (even auto), initialize it as a block element.Since you have mentioned that block is not supported in your case I added display:table for your img. I added the working snippet with this answer.
img {
display: table;
}
<!--2 Column Layout : BEGIN-->
<tr>
<td align="center" valign="top" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/monkey_wrench_zpstk6rgf3j.png" width="300" alt="Monkey Wrench" border="0" class="fluid">
</td>
</tr>
</table>
</td>
<td class="stack-column-center" style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<table cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; border:0px; border-spacing:0px;">
<tr>
<td style="text-align: center; padding:0px; border-width:0px; margin:0px;">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/auto_parts_zpsf1bs9tgv.png" width="300" alt="Auto Parts" border="0" class="fluid">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--2 Column Layout : END-->
<!--2nd Hero Image : BEGIN-->
<tr>
<td class="full-width-image">
<img src="http://i1024.photobucket.com/albums/y303/aadBresco/sliced-bread_zpsxt8z6pjt.png" width="600" alt="Sliced Bread" border="0" align="center" style="width: 100%; max-width: 600px; height: auto;">
</td>
</tr>
<!--Hero Image : END-->
Since display:block wasn't a solution, I tried removing the <!doctype html> declaration and that fixed the issue. Normally I don't think this would be acceptable, but to the best of my knowledge - and after testing - it does not have any negative impact for HTML email.
I am currently developing a template email and I'have developed this :
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;"></td>
<td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;"></td>
</tr>
</table>
But i would like the dynamic percentage Indicated in the center of the progress bar.
do you have a solution to make it compatible with the email client that are quite capricious ?
Thanks
It's tricky to exactly centre text over that progress bar, because you can't really put anything on top of that table - position:absolute; won't work on most email clients.
However, you could try something like:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td bgcolor="#f83f83" style="width:50%; background-color:#f83f83; float:left; height:15px;text-align:right;">5</td>
<td bgcolor="#cccccc" style="width:50%; background-color:#cccccc; float:left; height:15px;text-align:left;">0%</td>
</tr>
</table>
This would mean that the percentage is always over the current location of the progress bar, for example:
<table style="border:0;" cellpadding="0" cellspacing="0" width="250">
<tr>
<td bgcolor="#f83f83" style="width:35%; background-color:#f83f83; float:left; height:15px;text-align:right;">3</td>
<td bgcolor="#cccccc" style="width:65%; background-color:#cccccc; float:left; height:15px;text-align:left;">5%</td>
</tr>
</table>
In developing html email newsletters, I often use a structure similar to the following:
<table width="244" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffcc">
<tr>
<td>
<table border="0" align="left">
<tbody>
<tr>
<td bgcolor="#FFCCCC">text in the table cell.<br>and another line of text.<br>and a third line.</td>
</tr>
</tbody>
</table>
Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</td>
</tr>
When viewed in a browser, the result looks like this:
but when rendered by Outlook 2013, the left-most text in the main (yellow) table is cut-off:
Is there an explanation or a work-around for this?
(I would typically put an image, instead of text, in the inner (pink) table. This allows a design where the main (yellow) text seems to flow around the image. Whether image or text, the result is the same. The text in the main (yellow) table is truncated as seen here.)
Try to set a align left on the heading table, in my code this will work in all clients.
Tested in litmus for all clients:
<table cellspacing="0" cellpadding="0" width="560" align="left" border="0">
<tbody>
<tr>
<td align="left">
<table cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<!-- spacer for the top of the image -->
<td align="left" colspan="2">
<img src="spacer.gif" height="5" alt="spacer" style="display:block; margin:0px; border:0px;" align="left" />
</td>
</tr>
<tr>
<!-- the image or text -->
<td align="left">
<img src="imagesrc" alt="imagealt" style="display:block; margin:0px; border:0px;" />
</td>
<!-- spacer for the right of the image -->
<td align="left">
<img src="spacer.gif" width="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
</td>
</tr>
<tr>
<!-- spacer for the bottom of the image -->
<td colspan="2" align="left">
<img src="spacer.gif" height="11" alt="spacer" style="display:block; margin:0px; border:0px;" />
</td>
</tr>
</tbody>
</table>
<!-- here your tekst -->
<div style="margin:0px; padding:0px; mso-line-height-rule: exactly; color:#000000; font-family:Verdana, Arial; font-size:12px; line-height:20px; display:block;">Hello. This is sample text. This is another sentence. Hello. This is sample text.</div>
</td>
</tr>
</tbody>
</table>
Sometimes the accepted solution (adding align= "left" to heading/parent tables) does not work (with multiple nested tables in my case):
Adding mso-table-rspace to the left aligned table did work:
<table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:7pt;">
I am not sure what is the problem with Outlook 2013, but you can try to achieve same layout with div structure
HTML:
<div class="outer">
<div class="first">text in the table cell.<br>and another line of text.<br>and a third line.</div>
<div class="second">Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence. Hello. This is sample text. This is another sentence.</div>
</div>
CSS:
.outer {
width : 50%;
height : 50%;
background-color: green;
}
.first {
background-color: red;
float : left;
}
.second {
background-color: yellow;
}
Demo Link
I am trying to place an iframe in an area that depicts rounded borders. In an effort to do this, I'm using an HTML table. My content displays as I want, but there is a white bar above and below the iframe. I'm not sure why this is happening. Here is my code:
<table border="0" cellpadding="0" cellspacing="0" style="width:640px;">
<tr>
<td style="height:12px; width:12px; vertical-align:top; background-color:white; font-size:6pt;"><img alt="" src="c1.png" style="width:12px; height:12px; vertical-align:top;" /></td>
<td class="height:12px; vertical-align:top;"><div style="background-color:silver; height:12x;"> </div></td>
<td style="height:12px; width:12px; vertical-align:top; background-color:white; font-size:8pt;"><img alt="" src="c2.png" style="width:12px; height:12px; vertical-align:top;" /></td>
</tr>
<tr>
<td style="background-color:silver; font-size:6pt;"> </td>
<td style="background-color:silver; font-size:6pt;"><iframe id="myIframe" frameborder="0" style="border:0px; overflow:visible; width:100%;" width="100%" src="/Test.aspx" scrolling="no"></iframe></td>
<td style="background-color:silver; font-size:6pt;"> </td>
</tr>
<tr>
<td style="background-color:silver; font-size:6pt;"><img alt="" src="c3.png"
style="width:12px; height:12px; vertical-align:bottom;" /></td>
<td style="background-color:silver; font-size:6pt;"> </td>
<td style="background-color:silver; font-size:6pt;"><img alt="" src="c4.png"
style="width:12px; height:12px; vertical-align:bottom;" /></td>
</tr>
</table>
Can somebody tell me how to get rid of the white bars? Thanks!
I think the problem is that in your middle cell, your "text" (the non-breaking space) is taller than the row height should be.
Also, you have one class attribute instead of style.
Would this simplified code work for you? If I understand correctly what your intention is...
<table style="border-collapse: collapse; width:640px;" cellpadding="0">
<tr>
<td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c1.png" style="width:12px; height:12px;" /></td>
<td style="background-color: silver; height:12px;"></td>
<td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c2.png" style="width:12px; height:12px;" /></td>
</tr>
<tr>
<td style="background-color: silver;"></td>
<td style="background-color: silver;"><iframe id="myIframe" style="border: none; overflow:visible; width:100%;" src="/Test.aspx" scrolling="no"></iframe></td>
<td style="background-color: silver;"></td>
</tr>
<tr>
<td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c3.png" style="width:12px; height:12px;" /></td>
<td style="background-color: silver; height:12px;"></td>
<td style="background-color: silver; height:12px; width:12px;"><img alt="" src="c4.png" style="width:12px; height:12px;" /></td>
</tr>
</table>
I recommend using Firebug in Firefox (or the "Elements" developer tool in Chrome) to inspect your html elements and see which element is occupying that space. It's also helpful for questions like these if you could list what browser(s) show the issue. It's probably better suited to doctype.com as well.
i hate writing email templates.
with that said, i have a pretty good table'd template created yet Outlook 2007 and Outlook 2010 is creating a lot of spacing between the TR than I notice in other email clients.
OL 2007 (http://screencast.com/t/YJ5LdTkiGR)
OL 2010 (http://screencast.com/t/Ob1ii370C)
The code is found below. Any help in getting things to work in Outlook would be greatly appreciated so I can learn and next time not have to bug you :)
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Please try to use below inline style to empty tds avoid more spacing of because empty tds
style="font-size:0%; line-height:1px; mso-line-height-rule:exactly;"
simple and happy coding
The extra space is caused by this empty row:
<tr>
<td> </td>
</tr>
Try replacing that row with:
<tr>
<td height="0" style="padding: 0; margin: 0; height: 0;"></td>
</tr>
Alternatively, sometimes when dealing with Outlook it's easiest to use <br> for spacing.
Here's your full HTML with 2 <br> added at the end of the last paragraph:
<html>
<body>
<style>
tr {border:none;}
</style>
<table id="container" border="0" background-color="#D3E2E9" width="620px" cellpadding="0" cellspacing="0" style="background:#D3E2E9;">
<tr><td>
<table id="container_border" cellpadding="0" cellspacing="0" style="border:1px solid #85898B; width:570px; margin-left:20px; margin-top:20px; margin-bottom:20px;">
<tr><td>
<!-- content -->
<table id="content" cellpadding="0" cellspacing="0" style="margin-left:15px; margin-top:20px; margin-bottom:20px;padding:10px; width:517px; background:white;">
<tr><td>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/7.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">Announcing, da, da, da, DAAAAAAAAAAA, the brand new awesomely helpful,
wildly interesting Back Bay Shutter Company website. Full of juicy information
on all of our products, from shutters, shades and blinds to Shoji panels, this
site will help make the job of choosing just the right window treatment a snap.</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/8.jpg" style="display:block"></td>
</tr>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:20px; padding:0 52px; font-weight:bold;">We even have product videos, so you can actually see how a product looks and
works in people's homes (and who doesn't like a peak at someone else's home?).
We also have a blog, brimming with design news and views.<br><br>
</td>
<tr>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; margin-top:90px; padding:0 22px; font-weight:bold;">
<table>
<tr>
<td>
<img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/6.jpg" border="0" style="display:block">
</td>
<td style="font-family:arial,sans-serif;font-size:11px; line-height:150%; color:#000; font-weight:bold;">
So become a Facebook fan and stay updated on what we're doing. And stop by often. We can't wait to show you around.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="https://origin.ih.constantcontact.com/fs089/1103957675139/img/3.jpg"></td>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>