xhtml pre tag

[daveWare]

Hello,I'm setting up a e-mail from that sends via asp. The problem I'm having is after I pass the data in the text field to the preview page, I use the pre tag to maintain formatting on the text. The copy, However, does not wrap to the next line it runs a single line breaking out the side of the document, even though there is a container div around the text.Does any one have any experience with this? Any ideas on how to get the text to wrap?Thanks in advance,Dave

[shiftJIS]

First of all, I'm assuming that you're taking data out of a <textarea> tag and directly inserting that data into <pre> tags. If that's not the case, you'll need to explain a little more (source code would be ideal).The pre tag is for text where you want the whitespace and line breaks to show up. The issue here - I'm assuming you're seeing lines wrap when you type in the textarea. The thing is, these line wraps AREN'T line breaks. The <pre> treats it as one long line and it renders as such.It's better to use a textarea field again in the preview. Set the attribute disabled="disabled" or readonly="readonly" (described here: http://w3schools.com/tags/tag_textarea.asp)If you then keep the textarea the same dimensions as the previous, it'll look exactly the same.

[daveWare]

I have a text area in the html form to submit the data.

 <textarea name="content" id="content"><%= Request.Form("content") %></textarea>

The code is then displayed in the preview page. Your solution will work well here, except for the border that won't go away.

 <div id="fc_content">	  <pre width="132"><%= Request.Form("content") %></pre>	</div>

After the preview page I pass the data via hidden fields either back to the initial from for modification, or on to the processing page where the html e-mail is generated. Again your solution works but for the border that won't go away. Any ideas? Tried CSS but still a border.

<table width="560" border="0" align="center" cellpadding="0" cellspacing="0">  <tr>	<td>	  <form name="returnForm" method="post" action="fc_email_form.asp" >		<div align="center">		  <input name="toName" type="hidden" id="toName" value="<%= Request.Form("toName") %>" />		  <input name="toEmail" type="hidden" id="toEmail" value="<%= Request.Form("toEmail") %>" />		  <input name="cc" type="hidden" id="cc" value="<%= Request.Form("cc") %>" />		  <input name="fromName" type="hidden" id="fromName" value="<%= Request.Form("fromName") %>" />		  <input name="fromEmail" type="hidden" id="fromEmail" value="<%= Request.Form("fromEmail") %>" />		  <input name="subject" type="hidden" id="subject" value="<%= Request.Form("subject") %>" />		  <input name="content" type="hidden" id="content" value="<%= Request.Form("content") %>" />		  <input name="Submit" type="submit" class="sendBtn" value="Modify E-mail" />		</div>	</form>	  </td>	<td>	  <form name="emailForm" method="post" action="fc_email_form_processor.asp" >		<div align="center">		  <input name="toName" type="hidden" id="toName" value="<%= Request.Form("toName") %>" />		  <input name="toEmail" type="hidden" id="toEmail" value="<%= Request.Form("toEmail") %>" />		  <input name="cc" type="hidden" id="cc" value="<%= Request.Form("cc") %>" />		  <input name="fromName" type="hidden" id="fromName" value="<%= Request.Form("fromName") %>" />		  <input name="fromEmail" type="hidden" id="fromEmail" value="<%= Request.Form("fromEmail") %>" />		  <input name="subject" type="hidden" id="subject" value="<%= Request.Form("subject") %>" />		  <input name="content" type="hidden" id="content" value="<%= Request.Form("content") %>" />		  <input name="Submit" type="submit" class="sendBtn" value="Send E-mail" />		</div>	</form>	  </td>  </tr></table>

the processor page.

<%Dim strSubject, strToName, strToEmail, strCC, strFromName, strFromEmail, strContent' get the values	strSubject = Trim(Request.Form("subject"))	strToName = Trim(Request.Form("toName"))	strToEmail = Trim(Request.Form("toEmail"))	strCC = Trim(Request.Form("cc"))	strFromName = Trim(Request.Form("fromName"))	strFromEmail = Trim(Request.Form("fromEmail"))	strContent = Trim(Request.Form("content"))	'Send EmailDim Mail, Flds, strBody, strHTMLSet Mail = Server.CreateObject("CDO.Message")	Dim iConf : Set iConf = Server.CreateObject("CDO.Configuration")Set Flds = iConf.FieldsWith Flds .Item("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2 .Item("http://schemas.microsoft.com/cdo/configuration/smtpserver") = "70.86.221.226" .Item("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 25 .Item("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 30 .UpdateEnd With	With Mail	Set .Configuration = iConf	.To = strToName & " " & "<" & strToEmail & ">"	.From = strFromName & " " & "<" & strFromEmail & ">"	.Cc = strCC	.Subject = strSubject	strHTML = "<!DOCTYPE html PUBLIC ""-//W3C//DTD XHTML 1.0 Strict//EN"" ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"">" &_				"<html xmlns=""http://www.w3.org/1999/xhtml"">" &_				"<head>" &_				"<meta http-equiv=""Content-Type"" content=""text/html; charset=ISO-8859-1"" />" &_				"<title>Full Circle</title>" &_				"<style type=""text/css"">" &_				"<!--" &_				"body {font: normal 12px/16px Arial, Helvetica, sans-serif; text-transform: none; color: #666666; text-decoration: none;}" &_				"pre {font: normal 12px/16px Arial, Helvetica, sans-serif;}" &_				"#container {text-align: center; width: 560px; border: 1px solid #666666; margin: 20px auto; position: relative;}" &_				"#fc_logo {text-align: left;  padding: 26px;}" &_				"#fc_content {padding: 0px 26px 15px; text-align: left;}" &_				"#foot {background: url(""http://www.fullcp.com/fc_email/email_template/img_rollercoaster.jpg"") no-repeat; border-top: 1px solid #666666; height: 133px; padding-left: 191px; padding-top: 20px; text-align: left; margin: 0px; padding-bottom: 20px;}" &_				"#foot p {margin: 0px 0px 15px; padding: 0px;}" &_				"#foot h1 {color: #0065a4; margin: 0px; padding: 0px; font-weight: bold; font-size: 12px; line-height: 18px; text-decoration: none;}" &_				"a:link, #foot a:visited {color: #0065a4; font-weight: bold; text-decoration: none;}" &_				"a:hover {color: #666666;}" &_				"-->" &_				"</style>" &_				"</head>" &_								"<body>" &_				  "<div id=""container"">" &_					"<div id=""head""><img src=""http://www.fullcp.com/fc_email/email_template/img_tree.jpg"" alt=""Picture of a tree on a hill"" /></div>" &_					"<div id=""fc_logo""><img src=""http://www.fullcp.com/fc_email/email_template/logo_full_circle.gif"" alt=""Full Circle Real Estate Marketing"" /></div>" &_					"<div id=""fc_content"">" &_					  "<pre width=""132"">" & strContent & "</pre>" &_					"</div>" &_					"<div id=""foot"">" &_					  "<h1>FULL CIRCLE PRODUCTIONS, LLC | <a href=""http://www.fullcp.com"">WWW.FULLCP.COM</a></h1>" &_					  "<p>Integrated marketing, advertising and brand management<br />" &_						"exclusive to the real estate industry.</p>" &_					  "5775 Glenridge Drive | Suite D400 | Atlanta, GA 30328<br />" &_					  "T 404.256.4083 | F 404.256.1352</div>" &_				  "</div>" &_				"</body>" &_				"</html>"							 	.HTMLBody = strHTML		strBody = strContent	.TextBody = strBody	End With		On Error Resume Next	Mail.SendIf Err <> 0 Then	Response.Write "Error encountered: " & Err.DescriptionEnd IfOn Error Goto 0Response.Redirect "mail_sent.htm"  %>

Sorry there is a lot of code.

[jesh]

If you want to display the text in a div, you'll have to use some string method to replace all of the "\n"s with "<br />"s. In javascript, it'd look something like this:

document.getElementById("fc_content").innerHTML = content.replace("\n", "<br />");

[shiftJIS]

What CSS did you try?I set up a few boxes:http://kashi.freelancedreams.com/textarea.htmlYou can use the readonly attribute, and either set the border color to match your background, or just set it to border: none; Either should be fine. I tested it with firefox 2.0, IE7, Opera9, SeaMonkey. Style doesn't work right on the PSP or sidekick though >_<;

[daveWare]

What CSS did you try?I set up a few boxes:http://kashi.freelancedreams.com/textarea.htmlYou can use the readonly attribute, and either set the border color to match your background, or just set it to border: none; Either should be fine. I tested it with firefox 2.0, IE7, Opera9, SeaMonkey. Style doesn't work right on the PSP or sidekick though >_<;

I tried the disable and readonly attributes as well as border none and border white. I still get a grey line.

If you want to display the text in a div, you'll have to use some string method to replace all of the "\n"s with "<br />"s. In javascript, it'd look something like this:

I tried this but i don't think i tried it on the correct page. I'm guessing this should be implemented on the preview page. Doesn't seem to work on the preview page either. tried /r and /n no luck.

document.getElementByTagName("pre").innerHTML = content.replace("\n", "<br />");

[shiftJIS]

Again, it can be done with CSS as I've shown on my test page. I'm sure you've just made some oversight on the part of your CSS style.

[jesh]

tried /r and /n no luck.

I assume you mean "\r" and "\n" rather than "/r" and "/n". You might also want to try "\r\n".You'd want to do that on your preview page. Rather than set the contents of your div tag to the value of your "content" string, set it to the value of the "content" string with the newlines converted.

[daveWare]

I assume you mean "\r" and "\n" rather than "/r" and "/n". You might also want to try "\r\n".You'd want to do that on your preview page. Rather than set the contents of your div tag to the value of your "content" string, set it to the value of the "content" string with the newlines converted.

Your right. I tried \r, \n, \r\n, and \n\r. No success with any. Thanks though.

Again, it can be done with CSS as I've shown on my test page. I'm sure you've just made some oversight on the part of your CSS style.

I see a line on your test page. I think its because I'm using Safari but I'll continue to investigate. thanks