Javascript Works on Most Browsers - but Not in IE6?

[Vik Rubenfeld]

I have a Javascript that works in Netscape 7/Windows, Safari/Mac,
Firefox/Mac, Opera/Mac, and IE5/Mac, but not in IE6/Windows.

Here's the javascript:

<!----- JAVA ----->
<script type="text/javascript">
<!--
function ReloadTextDiv()
{
var NewText = document.getElementById("dynamictext").value;
splitText = NewText.split(/\n\n/).join("</p><p>");
splitText = splitText.split(/\n/).join("<br />");
var DivElement = document.getElementById("textdisplay");
if (splitText == '') {
DivElement.innerHTML = '<p>Start typing to preview your
comment...</p>';
} else {
DivElement.innerHTML = '<p>' + splitText + '</p>';
}
}
//-->
</script>
<!----- JAVA ----->

Here's the HTML that calls it:

<!----- HTML ----->
<p>
<textarea name="comment" id="dynamictext" name="dynamictext"
rows="12" cols="60" onkeyup="ReloadTextDiv();">{comment}</textarea>
</p>

<br/>
<br/>

<div id="comment_container">
<div id="comment_header">
<h1>Live Preview:</h1>
</div>

<div id="comment_content">
<p><span id="textdisplay">Start typing to preview your
comment...</span></p>
</div>
</div>
<!----- HTML ----->

Just in case it's relevant, here's the CSS:

<!----- CSS ----->
#comment_content
{
border: 0;}

div#comment_container{width:95%;margin: 0 auto;background:
#E7E7E7;text-align:left; font-size: 12px; min-height: 127px;}
#comment_container img {border: 0;}

div#comment_header{margin-bottom: 20px;text-align:right;}
#comment_header h1{font-size: 120%;margin:0;padding: 0
5px;background: #9DADC6;color: #FFF; font-size: 12px;}
#comment_container p{margin:0;padding-bottom:0.7em;}
<!----- CSS ----->
How can I make this Javascript work on IE6? Thanks very much in advance
to all for any info.
-Vik

[RobB]

Vik Rubenfeld wrote:

I have a Javascript that works in Netscape 7/Windows, Safari/Mac,
Firefox/Mac, Opera/Mac, and IE5/Mac, but not in IE6/Windows.

Here's the javascript:

<!----- JAVA ----->
<script type="text/javascript">
<!--
function ReloadTextDiv()
{
var NewText = document.getElementById("dynamictext").value;
splitText = NewText.split(/\n\n/).join("</p><p>");
splitText = splitText.split(/\n/).join("<br />");
var DivElement = document.getElementById("textdisplay");
if (splitText == '') {
DivElement.innerHTML = '<p>Start typing to preview your
comment...</p>';
} else {
DivElement.innerHTML = '<p>' + splitText + '</p>';
}
}
//-->
</script>
<!----- JAVA ----->

Here's the HTML that calls it:

<!----- HTML ----->
<p>
<textarea name="comment" id="dynamictext" name="dynamictext"
rows="12" cols="60" onkeyup="ReloadTextDiv();">{comment}</textarea>
</p>

<br/>
<br/>

<div id="comment_container">
<div id="comment_header">
<h1>Live Preview:</h1>
</div>

<div id="comment_content">
<p><span id="textdisplay">Start typing to preview your
comment...</span></p>
</div>
</div>
<!----- HTML ----->

Just in case it's relevant, here's the CSS:

<!----- CSS ----->
#comment_content
{
border: 0;}

div#comment_container{width:95%;margin: 0 auto;background:
#E7E7E7;text-align:left; font-size: 12px; min-height: 127px;}
#comment_container img {border: 0;}

div#comment_header{margin-bottom: 20px;text-align:right;}
#comment_header h1{font-size: 120%;margin:0;padding: 0
5px;background: #9DADC6;color: #FFF; font-size: 12px;}
#comment_container p{margin:0;padding-bottom:0.7em;}
<!----- CSS ----->
How can I make this Javascript work on IE6? Thanks very much in advance to all for any info.
-Vik

Just a tip: you'll get better answers if you post a usable test case,
rather than a mishmash of document pieces.

You're writing badly-formed HTML, nesting a block-level element (p)
inside an inline one (span). Use a div instead (or another p).

Could just replace those carriage returns with <br>s. ie/win uses
'\r\n' for them btw.

[RobB]

Just another bit...whitespace will be compressed unless you replace it
with unicode whitespace:

var NewText = document.getElementById("dynamictext").value;
var splitText = NewText.replace(/\r?\n/g, '<br>').replace(/\s/g,
'\u00A0');

[Lasse Reichstein Nielsen]

"RobB" <fe******@hotmail.com> writes:

Vik Rubenfeld wrote: ....

Here's the javascript:

<!----- JAVA ----->
That's confuzing! Javascript and Java are two different languages.

<textarea name="comment" id="dynamictext" name="dynamictext"
rows="12" cols="60" onkeyup="ReloadTextDiv();">{comment}</textarea>
It would be more efficient to pass the content of the textarea directly
from here, i.e.,
onkeyup="ReloadTextDiv(this.value);"

Then you save an element lookup.
<div id="comment_content">
<p><span id="textdisplay">Start typing to preview your
comment...</span></p>
</div>
</div>

Just a tip: you'll get better answers if you post a usable test case,
rather than a mishmash of document pieces.
Hear, hear. Although pasting the entire post into an HTML page did give
a page that exhibits the problem.
You're writing badly-formed HTML, nesting a block-level element (p)
inside an inline one (span). Use a div instead (or another p).

No, a div. You can't nest p-elements either, and incorrect nesting is
what is causing the problem.
Who would have thunk, IE balking at incorrect HTML that other browsers
accept.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Vik Rubenfeld]

You guys rock. Taking out the nested <p> fixed it. Thanks!

[Thomas 'PointedEars' Lahn]

Lasse Reichstein Nielsen wrote:

"RobB" <fe******@hotmail.com> writes:

Vik Rubenfeld wrote:

Here's the javascript:

<!----- JAVA ----->
That's confuzing! Javascript and Java are two different languages.
More, comments within SGML declarations are delimited with `--'. The
ambiguity introduced by a number of adjacent `-' that is not a multiple
of four make this invalid markup. Consequential, Mozilla/5.0 in Standards
Compliance Mode will ignore the following content, while Mozilla/5.0 in
Quirks Mode and IE will not.
You're writing badly-formed HTML, nesting a block-level element (p)
inside an inline one (span). Use a div instead (or another p).

No, a div. You can't nest p-elements either, and incorrect nesting is
what is causing the problem.

Who would have thunk, IE balking at incorrect HTML that other browsers

^^^^^
Drink, drank, drunk -- think, thank, thunk? :)
accept.

PointedEars