Solved

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

Posted on 2014-04-11
1
489 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Are you irritated by repeating emails issue in Microsoft Outlook 2016 after recent update ?  Lets’ see how to resolve and prevent duplicate emails in the Outlook 2016 using some simple techniques.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Many of my clients call in with monstrous Gmail overloading issues with Outlook. A quick tip is to turn off the All Mail and Important folders from synching. Here is a quick video I made to show you how to turn off these and other folders in Gmail s…

789 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