I'm having so much problems trying to send an image to the bottom of a td. The problem is that
the td needs to have the valign="top" property.
<html height="100%">
<table height="100%" width="100%">
<tr>
<td height="10%" valign="top" style="background-color: black"> </td>
</tr>
<tr>
<td height="80%" valign="top" style="background-color: grey">
Website content..
<img style="position:absolute; right:10px; bottom: 10px " height="45" width="45" src="http://rsm.imap.cc/-images/rss.jpg"></img>
</td>
</tr>
<tr>
<td height="10%" valign="top" style="background-color: black"> </td>
</tr>
</table>
</html>
The most close that I've got is to send the image to the bottom of the website, but this is not what I want to do, the image should remain on the grey background. (the second td)
Try this: put position: relative; on the <td>, then position: absolute; on the <img> and give it a bottom: 0;.
Then you'll also need to set a padding-bottom: <height-of-image>px; on the <td> to prevent the image from going over the text.
Related
I'm trying to remove the extra space for the jcpenney credit card logo.
I tried multiple attempts from border-collapse,display:block and even setting the margin to auto.Any feedback is welcome.Thank You
<table class="Billing-and-Shipping-Information" width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background: white; ">
<tr>
<td>
<table class="billing" width="50%" cellpadding="0" cellspacing="0" border="0" align="left" style="background: white;padding-left:20px;margin:auto; ">
<tr>
<td style="margin:0 auto;padding:0px;">
<h3 style="font-family:Arial,Helvetica,sans-serif;font-weight:600;font-size:20px;margin:0 auto;display:block;">Billing Information</h3>
</td>
</tr>
<tr>
<td>
<!--HERE IS THE ISSUE -->
<img src="images/jcpenney.jpg" style="display:block;">
<!-- HERE IS THE ISSUE -->
</td>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;margin:0 auto;">JCP Card *XXXX* </td>
<td style="padding-top:5px;padding-left:24px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:bold;margin:auto;">$64.94</td>
</tr>
</table>
Your question is not clear. Though you can try this
<td style="text-align:center;>
<img src="images/jcpenney.jpg" style="display:block;">
</td>
or,
<td>
<img src="images/jcpenney.jpg" style="display:block;width:100%;">
</td>
Do you mean the extra white space below the image?
For example, here at this example I did, you can see a white extra space below the astronaut img and you can fix that adding the next property and value to the imgs at yout CSS.
vertical-align: middle;
img {
max-width: 100%;
}
.image-container {
width: 300px;
background-color: red;
}
<div class="image-container">
<img src="https://i.imgur.com/DtxmvLB.jpg" alt="Apollo 11">
</div>
I put an image of height 900px inside a table also of height 900px. But for some reason an added 5px height automatically gets added to the bottom of the table. Here is the code. Could someone explain why this is happening? Thanks.
<body style="margin: 0; padding: 0;">
<table align="center" border="1" cellpadding="0" cellspacing="0" width="650" height="900" style="border-collapse: collapse;" style="border-top: 1px solid white;">
<tr>
<td><img src="dummy.png" alt="#" style="width: 296px; height:auto;"></td>
</tr>
</table>
</body>
An image is an inline element by default. Add the following style to your image and the white space will disappear.
img{display:block}
jsfiddle demo
It's a known problem of tables and td
Set the image as background of the td
http://jsfiddle.net/F6Gds/30/
<body>
<table align="center" border="1" width="296" height="900">
<tr>
<td style="background-image:url(http://dummyimage.com/296x900/ccc/fff);">
</td>
</tr>
</table>
</body>
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
I have a HTML newsletter table, to structure the content I want horizontal borders. Somehow the horizontal borders always have 100% width according to the table width. How can I achieve 20px padding to the left and right of it?
js fiddle
HTML
<table border="1" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr style=" padding: 0 20px 0 20px;">
<td style=" padding: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
you can't able to do what you want in current code
you need to do some trick
see this
<table border="0" cellpadding="0" cellspacing="0" align="center" width="400">
<tr>
<td >Banana
</td>
</tr>
<tr >
<td> <hr style=" border:0px; margin: 0 20px 0 20px; border-bottom: 3px solid red;">
</td>
</tr>
<tr>
<td >Apple
</td>
</tr>
</table>
i have used (HR) tag in 2nd table row, this will solve your problem ☺
A border does not take padding into account, but it does with margin. See the CSS Box Modell for reference.
On CSS, there is the cascade. It parses top-dowmn and specific overrides general
There are many ways to achieve what you want (including ways in which we have to change the HTML code). Suppose you want to keep the table layout. You can just set the border-left and border-right of the middle td like this:
tr.hr > td {
border:none;
border-left:20px solid white;
border-right:20px solid white;
background:red;
height:3px;
}
HTML:
<tr> <td> Banana </td> </tr>
<tr class='hr'> <td></td></tr>
<tr> <td> Apple </td> </tr>
Demo.
Note that the color of border-left and border-right should be the same to the background color of your table. (they are all white in the demo).
Please have a look at the HTML email boilerplate.
http://htmlemailboilerplate.com/#f1
Limitations using CSS: http://www.campaignmonitor.com/css/. It solves may issues with ie. spacing amongst others and email clients rendering issues (Gmail, Outlook,Yahoo, ...)
HTML emails need to respect 600px width as it is a default for the preview.
To test the HTML email (if no mail configured on a testing server) you could use http://putsmail.com/ Check also on smart phone as many people tend to read mail on it
You can achieve the effect using a combination of 3 cells where the first and last use spacers and the middle can be a red solid color gif.
<table cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
<td valign="top" width="560">
<img src="red.gif" width="560" height="3" alt="" />
</td>
<td valign="top" width="20"><img width="20" height="3" src="transparent.gif" alt="" /></td>
</tr>
</table>
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>