Solved

html for email newsletter - using tables -can't get rid of border/padding.

Posted on 2014-04-11
1
488 Views
Last Modified: 2014-04-17
I'm seeing this in firefox -very frustrating.

I'm using tables because I'm sending an html email.

notice the red border at the bottom of the page here (it's actually a red background that I'm using for testing)

http://cjehost.com/Friday-Email/t-rcc-1087611-vs2.html

I've tried everything I can think of to get rid of it. I'm adding a few more rows and the space can't be there.  Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>Untitled Document</title>
<meta charset="utf-8">
</head>

<body>
<table width="600" height="578" border="0" cellspacing="0" cellpadding="0" style="background:red;padding:0; margin:0;height:578px;">
<tr>
<td valign="top" style="padding:0;margin:0;height:578px;border:none;"><img src="images/novartis-1.jpg" alt="You are cordially invited to attend a Speaker Program on: Managing Oral Oncology Products Throughout the Patient Continuum of Care" width="600" height="578" border="0"></td>
</tr></table>
<map name="Map">
  <area shape="rect" coords="448,86,550,102" href="http://www.novartis.com/privacy-policy.shtml" target="_blank" alt="Novartis Privacy Policy">
</map>
</body>
</html>

Open in new window

0
Comment
Question by:phillystyle123
1 Comment
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 500 total points
ID: 39995600
As discussed in this article:

http://salman-w.blogspot.com/2012/10/remove-space-below-images-and-inline-block-elements.html

...I suspect what you are seeing is related to the hangover of various letters such as p and q. Basically, your <img> is inline by default, and inline elements align themselves to the baseline of text. Basesline does not include the bottom parts of letters like p and q. So, even though you don't have any text in your cell, the CSS still makes room for the hangover because the <img> is an inline element. You can either change the display attribute of your image's style to be block, or you can set the cell's vertical-alignment to bottom.
0

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question