...

View Full Version : Resolved HTML Email Width Issue



jrobe1111
04-23-2011, 05: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!!!




<!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, 09: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 (http://www.exitfegs.co.uk/Document1.html).

Still has validation errors.

Validate here. (http://validator.w3.org/)


Frank

jrobe1111
04-23-2011, 04: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, 06:07 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?
It is written using HTML mark up which is what the Validator checks.

This is the result that I get (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.exitfegs.co.uk%2FDocument1.html&charset=%28detect+automatically%29&doctype=Inline&group=0)from the validator.

Frank

effpeetee
04-23-2011, 07:58 PM
I have just found this article. It may help you. (http://www.blakems.com/archives/000077.html)

Frank

jrobe1111
04-23-2011, 10: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, 11: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, 10: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, 03: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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum