CODEWITHSUNDEEP
cssinternet-explorerhtml-tablehtml-email
user1212
user1212

Reputation: 951

IE leaving unnecessary space after image

I am creating an HTML email as

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
  <img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
 </td> 
</tr>
<tr>
 <p>Para with lots of text</p>
</tr>
</table>

However an unnecessary space is left at the bottom of the image when seen in Internet Explorer. How can I get rid of this space?

Upvotes: 3

Views: 3626

Answers (5)

Sparky
Sparky

Reputation: 98738

The HTML for your <table> element is wrong. You're missing the second set of <td></td> tags.

Also, the <p></p> will put some space above and below your text caption. (Edit: Although a technically true statement that the <p> element has a built-in top/bottom margin, the <p> is not causing the OP's problem)

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="image.jpg" width="x" height="y" style="margin:0; padding:0; display:block;">
        </td> 
    </tr>
    <tr>
        <td>
             Para with lots of text
        </td>
    </tr>
</table>

Upvotes: 2

ChrisLively
ChrisLively

Reputation: 88064

This isn't a bug or anything like that.

Depending on the doctype in use, different browsers apply specific values to margin, padding, and border to various elements.

Looking at your code I don't see where you set the border on the image to 0. Do this.

Generally speaking the best doctype to use is simply <!DOCTYPE html> This results in standards mode across pretty much all browsers. Once you have that there are only a few minor tweaks (such as image border) that you need to do to ensure total compliance.

Next, a paragraph tag is invalid inside of a TR. You are missing a TD as Sparky672 pointed out.

Upvotes: 2

MrRay
MrRay

Reputation: 1082

I believe IE has a bug that inserts unnecessary space after an image when placed inside a table. Try removing ALL whitespace in between your tags:

<table border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="image.jpg" width="x" height="y" /></td></tr>
<tr>
 <td><p>Para with lots of text</p></td>
</tr>
</table>

Yea, it's ugly, but that's in part why tables are not the preferred method for layout design. Hope this works for you.

Upvotes: -2

Chewpers
Chewpers

Reputation: 2440

Why have a <p> inside of a table? It's just going to put it above the table. IE probably is showing the empty <tr></tr>. You might need a <td> around your <p>

What happens when you don't use a table at all and just show the image?

Upvotes: 0

Brett
Brett

Reputation: 4061

could it be the <p> tag that is giving you the space after the image and before the text?

Upvotes: 0

Related Questions