CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)
-   -   Resolved HTML Email Width Issue (http://www.codingforums.com/showthread.php?t=224989)

jrobe1111 04-23-2011 04:08 AM
HTML Email Width Issue
 
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 (Post 1082085)
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!


All times are GMT +1. The time now is 04:37 AM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.