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.
Related
<style type="text/css">
#import url(https://fonts.googleapis.com/css?family=Montserrat);
</style>
<table width="458" border="0" cellspacing="0" cellpadding="0">
<tr>
<td >
<table width="456" border="0" cellpadding="0" cellspacing="0" style="font-family: Montserrat, Arial, Helvetica, sans-serif;">
<tbody>
<tr>
<td width="132" valign="top" ><img src="Images/logo.png" width="116" height="96" alt="" /></td>
<td width="324" ><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:25px; color:#313131; font-weight:bold;">Brandie ??????</td>
</tr>
<tr>
<td style="font-size:12px; color:#666666; ">Outside Sales,</td>
</tr>
<tr>
<td style="font-size:12px; color:#666666;">Lighting Controls</td>
</tr>
<tr>
<td style="font-size:12px; color:#666666; padding-top:2px; line-height:18px;"><i><strong>Customers Come First </strong></i></td> <br />
</tr>
<tr>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2"><table style="margin-top:5px; line-height:15px; border-radius:25px; border: 1px solid green; background-color:#85a838; padding:5px; "width="135%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="3%" style="padding-left:3px;"><img src="Images/phone.png" width="12" height="12" alt="" /></td>
<td width="24%"><span style="font-size:11px; color:#FFFFFF; padding-top:6px; ">+1 (999) 999 - 9999</span></td>
<td width="3%" style="padding-left:0px;"><img src="Images/mobile.png" width="12" height="12" alt="" /></td>
<td width="24%"><span style="font-size:11px; color:#FFFFFF; padding-top:6px; ">+1 (9999) 9999 - 9999</span></td>
<td width="3%"><img src="Images/email.png" width="12" height="12" alt="" /></td>
<td width="10%"><span style="font-size:11px; color:#999999; padding-top:6px; padding-right:6px; line-height:12px;">unknown#examplar.ca</span></td>
<td width="2.5%"><img src="Images/globe.png" width="12" height="12" alt=""/></td>
<td width="42%"><span style="font-size:11px; color:#999999; padding-top:6px; line-height:12px;">www.examplar.ca</span></td>
</tr>
<tr>
<td width="3%" style="padding-left:3px; padding-top:5px"><img src="Images/map.png" width="12" height="12" alt="" /></td>
<td width="24%"><span style="font-size:11px; color:#FFFFFF; padding-top:0px; ">1810 Example Road, Example, Province, S4? 2?7</span></td>
</tr>
</table></td>
</tbody>
</table></td>
</tr>
</table>
I was wondering if I could get some help fixing my second row in my table. For some reason, it's not obeying the width of my table and it's going onto multiple lines, and it's affecting the first row. I erased personal information from the image, seeing there were phone numbers.
I'm a really really new beginner. I have been tasked with making an email signature by my boss and I cannot figure out how to produce it. I'm using dreamweaver and have written really basic HTML emails that sent successfully, so my code isn't the absolute worst.
I'm trying to recreate this (made in word):
I want the four lines to the right of the logo to be left-aligned, and the bottom two lines to be centered. I don't have any alignment defined in table {} or tbody tr td {}.
Here is how it looks in the chrome preview:
I will comment to show you how it looks in dreamweaver
in style:
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody tr td {
font-family: sans-serif;
font-style: bold;
color: black;
font-size: 13px;
}
.B {font-size: 14px;
text-align: left !important;
}
.smallcaps {
font-variant: small-caps;
font-size: 14px;
text-align: left !important;
}
.bcorp {
font-variant: small-caps;
font-size: 14px;
text-align: center;
}
.pad {
padding-left: 12px;
padding-right: 12px;
vertical-align: bottom;
text-align: center;
}
a {
text-decoration: none;
text-align: center;
}
And in table>tbody:
<tr>
<td width="96" rowspan="6"><a><img src="http:///wp-content/uploads/2016/09/Logo-01.jpg" alt="Logo" width="96" height="90"/></a></td>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td height="9" colspan="2"><span class="B">Name Here, Position Title</span></td>
</tr>
<tr>
<td height="20" colspan="2"><span class=smallcaps>Company Name</span>.</td>
</tr>
<tr>
<td height="20" colspan="2">12345 SW 22 P<span class=smallcaps>kwy</span> | P<span class=smallcaps>ortland</span>, OR 97111 | S<span class=smallcaps>te</span> 123</td>
</tr>
<tr>
<td height="7" colspan="2">D<span class=smallcaps>esk</span>: 503.123.4567 | C<span class=smallcaps>ell</span>: 503.987.6543</td>
</tr>
<tr>
<td height="1" colspan="2"> </td>
</tr>
<tr>
<td colspan="2" cellpadding="5">
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
<a href="https://www.facebook.com/">
<img class="pad" src="small-icons-03-03-[1].jpg" width="25" height="25" alt="Facebook" href="https://www.facebook.com/"/>
</a>
</td>
<td> </td>
</tr>
<tr>
<td height="30" colspan="2"><span class=bcorp>A Certified B Corporation®</span></td>
<td width="101"> </td>
</tr>
Edited: added code - hope it's clear enough to help
Ok, please check this and see if this will help you. About the table issue.
Some Email program don't render Inline-CSS to the body of email. You may consider use the style attributes to support what Table design is missing. I used to do this when generating newsletter.
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<table align="center" width="50%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td> Icon1 </td>
<td> Icon2 </td>
<td> Icon3 </td>
<td> Icon4 </td>
<td> Icon5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
</tr>
</table>
You can achieve the required alignment in the cells using CSS properties: text-align:center and text-align:left. By the way, a row defaults to text-align:left so if you don't put the alignment then it by default goes to left alignment.
And for merging the cells, you can use rowspan and colspan attribute in the tag inside HTML.
I am posting a working example with complete CSS and HTML code for your consideration here: https://jsfiddle.net/rahuldhangar/0s5usofv/
HTML code:
<table width="400" cellspacing="0" cellpadding="0" border="0" style="background:#EEE;font:small-caps 400 14px sans-serif;color:#444;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="middle" align="center" width="125" bgcolor="#DDDDDD">Logo Here</td>
<td style="line-height:1.6;padding: 5px 15px;">
<div>Name Here, Position Title</div>
<div>Company Name</div>
<div>Stress address wrapped around here</div>
<div>Desk: 123.456.789 | Cell: 123.456.789</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<table width="100%" cellspacing="0" cellpadding="5" border="0">
<tr>
<td align="center">
<ul style="list-style:none;margin:0;padding:0;">
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
<li style="display:inline-block;padding:0 5px;"> Icon </li>
</ul>
</td>
</tr>
<tr>
<td align="center">
A Certified B Corporation <sup>®</sup>
</td>
</tr>
</table>
</td>
I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>
I have a table in my html page, in the table the first tr has images and next tr has text and it look's good in IE and Chrome browser's like this
but when I use in Firefox browser it looks like this:
I just used CSS (text-align:center) for td and (border-collapse: collapse,width: 100%) for table that's all...
My html code:
<table class="foottable" border="0" cellpadding="0" cellspacing="1">
<tr>
<td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
<td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
<td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
<td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
<td class="foottabcen"><img class="image1" src="images/charticon.png" /></td>
<td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
</tr>
<tr>
<td class="foottabcen">Select all</td>
<td class="foottabcen">Export to excel</td>
<td class="foottabcen">Mail</td>
<td class="foottabcen">SMS</td>
<td class="foottabcen">Graph</td>
<td class="foottabcen">Print</td>
</tr>
</table>
My CSS code:
.foottable
{
width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;background: white;
}
.foottabcen
{
color:black;text-align: center;
}
please help me.........
Not sure why you would want to do this way but I guess the better way would have been putting the image and text in the same td like:
<td>
<a href="#">
<span><img src="images/exl_icon.png" alt="" /></span>
<small>Export to excel</small>
</a>
</td> /* <a> is added considering these are clickable elements */
and apply display:block; to 'a', 'span' and 'small' through your css.
and probably the best way would have been just use text as link in the td and add a icon specific class to it:
<td>
Export to excel
</td>
and in your css it will look like this:
.ico_excel{
display:block;
text-align:center;
padding-top: x px; /* x should be more than the height of the icon */
background: transparent url(images/exl_icon.png) center top no-repeat;
}
try this
<table class="foottable" border="0" cellpadding="0" cellspacing="1">
<tr>
<td class="foottabcen"><img id="check" src="images/unchecked.png"/></td>
<td class="foottabcen"><img id="export" class="image1" src="images/excelicon.png" /></td>
<td class="foottabcen"><img id="test" class="image1" src="images/mailicon.png" /></td>
<td class="foottabcen"><img id="sms" class="image2" src="images/smsicon.png"/></td>
<td class="foottabcen"><img class="image1" src="images/charticon.png" /></td>
<td class="foottabcen"><img id="print" class="image1" src="images/printericon.png"/></td>
</tr>
<tr>
<td class="foottabcen1">Select all</td>
<td class="foottabcen1">Export to excel</td>
<td class="foottabcen1">Mail</td>
<td class="foottabcen1">SMS</td>
<td class="foottabcen1">Graph</td>
<td class="foottabcen1">Print</td>
</tr>
</table>
and css...give height for foottabcen as per ur requirement
.foottable
{
width: 100%;border-top: 2px solid #D4D4D4;border-collapse: collapse;
background: white;
}
.foottabcen
{
color:black;text-align: center;height:50px;
}
.foottabcen1
{
color:black;text-align: center;
}
check demo here..... http://jsfiddle.net/dBFfd/
did you try this...
<table>
<tr>
<td>
<img id="check" src="images/unchecked.png"/>
<span>sample</span>
</td>
</tr
</table>
but if you want my free assistant just email your code i try to fix it....
I'm re-living the glory days of table-based layouts because I'm writing an HTML email. Unfortunately, I can't get the body to center on the page (it works in a browser, of course, but not when testing in Gmail via HTML Mails. I would like the table which is nested in the first <td> to be centered within the outer table. The inner tables are set to a fixed width, so I would have expected that to work. Any ideas?
Here's the full code (fiddle):
<table width="100%">
<tr>
<td width="100%" align="center">
<table width="600" height="100%">
<tr>
<td width="100%">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="100" height="100">
<img src="" width="100" height="100">
</a>
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="20">
<tr>
<td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;">
<h1 align="left" style="font-weight:100;margin-top:20px;">Header</h1>
<p style="font-family: Georgia, serif;">Body</p>
</td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50">
<img src="" width="50" height="50" />
</td>
</tr>
</table>
</td>
<td>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
Personally I like wrapping my entire body content (even my mobile version on responsive emails) inside a 100% width table (gmail might strip it but it will assume 100% anyway). The trick is the td's align center. ex-
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
<tr valign="top">
<td align="center">
<table with whatever width you want your max width to be>
</td>
</tr>
</table>
also you can assign a bgcolor to your wrapper table which will give you a background color for your email even in webmail clients which normally strip background colors in body
Your code works fine when I checked on Litmus.
My only concern is you may need to add "text-align: left" to the following to make copy aligned to the left on Gmail/IE.
<p style="font-family: Georgia, serif; text-align: left;">Body</p>
Have you tried adding the text-align css style of to the p element of body?
<p style="font-family: Georgia, serif;text-align:center;">Body</p>
you are centering the p within the cell but not its contents.
Alternatively remove the p tag.
Thanks for your suggestions, but after further investigation, I've discovered that Gmail is actually stripping the width="100%" attribute from the outer table. At this time, I don't think there is any way to center the content within the Gmail window.