ansaurus

Question

Answer 1

A:

All of your middle column cells have variable heights (not fixed) and so the browser will just try to adjust them to what it thinks is best.

You need to fix their heights by using the style attribute like so:

<td style="height: 171px;">

That would be for the cell containing the top image as the image has a height of 171px.

Also: Do you need 9 rows in the center? Or did you try that to position the borders?

Edit: Or what Re0sless said. ;D

sixfoottallrabbit 2009-08-08 16:11:28

Answer 2

A:

You can do it by adding valign="top" and valign="bottom" to the center cells in the top and bottom for the table.

like so:

<tr>
  <td width="74" rowspan="11"><img src="left_image2.jpg"  width="70" height="984" align="top" /></td>
  <td colspan="5" valign="top"><img src="top_image3.jpg" width="461" height="171" align="left" /></td>
  <td width="87" rowspan="11" ><img src="http:right_image2.jpg" border=0  width="71" height="984" align="bottom" /></td>
</tr>
......
<tr  valign="bottom">

Re0sless 2009-08-08 16:15:45

Answer 3

A:

My suggestions:

Set the image widths to the proper values (top and bottom are 459px wide).
Set the table width to the total value (459 + 71 + 71 = 600).
Create a separate row for the bottom image, and put all of your content in one table cell. You can nest more tables inside if you need to.

<table width="600" height="984" border="0" cellspacing="0" cellpadding="0">
    <tr>
       <td width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" align="top" /></td>
       <td><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" align="left" /></td>
       <td width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" align="bottom" /></td>
     </tr>
     <tr>
        <td>Put all your content in here.</td>
     </tr>
     <tr>
        <td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63" align="top" /></td>
     </tr>
</table>

Joel Potter 2009-08-08 16:17:13

Answer 4

A:

... there are couple of ways to fix it, one (if it will work in outlook and display in all other mail agents) would be to position the top and bottom border images absolutely in the cells.

Second, I'd restructure the table maybe. Make the top and bottom borders span all the columns, as if they were capping the table from top and bottom and take it from there.

vector 2009-08-08 16:19:37

Answer 5

A:

Set the top middle cell to vertical align top: .... top_image3.jpg ....

2. Cut a new image to use for the bottom which includes the left, middle, and right columns of the entire table and throw it in a cell with a colspan="7"

jon_brockman 2009-08-08 16:24:33

Answer 6

A:

Make sure you reset all your CSS so that margin and padding is at 0 before you apply any styles.

Tom 2009-08-08 16:38:04

Answer 7

+1 A:

Thanks for all your suggestions - GREAT HELP! Here's what I ended up with if you are curious. Previews wrong in browsers, but displays correctly in email clients on the receiving end. I tested Gmail, Outlook 2000/2007, Yahoo (old/new), Hotmail, Thunderbird successfully.

Also found this guide to CSS in emails http://www.campaignmonitor.com/css/ (basically avoid it if sending to Outlook 2007/2010 and Gmail clients)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<style type="text/css">
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: #FFF;
    text-align: left;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body table tr td {
    font-family: Arial, Helvetica, sans-serif;
}
</style>
<body>
<table width="600" height="984" border="0" cellspacing="0" cellpadding="0" font-family: Arial, Helvetica, sans-serif;>    
<tr>
<td valign="top" width="74" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/left_image2.jpg" alt="Left Image" width="70" height="984" /></td>

<td valign="top"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/top_image3.jpg" alt="Top Image" width="459" height="171" /></td>

<td valign="top" width="71" rowspan="3"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/right_image2.jpg" border=0 alt="Right Image" width="71" height="984" /></td>
</tr> 
<tr>
<td>
  <p align="center"><font size="+1"> <strong>Special Introductory Maintenance Offer for:</strong></font></p>
  <p align="center"><em>Insert Name<br />Insert Vehicle<br />Insert Vin#<br />Insert Delivery Date</em></p>
  <p align="center"><strong>First 5,000 Miles / 6 Months <br /> Maintenance Service<br />$29.95<br /><font size="-4">(a $79.95 value)<br/><br/><font size="-1">to include:<br /></strong></p>
    <ul>
    <li><div align="left">Inspect and top off washer fluid, brake fluid, <br />
        power steering fluid, and coolant level</div></li>
    <li><div align="left"><font size="-1">Set tire pressures and rotate tires</div></li>
    <li><div align="left">Thorough tire inspection for abnormal wear or damage</div></li>
    <li><div align="left">Inspect wiper blades</div></li>
    <li><div align="left">Replace engine oil and filter</div></li>
    <li><div align="left">Reset maintenance indicator </div></li>
    </font>
    </ul>

  <p align="left"><font size="-1"><span>Toyota of Clifton Park would like to <strong>Thank You</strong> for  your vehicle purchase. We have taken time in caring for and preparing  your vehicle before your purchase and would like to continue that same  care throughout your ownership. I personally invite you to take  advantage of the above offer for your first full Toyota scheduled  maintenance in our Award winning service department. The initial &quot;break  in&quot; inspection is crucial to the safety and longevity of your new  investment.<br /><br />
    Our call center will be following up with you as a reminder when the time gets close. If you have any questions or concerns please don't  hesitate to call the service department at 518-664-4444. Any one of our associates can answer your questions. We truly appreciate your business and look forward to seeing you soon.</span></font></p>

<p align="center"><span>Thank You, <br />Jason Halliday, Service Manager<br />Toyota / Scion of Clifton Park<br /><font size="-3"><em><br /><br />Certificate expires 6 months from delivery date or <br />5,000 miles, whichever comes first.<br />Applicable sales tax not included.<br />Certificate not transferable, valid only for the above customer and vehicle.<br /> NC OPCODE FSCERT<br /></em></font></span></p>
</td>     
</tr>
<tr>
<td valign="bottom"><img src="http://pbrgraphics.com/Constant_Contact/TCP/cert_borders/bottom_image2.jpg" alt="Bottom Image" width="459" height="63"/></td>     
</tr>
</table>
</body>
</html>

2009-08-10 01:07:21

ansaurus

tags:

views:

answers:

HTML Tables using JPG images as borders

related questions