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>
Related
I appear to be getting a 1px white box around my tables in outlook 2007,10 and 13. Ive done border collapse and it hasn't fixed the issue? Want three 200px tables aligned horizontally, but because a 1px border is being applied it thinks they're more than 200px, therefore breaking the alignment. Tried everything so any suggestions appreciated.
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" width="600" bgcolor="#B6B6B6" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#EE070B" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>1</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#1527EA" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>2</td></tr>
</table>
<table style="border-collapse: collapse;border:none;padding:0px;margin:0px;" align="left" bgcolor="#ED7407" width="200" cellpadding="0" cellspacing="0" border="0">
<tr><td>3</td></tr>
</table>
</td>
</tr>
</table>
Outlook adds around 20px around Tables, no matter what. Not sure on the 1px border but try this hack to fool all Outlook versions into thinking your Tables are Table cells: http://labs.actionrocket.co/make_mobile_email_work_in_outlook
How can I move the rows titled "border one" and "border two" to the top and bottom of the cell they reside in? If I try padding top/bottom, it messes up the structure upon zooming in/out.
Here's a fiddle: http://jsfiddle.net/0uzjyxa5/
<table align="center" border="1" cellpadding="0" cellspacing="0" width="680" height="942" style="border-top: 1px solid white;">
<td style="width: 288px; height:auto;">
</td>
<td>
<table border="1" width="100%">
<tr><td>border top</td></tr>
</table>
<table border="1" width="100%">
<tr><td>venue info</td></tr>
</table>
<table border="1" width="100%">
<tr><td>border bottom</td></tr>
</table>
<td style="width:17px;"></td>
</td>
</table>
You can align your table data using
table td {
vertical-align: bottom;
}
or
table td {
vertical-align: top;
}
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.
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'm trying to make a HTML email template (difficult at the best of times) and I am trying to have a double line between the header and content. I'm trying to use border styles to achieve this like so:
<div class="1"> header image </div>
<div class="2"> random text </div>
using a head style sheet:
.1 {
margin:0;
padding: 0;
border-bottom:thin solid red;
}
.2 {
margin:0;
padding: 0;
border-top:thin solid yellow;
}
it seems to work fine in WLM and other email clients, but not outlook.
In my experience working with email HTML and Outlook, I find I always come back to using tables for layout. The many different email clients do many weird things to HTML, but table layouts seem to be the most cross-client compatible. So, consider something like this:
<table cellpadding="0" cellspacing="0" width="100%" style="border-bottom: solid 1px red;">
<tr>
<td> header image </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="border-top: solid 1px yellow;">
<tr>
<td> random text </td>
</tr>
</table>
I haven't tested this, but it's what I'd try first.
Oke to sart with, the easiest way to make a nice e-mail template is with tables ( not sure if you use them. Try to link as less as possible to your css but do style="" as much as possible.
And take a look at this one :OVER HERE! this one helped me out alot
I would suggest you use inline CSS for the border style and hex values for the color. I have changed your code to old school CSS. Tried and tested on Litmus
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="ffffff">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="50%" style="border-bottom: solid 1px #ff0000;">
<tr>
<td> header image </td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height: 20px; font-size: 20px;"> </td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="50%" style="border-top: solid 1px #ffff00;">
<tr>
<td> random text </td>
</tr>
</table>
</td>
</tr>
</table>