Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts

    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>
    Last edited by jrobe1111; 04-25-2011 at 03:34 AM.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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
    Last edited by effpeetee; 04-23-2011 at 10:07 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by jrobe1111 View Post
    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
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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?

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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.

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    New Coder
    Join Date
    Aug 2010
    Posts
    20
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •