HTML table data adding weird padding -
HTML table data adding weird padding -
i have table table data, i'm using inline styles because want html work in email. seems table info adding padding images are, tried using border-collapse: collapse, , everything, still little 3 or 4 px padding goes onto bottom of images in table data. here code reference:
<!doctype html> <html lang="en"> <body> <table style="background: #e6e6e6; "> <tr><td style="padding-left:18%;"> <!--one main column in nested table--> <table > <tr><td><p style="text-align: center; font-size: 11px; color: grey;">there’s never been improve time utilize hulu plus app on ps3 » | view web page </p></td></tr> <tr><td><img src="pics/psnetworkheader.png" /></td></tr> <tr style="background-image: url('pics/topgreyback.png'); background-repeat:no-repeat;"><td style="padding-left:35px;"> <table><tr style="padding-top:35px;"><!--one row, 2 td columns , nested table--> <td style="padding-right: 60px; padding-top: 40px; width:30%;" ><!--left column in gray block--> <a href="#"><img src="pics/huluimg.png" style="box-shadow: 0 0 6px #eee;"/></a> <p style="color: #f2f2f2; margin-top: 20px; font-size: 12px; ">the hulu plus app on ps3 features updated experience new layout , intuitive controls. watch fall premieres, stream current nail tv shows , classic series ps3.</p> <p style="color: #f2f2f2; margin-top: 20px; font-size:12px;">not member? <b>free month</b> of unlimited instant streaming. <br/>your promo code is: <b>xxxxxxxxx</b> </p> <a href="#">› seek 1 month free</a> <p style="color: #f2f2f2; margin-top: 9px; font-size:9px;">expires 10/20/12. must new subscriber receive offer. </p> </td> <td > <img src="pics/tvimg.png"/> </td> </tr></table> <!--end row in gray block--> </td></tr><!--end gray block--> <table style="margin-left:2px; width: 720px;"> <tr style="padding-top:35px; "><td style="width:50%;padding-left: 35px; padding-right: 20px;"> <h3>hulu plus, tv on terms. </h3> <p><small>with hulu plus app can watch favorite shows right on ps3. current seasons classics, it’s yours $7.99 month.</small></p> <ul style="font-size: 13px;"> <li>easily scroll through popular shows , movies, clips, film trailers, , personalized recommendations.</li> <li>use new enhanced search function , shows watch feature highlights content regularly enjoy can jump straight latest episode.</li> </ul> </td><!--end first td--> <td style="padding-left: 55px; padding-top: 40px;"> <table style="border-spacing:10px; "> <tr> <td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); "> <img src="pics/mofa.png"/> </td> <td style="padding:0px;-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);"> <img src="pics/grimm.png"/> </td> </tr> <tr > <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);"> <img src="pics/snl.png"/> </td> <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);"> <img src="pics/americandad.png"/> </td> </tr> <tr > <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);"> <img src="pics/community.png"/> </td> <td style="-webkit-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); -moz-box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75); box-shadow: 2px 4px 30px -7px rgba(0,0,0,0.75);"> <img src="pics/familyguy.png"/> </td> </tr> <tr > <td > <img src="pics/theoffice.png"/> </td> <td > <img src="pics/naruto.png"/> </td> </tr> <tr > <td > <img src="pics/newgirl.png"/> </td> <td > <img src="pics/once.png"/> </td> </tr> </td></tr> <!--end white block row--> </table><!-- end white block--> <!--one big column--> </table>`enter code here` </tr></td> </table> <!--container--> </body> </html>
your images should have inline css display: block;
. this:
<img src="pics/huluimg.png" style="box-shadow: 0 0 6px #eee;"/>
will this:
<img src="pics/huluimg.png" style="box-shadow: 0 0 6px #eee; display: block;"/>
html table cellspacing
Comments
Post a Comment