Menu
I'm designing an HTML email template, which forces me to use tables. In the code below, I'm having trouble (1) removing the spacing below the placeholder image and (2) removing the space between the image and the caption. Here's a screenshot of how it looks in Chrome 15 on OS X 10.6.8.:
<!DOCTYPE HTML> <html> <head> <title>Email Template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <table style="border: 1px solid #b50b32; margin: 30px auto; width: 600px; padding: 0; border-spacing: none;" cellspacing="0" cellpadding="0"> <tr> <td id="main" style="background-color: #f2f2f2;"> <h2 style="color: #b50b32; font-family: 'Lucida Grande', Arial, sans-serif; font-size: 22px; font-weight: normal; padding: 15px; margin: 25px 0; background-color: #fff;">Major headline goes here</h2> <table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px;"> <tr><td style="padding: 0; border: 1px solid red;"><img src="placeholder.jpg" width="180" height="130" style="border: none; margin: 0; padding: 0;" alt="Placeholder" /></td></tr> <tr><td style="padding: 0; border: 1px solid red;"><p class="image-caption" style="background-color: #bebebe; color: #333; font-family: 'Lucida Grande', Arial, sans-serif; margin: 0; padding: 5px;">Caption.</p></td></tr> </table><!--/.main-story-image--> <p style="margin: 0 50px 25px 25px;">Lorem ipsum dolor sit amet.</p> <p><a href="">Click here to read more </a></p> <div style="clear: both;"></div> </td><!--/#main--> </tr> </table> </body> </html> The red borders are there only to show the outlines of the cells. I don't want them there in the final version.
770
This is a Default behavior of the table cells that there is some space between their Borders. To remove this space we can use the CSS border-collapsing Property. This Property is used to set the borders of the cell present inside the table and tells whether these cells will share a common border or not.
Add: attributes cellpadding="0" , cellspacing="0" and border="0" to tables.
To prevent cells (rows) from expanding vertically, you have to set a fixed height for table rows. Select the relevant rows and, on the Table Tools Layout tab, click Properties. On the Row tab, select "Specify height" and then choose "Exactly" for "Row height is." Specify the desired amount.
Add border-collapse: collapse into the style attribute value of the inner table element. You could alternatively add the attribute cellspacing=0 there, but then you would have a double border between the cells.
I.e.:
<table class="main-story-image" style="float: left; width: 180px; margin: 0 25px 25px 25px; border-collapse: collapse"> It looks like the DOCTYPE is causing the image to display as an inline element. If I add display: block to the image, problem solved.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
