jesh Posted April 24, 2007 Share Posted April 24, 2007 If you have the following: <html><body><div id="div">This is a test.</div><script type="text/javascript">alert(document.getElementById("div").innerHTML);</script></body></html> Firefox, Opera, and IE6 all display "This is a test." on the page as would be expected. However, only Firefox and Opera (correctly) alert the message with all the additional spaces. IE6 seems to strip out/collapse all of the whitespace in the DOM.Firefox and Opera alert: This is a test. IE alerts: This is a test. Does anyone have any ideas how to prevent this behavior in IE? Link to comment Share on other sites More sharing options...
mike_g Posted April 24, 2007 Share Posted April 24, 2007 This is probably wrong, or just a bad way of doing things, but could you not replace the whitespace characters with ? Or would it strip that too Link to comment Share on other sites More sharing options...
aspnetguy Posted April 25, 2007 Share Posted April 25, 2007 IE, like Frontpage and Visual Studio, likes to mess with the nice HTML code you've written changing it to what it thinks you should have done. The result...nothing like you wanted and usually HTML 3 compatible code, gross!Try doing this same example but have some table code on the page and see the results IE spits out also put in some inline css like style="border:1px solid #000" and see what happens.I have faced this problem many times and sadly have yet to find a solution. The closet I have seen is a script that comes with (or used to anyways) a rich text editor from Kevin Roth (www.kevinroth.com/rte). Recently he started charging for the uncompressed JS code but the IE html fix was not his so that should still be available for free when you download the editor (compressed version is free). Link to comment Share on other sites More sharing options...
jesh Posted April 25, 2007 Author Share Posted April 25, 2007 This is probably wrong, or just a bad way of doing things, but could you not replace the whitespace characters with ? Or would it strip that too Thanks for the suggestion. I've thought about that but my problem is that IE is also collapsing tabs (\t) and new line characters (\n, \r, \n\r) as well. I only used spaces in my example, but I want all the whitespace to be preserved (in the DOM).Basically, I'm making an editor page for some admin tools here where I work. You click on some text and the div expands and turns into a textarea so that you can edit the text and then click a button to save your changes. This text needs to have all the hard breaks preserved because it is being used in some text-only environments.IE, like Frontpage and Visual Studio, likes to mess with the nice HTML code you've written changing it to what it thinks you should have done.Uggh, don't I know it! Visual Studio 2005 (.NET 2.0) does a much better job than older versions, but it still likes to muck with your well designed code.Thanks for the suggestions. I'll take a look at that RTE and see if I can glean anything from it. The only other options I've come up with so far are to do something like what mike_g suggested and replace all my newlines with some other (invisible) character on the server and then convert them back to newlines when I set the value in my textarea or else store each of the values into an array or something and then use javascript to write the text to the divs. I'll see if I can post an example that better illustrates what I'm trying to accomplish. Maybe it'll help. Link to comment Share on other sites More sharing options...
jesh Posted April 25, 2007 Author Share Posted April 25, 2007 Here's a better example to illustrate what I'm trying to do: <html><body><div class="text" onclick="toggle(this);">This is just sample text.This should be on a new line.I really hate IE.</div><script type="text/javascript">function toggle(obj){ if(obj.open) { obj.open = false; var textarea = obj.getElementsByTagName("textarea")[0]; var text = textarea.value; for(var i = obj.childNodes.length; i > 0; i--) { obj.removeChild(obj.childNodes[i-1]); } obj.innerHTML = text; obj.onclick = function() { toggle(obj); } } else { obj.open = true; var textarea = document.createElement("textarea"); textarea.value = obj.innerHTML; textarea.style.width = "100%"; textarea.style.height = "200px"; obj.innerHTML = ""; obj.appendChild(textarea); var save = document.createElement("a"); save.href = "#"; save.onclick = function() { toggle(obj); return false; } save.appendChild(document.createTextNode("Save")); obj.appendChild(save); }}</script></body></html> If anyone else has any better ideas, I'd love to hear them. Otherwise, I may just be forced to add this to the bottom of the page if(window.ActiveXObject){ var body = document.body; var elements = body.getElementsByTagName("*"); for(var i = 0; i < elements.length; i++) { elements[i].style.display = "none"; } body.style.backgroundColor = "#000000"; var div = document.createElement("div"); div.style.textAlign = "center"; div.style.color = "#cc0000"; div.style.fontWeight = "bold"; div.style.fontSize = "42px"; div.style.marginTop = "25%"; div.appendChild(document.createTextNode("Oh, stop using IE already!")); div.appendChild(document.createElement("br")); div.appendChild(document.createElement("br")); var a = document.createElement("a"); a.href = "http://www.mozilla.com/en-US/firefox/"; a.appendChild(document.createTextNode("Firefox")); div.appendChild(a); div.appendChild(document.createTextNode(" is better!")); body.appendChild(div);} Link to comment Share on other sites More sharing options...
aspnetguy Posted April 25, 2007 Share Posted April 25, 2007 I made a small test project with that html 2 xhtml script and it does re-format it into valid xhtml but unfortunately it also doesn't preserve whitespace, \t, or \n. Link to comment Share on other sites More sharing options...
jesh Posted April 25, 2007 Author Share Posted April 25, 2007 I made a small test project with that html 2 xhtml script and it does re-format it into valid xhtml but unfortunately it also doesn't preserve whitespace, \t, or \n.Hmm, thanks for testing that. I decided to follow mike_g's suggestion and have succumbed to replacing the "\n"s with "<br />"s on the server-side and then setting the following CSS:div.text br { display: none; } Then, when I set the value of the textarea, I replace the "<br />"s with "\n"s. And, when I want to revert back to the div, I replace all the "\n"s with "<br />"s again. It's a hack, but it seems to work. I only wish IE had better support of the DOM. Link to comment Share on other sites More sharing options...
aspnetguy Posted April 25, 2007 Share Posted April 25, 2007 hey maybe in IE 12 Link to comment Share on other sites More sharing options...
pulpfiction Posted April 25, 2007 Share Posted April 25, 2007 Also dont forget to include the script you mentioned at the bottom of page, may be you will save a few from going through such trouble..... Link to comment Share on other sites More sharing options...
jesh Posted April 25, 2007 Author Share Posted April 25, 2007 Also dont forget to include the script you mentioned at the bottom of page, may be you will save a few from going through such trouble..... Hah! This morning I loaded up the page in IE and had forgotten that that code was there. It was a pleasant surprise to see it. Maybe more sites could add something like that to their pages. Perhaps a delay could be set so that it only shows up for 2 or 3 seconds each time a page loads with a little message telling the user that if they were to switch to Firefox, that message would no longer appear. Hmm.... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.