Resolved HTML Email Width Issue

jrobe1111 · 04-23-2011, 04:08 AM

I am having difficulty with a table column width issue on an html email. In the example, I cannot get the left column with the yellow background to stay at a fixed width. We need it to stay fixed and for the text content that will be inside the cell to wrap to the next line when it gets to the 200px width.

Can anyone see either where my error is or show me how to write the table so it behaves properly?

Thanks!!!

Code:

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

<table width="98%" style="background-color:#ffffff;">
<tr>
<td>
<table width="650px" cellspacing="0" style="background-color:#7b080b;  margin-left:auto; margin-right:auto; border: solid #7b080b 12px;">
  <tr>
    <td colspan="2" align="center" border="0" style="background-color:#7b080b;"><img src="images/ssd_header_collage.jpg" width="650" height="209" alt="Senior Service Directory" /></td>
  </tr>
  <tr>
    <td height="50" colspan="2" align="center" style="font:arial; size:16px; color:#fff; font-weight:bold;">Stay connected with industry information, news, comapny announcements, humour, inspirational stories, useful advice, friendly tips and more!</td>
  </tr>
  <tr width="650" style="table-layout:fixed;">
  <td width="200" rowspan="5" valign="top" style="background-color:#fce179; font:arial; font-size:13px; color:#000; padding:10px;">&nbsp;</td>
    <td  width="450" style="background-color:#fff; font:arial; font-size:18px; color:#7b080b; font-weight:bold; padding:10px;">Article Title One</td>
  </tr>
  <tr>
    <td width ="450" style="background-color:#fff; font:arial; font-size:13px; color:#000; padding:10px;"><p>This is sample text for article number one. </p>
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id urna   sit amet dui sollicitudin euismod at et metus. Quisque a enim vitae erat   porta sollicitudin. Nulla posuere vulputate orci, eu malesuada eros   aliquet eget. Vestibulum ut magna erat. Nullam volutpat fermentum nulla,   vel auctor elit iaculis a. Sed tristique interdum pharetra. Nullam sed   porttitor libero. Nam hendrerit, ipsum eu rutrum volutpat, diam sapien   condimentum sapien, sit amet fermentum tellus velit nec ligula. Integer   imperdiet gravida leo, a suscipit lacus blandit ac. Vivamus lacinia,   arcu sit amet gravida consectetur, eros neque vehicula neque, vitae   viverra tortor purus gravida ipsum. Morbi mi turpis, condimentum id   ultricies ut, congue eget enim. Ut luctus laoreet egestas. Curabitur   vitae lacus non arcu vulputate suscipit ac congue diam. Vivamus laoreet   sem vel eros egestas at adipiscing ipsum varius. Quisque eget mauris vel   mauris commodo tempor. </p>
        <p> Sed tempor placerat nisi, at lobortis elit pharetra in. Curabitur semper   nunc quis ipsum consequat sodales. Ut malesuada lacinia molestie. Cras   eleifend nulla ac metus vestibulum et ultricies massa auctor. Sed   faucibus eleifend iaculis. Nunc non risus et leo scelerisque aliquam.   Suspendisse dictum metus vel tellus placerat eu imperdiet ipsum   faucibus. Vivamus rhoncus aliquet libero, vel commodo urna ultricies   sed. Sed at diam lorem, eget egestas massa. Duis fermentum dolor a augue   consectetur ut cursus tortor vehicula. </p>
    </td>
  </tr>
  <tr>
    <td style="background-color:#fff; font:arial; font-size:18px; color:#7b080b; font-weight:bold; padding:10px;">Article Title Two</td>
  </tr>
  <tr>
    <td style="background-color:#fff; font:arial; font-size:15px; color:#000; font-weight:bold; padding:10px;">Article Two Sub-heading</td>
  </tr>
  <tr>
    <td style="background-color:#fff; font:arial; font-size:13px; color:#000; padding-left:10px;"><p>This is sample text for article number two.</p>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id urna   sit amet dui sollicitudin euismod at et metus. Quisque a enim vitae erat   porta sollicitudin. Nulla posuere vulputate orci, eu malesuada eros   aliquet eget. Vestibulum ut magna erat. Nullam volutpat fermentum nulla,   vel auctor elit iaculis a. Sed tristique interdum pharetra. Nullam sed   porttitor libero. Nam hendrerit, ipsum eu rutrum volutpat, diam sapien   condimentum sapien, sit amet fermentum tellus velit nec ligula. Integer   imperdiet gravida leo, a suscipit lacus blandit ac. Vivamus lacinia,   arcu sit amet gravida consectetur, eros neque vehicula neque, vitae   viverra tortor purus gravida ipsum. Morbi mi turpis, condimentum id   ultricies ut, congue eget enim. Ut luctus laoreet egestas. Curabitur   vitae lacus non arcu vulputate suscipit ac congue diam. Vivamus laoreet   sem vel eros egestas at adipiscing ipsum varius. Quisque eget mauris vel   mauris commodo tempor. </p>
        <p> Sed tempor placerat nisi, at lobortis elit pharetra in. Curabitur semper   nunc quis ipsum consequat sodales. Ut malesuada lacinia molestie. Cras   eleifend nulla ac metus vestibulum et ultricies massa auctor. Sed   faucibus eleifend iaculis. Nunc non risus et leo scelerisque aliquam.   Suspendisse dictum metus vel tellus placerat eu imperdiet ipsum   faucibus. Vivamus rhoncus aliquet libero, vel commodo urna ultricies   sed. Sed at diam lorem, eget egestas massa. Duis fermentum dolor a augue   consectetur ut cursus tortor vehicula. </p>
    </td>
  </tr>
  <tr>
    <td height="80" colspan="2" align="center" valign="middle" style="font:arial; font-size:12px; font-weight:bold; color:#fff;">www.SeniorServiceDirectory.com<br />
      1 (800) 957-1871<br />
      <br />
      Copyright &copy; Senior Service Directory. All rights reserved.</td>
  </tr>
  <tr>
    <td colspan="2" align="left"  style="background-color:#fce179; font:arial; font-size:9px; color:#000; padding:10px; text-align: justify;">DISCLAIMER: This email newsletter aims to provide Senior Service Directory members and subscribers with useful information, educational material, humour, upcoming events, company news, and an overall enjoyable reading experience. The newsletter is written and created by Senior Service Directory staff members, with occasional feature articles from advertising businesses. Please note that any views or opinions presented in this email are solely those of the authors and do not necessarily represent those of the organization. Information, advice, and recommendations presented in the newsletter are strictly ideas, and should not be taken as commands or facts. Finally, the recipient should check this email and any attachments for the presence of viruses. The organization accepts no liability for any damage caused by any virus transmitted by this email.</td>
  </tr>
 </table>
 </td>
 </tr>
 </table>

