Is there an alternative to negative positioning in HTML emails? The image in the second table below is positioned 100px up using negative positioning. I need that image to overlap somewhat with the content above.
<table>
<tr>
<td valign="top" width="400" style="padding-right:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem Impsum</p>
</td>
<td><img src="kneeler.jpg" /></td>
</tr>
</table>
<table>
<tr>
<td style="position:relative; top:-100px;"><img src="shoes.jpg" /></td>
<td valign="top" width="400" style="padding-left:10px;">
<p style="color:#575757;font-size:13px;line-height:19px;font-weight:normal;font-family:'Century Gothic'; text-align:justify;">Lorem ipsum</p>
</td>
</tr>
</table>
I've tried padding-top: -100px; but that did not work. Please help!
You can do this by wrapping the element above in a div and setting the height of the wrapper to be less than the actual height of the element. (for example, height:200px if the element is naturally 300px and you want 100px of overlap) The element will overflow the wrapper, but the next element will start where the wrapper ends.
See answer here:How to position an element on top of another element without using position and margin?
And the example:
https://jsfiddle.net/acq3ob6y/1/
Negative values are mostly unsupported in html email. So is CSS position. For webmail at least, this is so that your email doesn't render outside of the desired window. Imagine Gmail with your CSS or email affecting the interface - they've limited the CSS you can use specifically to prevent this.
The only way to accomplish an image overlapping the container is to fake it. See this similar question for an example
Related
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.
The current code for each row is this:
<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
<td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
<td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
<td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>
And the full code is here.
The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.
I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach.
For the all the img logos, remove width='15%' attribute.
Add a vh height property that changes with the height of the window, e.g.
<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
Currently trying to align an image to the bottom of it's table. At present it reverts to the top naturally. I've tried everything but the image still sits to the top of the table.
</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>
I know it will be something simple but at the moment I cannot get my head around why the image isn't moving.
First of all, the HTML structure is completely wrong. <td> and </td> are table cells, so they lie between <tr> and </tr> (table rows). <tr> and </tr> lie in between <table> and </table> (the table itself). The structure of a table is shown below:
<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>
You can have as many <tr>s and <td>s as you wish.
A table by default has no width. Put in another way, its width is set to auto, i.e. it takes the width of its contents. Set the width and height attributes to avoid this. A table also has no borders by default. Set border="1" to make the borders visible.
To align an image to the bottom of its parent element (<td> in this case), one way to do it is to set position:relative for the parent element and set position:absolute for the child element. Then, set bottom:0 for the child element. The image will then be aligned to the bottom of the element. The snippet below sums up the whole process.
<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
There may also be some rules in your logo-label CSS rule, which we don't know about.
First of all, that is a real mess you have. Secondly, you need to look at your CSS file and look up what "logo-label" is doing. That is controlling the alignment of the image.
<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
I’m going through the horror of trying to make HTML e-mail templates that look acceptable in Outlook, and quickly nearing the point of hara-kiri.
I have a basic table setup: three columns, with all content in the middle one. The columns on the side are just there to give spacing. The table has a width of 100% so it takes up the entire width of the reading window. So essentially this (with all the Outlook-specific crud left out):
<table>
<tbody>
<tr>
<td class="leftsidespacer"></td>
<td class="maincontent">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer"></td>
</tr>
</tbody>
</table>
In any normal e-mail client, this is a piece of cake. You set a width on the middle column and that’s pretty much it. Outlook 2007 (and probably other versions) instead collapses all three columns so the middle column takes up 100% of the body width. Basically, setting a width on a table cell has no effect.
All right, so I fall back on really old-time ways of adding an image in the empty cells to force them to have some width. Ugly and stupid, but at least it sorta-kinda works.
The problem I’m facing now, which I mysteriously cannot find anyone even mentioning online, is that any element that I put inside a td always ends up being 100% of the width of the cell and the height of the content, no matter what I do.
The div with the class thisisabox in the example above, for example, always ends up being just one line of text in height and 100% of the table cell, even if I define it thus:
<div width="200" height="200"
style="display: block;
width: 200px;
height: 200px;
background: red;">
Everything in me screams that this should produce a 200 × 200 pixel red box, but it doesn’t. It just gets ignored completely.
As far as I can tell, there is nothing in my styles which ought to have any influence on this. The entirety of the styles declarations I have for the bits in the HTML snippet above is this:
table {
width: 100%;
margin: 0;
padding: 0;
}
table, tr, td {
border-collapse: collapse;
}
td {
padding: 35px 0;
border: 0;
}
(It gets inlined and HTML-attributified by the Premailer API before sending, so it’s not because the styles are only declared in the head.)
Is there some way of making Outlook notice specified width and height of elements inside a table cell?
Or am I missing something really obvious that’s making Outlook behave in this infuriating way?
Outlook does not work with div and it in some instances ignores padding.
https://www.campaignmonitor.com/css/box-model/padding/
The way to fix this is simple and it will work with every email client:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<table width="200" height="200" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="leftsidespacer" width="30"></td>
<td class="maincontent" width="140">
<p>All the content here</p>
<div class="thisisabox">
<p>Something here too</p>
</div>
</td>
<td class="rightsidespacer" width="30"></td>
</tr>
</tbody>
</table>
</body>
</html>
I would create a style sheet and add the values which will be picked up by most modern email clients, but Outlook desktop versions like 2007-2016 require a few inline aids to function properly.
Edit: Base table in Outlook 2007
This is the base table in Outlook 2007 with no extra css that I posted above:
This image came out of Litmus.
I only used the code I posted above. If you are not seeing this, something in your CSS or HTML is causing an issue.
Good luck.
Here is something you can try.
Code:
<table cellpadding="0" cellspacing="0" width="200" height="200" bgcolor="#000000">
<tbody>
<tr>
<td height="200"></td>
<td valign="top" style="color:#ffffff;">
All content here
</td>
</tr>
</table>
Result in Outlook version 1803 (tested: 20/04/2018)
What I have done is added a height to the table element as well as one of the cells. You can either populate the left column with a spacer image or keep it as it is.
Note: You can make do without the left column if you wish but do add the height
Hope this is the answer you were looking for.
I wonder why IE doesn't seem to recognize the width I specify?
Basically I have this code:
<table>
<tr>
<td valign="top" align="right" class="left_frame"></td>
</tr>
</table>
CSS:
.left_frame {
background: url(images/side.gif) repeat-y;
width: 17px;
}
Even if I add width="17" inside the <td></td> tags, the width still doesn't change. This is quite frustrating because the problem seems to be very simple.
I'd say it's because there's no content in your <td>
Try adding a in there so the cell has some content, and see how that goes.
Alternatively, placing a height on the cell may work as well, depending on your requirements.
Basically the cell is a flat line at the moment, and needs something to tell it how tall it is, in order to draw the background in.
Example: http://jsfiddle.net/MvBf5/
I have the following code:
<textarea>
<td align="center" bgcolor="#996633" onMouseover=javascript:ShowContent("menu7_items") onMouseout=javascript:HideContent("menu7_items")>
<p> Stock Update </p>
<div id="menu7_items" style="display:none;" onMouseover=javascript:ShowContent("menu7_items") onMouseout=javascript:HideContent("menu7_items")>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">Update Paper</td>
</tr>
</table>
</div>
</td>
</textarea>
There is a TD inside which there is a DIV and inside DIV there is a Table. DIV's default style is display:none. On mouseover TD, the div should appear like a popup in a given position. But it is not happening. DIV is appearing in the same TD. How to make DIV's position independent of TD.
position: absolute;
You may also want to specify the direction properties (top, right, bottom, left), but try it without those first to see how it looks. If you use them, you may want to use position: relative on the parent to position the absolute child relative to it (the same works with any position value that isn't "static", the default).