I need to do a basic web for my homework without HTML, I have seen many example but I dont undertstand why I have these white spaces.
I've tried swapping attributes but...
This is my code.
<body style="margin: 0px; padding: 0px">
<table width="100%" style="height: 100%" cellpadding:"10" cellspacing:"0" border="0">
<tr>
<td colspan="5" style="height: 100px;" bgcolor="white"><h1 align="center"><img src="img/logo.png"></h1></td>
</tr>
<tr>
<td width="15%" height="800px" rowspan="5" valign="top" bgcolor="#d2d8c7"></td>
<td height="75px"colspan="3" valign="middle" bgcolor="#d2d8c1"</td>
<td width="12%" height="800px" rowspan="4" valign="top" bgcolor="#d2d8c7"></td>
</tr>
<tr>
<td width="10%" height="20%" bgcolor="#d1d8c7"></td>
<td width="40%" height="100%" bgcolor="#d1d1c7"></td>
</tr>
<tr>
<td width="10%" height="20%" bgcolor="#d1d8c7"></td>
</tr>
You could also use css by changing the bordercollapse property.
table {
border-collapse: collapse;
}
You need to correct the first line of table. It should be this:
<table width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">
replace your following line of html
<table width="100%" style="height: 100%" cellpadding:"10" cellspacing:"0" border="0">
with this:
<table style="height:100%; border-collapse:collapse; border:0px; width:100%;">
Related
I'm trying to make sure all the padding aligns as well as the text and logo aligning in this html.
The code I've used to make everything align is listed below.
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
<tbody>
<tr>
<td align="left" valign="top" style="font-family:'Arial, 'Georgia', Times New Roman, serif;font-weight:normal;font-size:15px;mso-line-height-rule:exactly;line-height:19px; color:#000000;" class="" width="400">
<div class="ee_editable" style="position: static;">
<div class="" style="padding-top: 10px;"><br></div>
<div class="headline">DISCOVER OUR<br> LATEST OFFERS</div>
<div> </div>
</td>
<td width="180">
<a href="https://dmtrk.net/t/20AS-67H0B-UDWVGK-3JC7VW-1/c.aspx" target="_blank">
<img src="http://www.kindlewood.co.uk/bmw_images/minilogo180x80.png" alt="MINI" width="117" height="52" class="ee_editable ee_smallimage ee_pnggif_image" title="MINI" align="right" border="0">
</a>
</td>
</tr>
<tr>
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ee_element ee_imageelement" ee-type="element" data-title="Image" style="width: 580px;table-layout: auto;">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;" class=""><img border="0" src="https://i.emlfiles4.com/cmpimg/0/0/7/3/9/files/10607126_day10mniheader.png" style="width: 100%; min-height: auto; display: block; max-width: 100%;" class="ee_editable" width="580"></td>
</tr>
</tbody>
</table>
The above code is wrapped in a code like this:
<table border="0" cellpadding="0" cellspacing="0" width="640" style="width: 640px; background-color: rgb(255, 255, 255);table-layout: auto;" class="w320" bgcolor="#ffffff">
<tbody>
<tr>
<td align="center" style="min-width: 320px; padding-top: 0;padding-right: 0;padding-bottom: 0;padding-left: 0;" width="640">
<table cellpadding="0" cellspacing="0" style="width: 580px;table-layout: auto;" width="580">
Right now, the page displays as so:
But I need the white mini pic, text and logo to align with the rest of the page. Thanks for any input!
You need to span the td with the image across two columns, since the row above as two td's, if that makes sense.
So if you change
<td class="ee_dropzone" width="580" align="left" style="width: 580px;">
to
<td colspan="2" class="ee_dropzone" width="580" align="left" style="width: 580px;">
you should be good to go.
This is a piece of code from my html email - in this section, the colour refuses to apply in outlook despite using bgcolor and the background style property
I have attached a screenshot of what it should look like
The td immediately above the title does not colour.
Any help would be great
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
<tr>
<td height="20" style="line-height:1px; font-size:1px; background-color:#fe513e !important;" bgcolor="#fe513e" class="fix_height"></td>
</tr>
<tr>
<td width="30" bgcolor="#fe513e" style="background-color:#fe513e !important;" class="hide"></td>
<td class="pad_side">
<table width="100%" border="0" cellspacing="0" style="background-color: #fe513e !important;" cellpadding="0" align="center" class="wrapper" bgcolor="#fe513e">
<tr>
<td class="black" align="center" bgcolor="#fe513e" valign="top" style="font-family:Arial, sans-serif;font-size:20px;font-weight:600;letter-spacing:0;line-height:25px;color:#ffffff; background-color:#fe513e !important;" mc:edit="newsletter_title_1">The Latest News for October 2018</td>
</tr>
<tr>
<td height="20" bgcolor="#fe513e" style="line-height:1px;font-size:1px; background-color: #fe513e;" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="30" bgcolor="#fe513e" style="background-color: #fe513e !important" class="hide"> </td>
</tr>
</table>
You've missed out the # when you set the table bgcolor, so Outlook for Desktop will not pick it up.
So this:
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
Should be:
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
adding colspan="3" will make it perfect
<table width="650" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#fe513e" class="wrapper" style="margin-left:auto; background-color:#fe513e !important; font-size:1px; line-height:1px; margin-right:auto;" mc:repeatable mc:variant="Newsletter title">
<tr>
<td height="20" style="line-height:1px; font-size:1px; background-color:#fe513e !important;" colspan="3" bgcolor="#fe513e" class="fix_height"></td>
</tr>
<tr>
<td width="30" bgcolor="#fe513e" style="background-color:#fe513e !important;" class="hide"></td>
<td class="pad_side">
<table width="100%" border="0" cellspacing="0" style="background-color: #fe513e !important;" cellpadding="0" align="center" class="wrapper" bgcolor="#fe513e">
<tr>
<td class="black" align="center" bgcolor="#fe513e" valign="top" style="font-family:Arial, sans-serif;font-size:20px;font-weight:600;letter-spacing:0;line-height:25px;color:#ffffff; background-color:#fe513e !important;" mc:edit="newsletter_title_1">The Latest News for October 2018</td>
</tr>
<tr>
<td height="20" bgcolor="#fe513e" style="line-height:1px;font-size:1px; background-color: #fe513e;" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="30" bgcolor="#fe513e" style="background-color: #fe513e !important" class="hide"> </td>
</tr>
</table>
Between two tables am getting vertical space like 1px of border in outlook 2013, 2010, and 2007.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table width="700" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:red; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;">
<tr>
<td width="15"><table width="300" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:#000000; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;" background="#000000">
<tr>
<td width="15" height="170">logo </td>
</tr>
</table>
<table width="490" height="170px" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5" style="background-color:#000000; border:none; mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse:collapse;" background="#000000">
<tr bgcolor="#ffffff">
<td width="15" height="35px">emptyspace</td>
</tr>
<tr bgcolor="red">
<td width="15" height="100">heading</td>
</tr>
<tr bgcolor="#ffffff">
<td width="15" height="35">emptyspace</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Its working fine in chrome and Firefox browsers.
This is the image which am getting error in outlook 2013. Hi sir here am getting some issue in outlook 2013 so am sending screen shot kindly have a look and help me.!
You had some oversized widths in your email give this a try...
<table width="700" border="0" cellspacing="0" cellpadding="0"
style="background-color:green;
border:none;
border-collapse:collapse;">
<tr>
<td>
<table width="300" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="orange"
style=" border:none;
border-collapse:collapse;">
<tr>
<td width="15" height="170">logo </td>
</tr>
</table>
<table width="400" height="170px" align="left" border="0" cellspacing="0" cellpadding="0" bgcolor="#fffcf5"
style="background-color:#000000;
border:none;
border-collapse:collapse;">
<tr bgcolor="#ffffff">
<td width="15" height="35px">emptyspace</td>
</tr>
<tr bgcolor="red">
<td width="15" height="100">heading</td>
</tr>
<tr bgcolor="#ffffff">
<td width="15" height="35">emptyspace</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
in emails you'll need to add style="display:block;" to images for them to remove the padding
Add style="margin: 0px;" to all the tables, tr, and td because Outlook automatically adds a 1px margin round the tables if no margin is specified.
You might need to add padding: 0px; as well.
This is based on my own trial and error, please comment below if it doesn't work, will try and update my answer.
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 am experience a gap between the header and the body only in Outlook 2013. Below is a screen-shot to hot it looks in outlook:
Here is what it should look like:
My header HTML code:
<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
</td>
<td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
<td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
<td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
<table cellspacing="0" cellpadding="0" width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;" border="0" height="51">
<tr>
<td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
</tr>
</table>
<!-- end header -->
This will probably help:
http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells
Basically, it's a padding issue with outlook - and it's related to font sizing. That's quite an old problem from waaaay back in the day of table based website layouts and the old tricks of setting font size to 1px, or using nasty old 1x1px transparent gif files :)
Use this in your stylesheet
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
And inline for each table declare
table border="0" cellpadding="0" cellspacing="0"
To get the 1 pixel white space between each cell use nested tables. and declare the table like so
table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"