</html>

effpeetee · 04-23-2011, 08:45 AM

I can't see any <BODY> tags.

Doctype
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY> - missing from your code
</BODY> - missing from your code
</HTML>

This is what it is like with the BODY tags added.

Still has validation errors.

Validate here.

Frank

jrobe1111 · 04-23-2011, 03:16 PM

Frank,

Thanks for the reply. I added body tags and it still isn't performing properly. When we apply text content to the yellow column, the text doesn't wrap automatically at the end of the line. Interestingly, it does wrap in the right column.

As for validation, wouldn't it NOT validate since it is intended for email use?

effpeetee · 04-23-2011, 05:07 PM

Quote:

Originally Posted by jrobe1111

Frank,

Thanks for the reply. I added body tags and it still isn't performing properly. When we apply text content to the yellow column, the text doesn't wrap automatically at the end of the line. Interestingly, it does wrap in the right column.

As for validation, wouldn't it NOT validate since it is intended for email use?

It is written using HTML mark up which is what the Validator checks.

This is the result that I get from the validator.

Frank

effpeetee · 04-23-2011, 06:58 PM

I have just found this article. It may help you.

Frank

jrobe1111 · 04-23-2011, 09:12 PM

Thanks all for your help.

I've tried many different styles with the 'overflow' and 'text-overflow' and I haven't had any luck.

What I don't understand is that the text behaves as I need it to in the right column (white) but not in the left column (yellow).

Any other thoughts?

AndrewGSW · 04-23-2011, 10:02 PM

I put some text into the yellow area and it wrapped within the column fine?!

Using the HTML 'width' attribute for a table includes the border. You have a 12px border on either side, which reduces the width of each column slightly.

effpeetee · 04-24-2011, 09:38 AM

jrobe1111 .

Did the text that you put into the yellow box have breaks in it.
A row of continuous letters will not work. The facility needs somewhere to break.

A row like this is OK.
but
Arowlikethiswillnotbreak.

Frank

I made this kind of mistake early on when I was learning. That's why I mentionit now.

jrobe1111 · 04-25-2011, 02:34 AM

OMG....

Well, thanks Frank. That did it. I think the changes suggested earlier did the work, but I was testing it without any breaks in the content. Originally, it didn't work even with the breaks, but I made the suggested changes and only when I used Lorem Ipsum text did it behave properly. What a rookie mistake!

Thanks everyone!