This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 8 years ago.
Notice in the following screenshot, there is a white space under image:
I don't understand why there is this gap, how do I remove it. The page is live at http://goo.gl/Kf8FV5
Markup:
<section id="pricing-table">
<table width="950" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="10"> </td>
<td width="760" height="10" colspan="4" align="left" valign="top"><img src="images/membership-plans-design_03.png" alt=""></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="middle" class="featurehead">Heading</td>
<td colspan="4" class="featureset"><table width="760" border="0" align="left" cellpadding="0" cellspacing="0">
<tr>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
<td width="190" height="42" align="center" valign="middle">Feature</td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
<td><img src="images/membership-plans-design_08.png" alt=""></td>
<td><img src="images/membership-plans-design_09.png" alt=""></td>
<td><img src="images/membership-plans-design_10.png" alt=""></td>
<td><img src="images/membership-plans-design_11.png" alt=""></td>
</tr>
</table>
</section>
Css:
#pricing-table { margin: 0 auto; width: 950px; text-align: center;}
.featureset {
background-image: url(images/membership-plans-design_05.png);
background-repeat: no-repeat;
height: 42px;
margin: 0;
padding: 0;
color:#FFF;
}
.featurehead {
background-color:#CCC;
font-weight: bold;
border-bottom: 1px solid grey;
}
Any help is highly appreciated. Thanks in advance.
Images are inline elements, so they have a white space after them (like a <span> element). To remove that white space, change them to block elements like this :
img{
display:block;
}
Change <img src="images/membership-plans-design_03.png" alt=""> to
<img src="images/membership-plans-design_03.png" alt="" style="display: block;">
And to be more precise images are an inline-block element.
Add this to your CSS,
section#pricing-table td img{
display: block;
}
<img> is an inline-block element by default. You can remove the white space around it by setting it's parent's font-size to zero, or by changing it's display property.
JSFiddle Demo
Related
Depending on where you open this HTML, you will see the vertical scroll bar. In Chrome the table doesn't exceeds 180 pixels it has a height. However, in Firefox it expands and exceeds the 180 pixels it has as height. The div with id detailFee has the style of overflow: auto and the height and width are 100%. Is there any solution so the table in Firefox has the same look as Chrome?
Firefox
Chrome
<style>
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
</style>
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
<tbody>
<tr height="100%">
<td>
<div id="detailFee">
<table
style="height: 100%"
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<thead>
<tr height="19px">
<td
style="width: 15px; flex-flow: column nowrap; display: none"
nowrap=""
align="center"
>
+
</td>
<td
style="width: 15px; flex-flow: column"
nowrap=""
align="center"
>
-
</td>
<td width="60%" nowrap="" align="left">Test</td>
<td width="110px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
<td width="85px" nowrap="" align="right">Test</td>
</tr>
</thead>
<tbody>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
<td nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td
style="display: none"
valign="top"
nowrap=""
align="center"
>
+
</td>
<td
style=""
valign="top"
nowrap=""
align="center"
>
-
</td>
<td width="60%" valign="top">Test</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
height="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td nowrap=""> </td>
<td width="30%" nowrap="">Test</td>
<td width="30%" nowrap="">Test</td>
<td
width="110px"
nowrap=""
align="right"
>
Total Assessed
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Paid
</td>
<td
width="85px"
nowrap=""
align="right"
>
Total Due
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="6" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: table-row">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td style="display: none" nowrap="" align="center">
+
</td>
<td
style="display: table-cell"
nowrap=""
align="center"
>
Test
</td>
<td width="60%" nowrap="">Test</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="display: none"
valign="middle"
nowrap=""
align="center"
>
+
</td>
<td
style="display: table-cell"
valign="middle"
nowrap=""
align="center"
>
Test
</td>
</tr>
<tr style="display: none">
<td nowrap=""></td>
<td colspan="4" nowrap="">
<table
width="100%"
cellspacing="0"
cellpadding="0"
border="1"
>
<tbody>
<tr>
<td nowrap="" align="center">+</td>
<td style="display: none" nowrap="" align="center">
-
</td>
<td width="60%" nowrap="">Jointly/Severally Fees</td>
<td width="110px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
<td width="85px" nowrap="" align="right">$0.00</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
Edit:
Here I have the same result in Chrome, Safari, Opera and Firefox
body{
position :absolute;
}
table{
border-collapse: collapse;
}
#mainContainer{
height:180px;
overflow-y: scroll;
}
#detailFee {
background: window;
height: 100%;
width: 100%;
overflow: auto;
border-style: inset;
border-width: 1;
border-color: lightgray;
box-sizing: border-box;
}
Try to put the main table inside a "mainContainer" div like this...
<div id="mainContainer">
<table
width="800px"
height="180px"
style="background-color: lightblue; border-collapse: collapse"
>
And at the end of your html :
</table>
</div>
</body>
</html>
Have a nice day.
I'm working on some code written by someone else and I have a 3 block element that I need to change.
I'm trying to change the first block height to only goes as big as the image is.
I can't find any way of controlling the height of the blocks and can't figured out what is setting up the height.
If you have any suggestions please help.
Thanks!
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size:0px" class="nomob"> </td>
<td width="640" align="center" style="width:640px;min-width:640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%; " class="wrapto320px">
<tbody>
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th bgcolor="red" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1976">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976mob" width="1" style="display:block;" class="wrapto100pc" alt="1976">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1996">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996mob" width="1" style="display:block;" class="wrapto100pc" alt="1996">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We launch our Against Animal Testing campaign.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1998">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998mob" width="1" style="display:block;" class="wrapto100pc" alt="1998">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We celebrate 50 years of human rights with Amnesty International.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size:0px" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
You can't change the height of the first block(the red one) as it is a cell in the row of a table. You'll probably have to use <div> element to manipulate the height factor.
Refer to this post for more details Change Height of a <td> without affecting the whole row height
Also, If your primary concern is the whitespace below the image in the first block, you can either 1) add some content below or 2) remove the "vertical-align: top;" inline-css property of the red block's <th> tag, which will align your image at the center of the cell.
Hope this helps!
I am developing a mailer so on my outlook it looks fine but on my Gmail it shows Spacing on the left and right of the image. I used style="display:block" which only removed the spacing at the bottom. How do I remove on the left and on the right?
Here is my code:
<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" align="center" width="695px">
<tr>
<td align="center"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#677880;">View on the web</span></td>
</tr>
<tr>
<td height="10px"><img src="/images/spacer.gif" height="10" width="1" style="display:block;" border="0" alt="Spacer"/></td>
</tr>
<tr>
<td valign="top" border="0" align="right"><img src="/images/top.jpg" width="695" height="52" border="0" style="display:block;" ></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="695px">
<tr>
<td width="461px" border="0" valign="top" align="right"><img src="/images/father-and-husband.jpg" width="461" height="300" style="display:block;" border="0" ></td>
<td valign="top" width="234px" border="0"><table cellpadding="0" cellspacing="0" border="0" width="234px">
<tr>
<td valign="top" border="0"><img src="/images/life-2-lefe-logo.jpg" width="234" height="131" style="display:block" border="0" alt="Click here to visit our website" title="Click here to visit our website" align="left"></td>
</tr>
<tr>
<td valign="top" border="0"><img src="/images/botton-logo.jpg" width="234" height="169" style="display:block" border="0" align="left"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="695px">
<tr>
<td border="0" valign="top" align="right"><img src="/images/donating-a-kidney.jpg" width="461" height="290" style="display:block;margin:0" border="0" alt="Click here to email us" title="Click here to email us"></td>
<td border="0" valign="top"><img src="/images/right-email.jpg" width="234" height="290" style="display:block" border="0" align="left"></td>
</tr>
</table></td>
</tr>
<tr>
<td border="0" valign="top" align="right"><img src="/images/bottom.jpg" width="695" height="341" style="display:block" border="0"></td>
</tr>
<tr>
<td align="center" valign="center" height="30" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#677880;">If you do not wish to recieve any further email notifications, <a style="color:#ec1c23;" href="{{components.unsubscribe}}" target="_blank">click here to unsubscribe.</a></td>
</tr>
</table></td>
</tr>
</table>
I am developing responsive email for all platforms
In a table I placed 4 images in <TD> and in center <TD> used background color. Further used table collapse for each table.
For your quick reference code is mentioned below:
But issue I am facing in I-Pad and I-phone is there are slight white lines visible with each circle as you can see in below image.
Your help in this regards will be a great favor to me.
Look forward for your answers at your earliest convenience.
<table width="285" border="0" cellspacing="0" cellpadding="0"
style="border-spacing:0; background-color:#f0f0f0;">
<tr>
<td width="5" height="35" ></td>
<td width="35" height="35" align="left" valign="top" ><table width="35" style="border-collapse:collapse;" height="35" border="0" align="left" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top"><table width="35" style="border-collapse:collapse;" height="35" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" hspace="0" vspace="0" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" align="absbottom" style="display:block;" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
<td width="25" height="22" align="center" valign="middle" bgcolor="#D50000"><span style="color:#FFFFFF;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">21</span></td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" width="5" height="23" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" width="35" height="6" hspace="0" vspace="0" border="0" style="display:block;" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" style="border-collapse:collapse;" height="35" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td height="6" colspan="3" valign="bottom"><img src="em-cr-tp.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="absbottom" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="em-cr-lt.jpg" style="display:block;" alt="" width="5" height="23" border="0" /></td>
<td width="25" height="22" align="center" valign="middle" style="color:#ffffff;font-size:12px;font-family:Arial;font-weight:bold;text-align:center;" bgcolor="#D50000">1</td>
<td width="5" height="23" align="left"><img src="em-cr-rt.jpg" alt="" style="display:block;" width="5" height="23" border="0" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="em-cr-bt.jpg" alt="" style="display:block;" width="35" height="6" border="0" align="texttop" /></td>
</tr>
</table></td>
<td width="5" height="35" align="left" valign="top" ></td>
<td width="35" height="35" align="left" valign="top" style="border-collapse:collapse;"><table width="35" height="35" style="border-collapse:collapse;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="6" colspan="3" valign="bottom"><img src="white-lotto-tp.jpg" alt="" width="35" height="6" align="absbottom" border="0" /></td>
</tr>
<tr>
<td width="5" height="23" align="right"><img src="white-lotto-lt.jpg" border="0" width="5" height="23" alt="" /></td>
<td width="25" height="23" align="center" valign="middle" bgcolor="#000099"><span style="color:#ffffff;font-size:14px;font-family:Arial;font-weight:bold;text-align:center;">14</span></td>
<td width="5" height="23" align="left"><img src="white-lotto-rt.jpg" border="0" width="5" height="23" alt="" /></td>
</tr>
<tr>
<td height="6" colspan="3" valign="top"><img src="white-lotto-bt.jpg" border="0" width="35" height="6" align="texttop" alt="" /></td>
</tr>
</table></td>
<td width="5" height="35" ></td>
</tr>
</table>
Try a
vertical-align: middle;
in the style attribute of your image element. If that does not work, it would be great to get the complete HTML and an image that shows the issue.
I have a table alignment I’m having trouble doing what I want it to do. Below is what I have, but I want the cell with 1 in it to hug the top the whole table while I want the cell with 2 in it to hug the bottom baseline of the table. Cell 3 may have variable height. Anyone know how this possible? Probably something simple I’m missing but having figured it out yet.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="50">
<tr>
<td>1
</td>
</tr>
<tr>
<td>2
</td>
</tr>
</table>
</td>
<td height="200" width="50">3
</td>
</tr>
</table>
You need to add a height="100%" on your tables, along with some valign attributes on the cells.
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="50" height="100%">
<tr>
<td valign="top">1
</td>
</tr>
<tr>
<td valign="bottom">2
</td>
</tr>
</table>
</td>
<td>
<table><tr><td height="200" width="50">3</td></tr></table>
</td>
</tr>
</table>
Ah figured it out:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="19">1</td>
<td width="300" rowspan="2">
<br>
<br>
3<br>
<br>
</td>
</tr>
<tr>
<td valign="bottom">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>2</td>
</tr>
</table></td>
</tr>
</table>