IE8 headaches - Does not recognize white-space: pre-wrap

Question

This at first seemed like a simple task which involved adding the white-space: pre-wrap to a CCE stylesheet in order to preserve spaces and line breaks. At the moment the following works in Firefox perfectly. In IE* in the other hand it's just one block of text with no breaks.

.custom_pre {
        word-wrap: break-word; /* IE */ 
        white-space: pre-wrap; /* CSS 2.1 */                            
}

When i open the dev tool in IE8 I see no conflicts. When i try white-space: pre it just adds one line of text with no break lines. When I try to add the <!DOCTYPE html> it makes no difference. I tried wrapping the text in a DIV but did nothing. I tried banging my screen but nothing either.

Would anyone know what im missing for this to work with IE8? Im at a lost.

source 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" xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">

<head>
<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:ID_x0023_ msdt:dt="string">123</mso:ID_x0023_></mso:CustomDocumentProperties></xml><![endif]-->
<link type="text/css" href="Scripts/Custom_CSS/whiteboard_custom_12.css" rel="stylesheet" />
<SCRIPT LANGUAGE="JavaScript" SRC="Scripts/jquery/jquery-1.11.2.min.js"></SCRIPT>
<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Severities</title>
<!--mstheme--><link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="../../../_themes/ENSEMBLENEWLOGOTHEME/ENSE1011-65001.css"><meta name="Microsoft Theme" content="ENSEMBLENEWLOGOTHEME 1011, default">
<script type="text/javascript"> 
$( document ).ready(function() {
$(".custom_pre").each(function() {
   var $this = $(this);
   $this.html($this.text());

});  
});
</script>

<style type="text/css"> 
.style2 {
                text-align: left;
}
.style3 {
                text-decoration: none;
}
</style>

</head>

<body>

<form name="form1" method="post" action="test.aspx" id="form1">
<div>
<input type="hidden" name="MSO_PageHashCode" id="MSO_PageHashCode" value="9" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__REQUESTDIGEST" id="__REQUESTDIGEST" value="0xC3C2C98CCA1FF9BC9AB9BC539EB6B249106AB016897D63255384C3F1046CD6F7703DD22F7F111220E078EA44ADDB16DBCAE8F40B59AFA6E15F82F59117AAD46E,10 Jun 2015 01:33:44 -0000" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUBMA9kFgICAg9kFgICAQ8PFgIeC1BhcmFtVmFsdWVzMokEAAEAAAD/////AQAAAAAAAAAMAgAAAFhNaWNyb3NvZnQuU2hhcmVQb2ludCwgVmVyc2lvbj0xMi4wLjAuMCwgQ3VsdHVyZT1uZXV0cmFsLCBQdWJsaWNLZXlUb2tlbj03MWU5YmNlMTExZTk0MjljBQEAAAA9TWljcm9zb2Z0LlNoYXJlUG9pbnQuV2ViUGFydFBhZ2VzLlBhcmFtZXRlck5hbWVWYWx1ZUhhc2h0YWJsZQEAAAAFX2NvbGwDHFN5c3RlbS5Db2xsZWN0aW9ucy5IYXNodGFibGUCAAAACQMAAAAEAwAAABxTeXN0ZW0uQ29sbGVjdGlvbnMuSGFzaHRhYmxlBwAAAApMb2FkRmFjdG9yB1ZlcnNpb24IQ29tcGFyZXIQSGFzaENvZGVQcm92aWRlcghIYXNoU2l6ZQRLZXlzBlZhbHVlcwAAAwMABQULCBxTeXN0ZW0uQ29sbGVjdGlvbnMuSUNvbXBhcmVyJFN5c3RlbS5Db2xsZWN0aW9ucy5JSGFzaENvZGVQcm92aWRlcgjsUTg/AgAAAAoKCwAAAAkEAAAACQUAAAAQBAAAAAIAAAAGBgAAAAZVc2VySUQGBwAAAAVUb2RheRAFAAAAAgAAAAYIAAAAEE1vbnRlcm8sIEVsbGlzb24GCQAAABQyMDE1LTA2LTA5VDIxOjMzOjQ0WgtkZGRzI5AVYbWSVOMPEjf44VCZqp7nuw==" />
</div>

<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=PNpbHW9JZZojtV41Fp9GxQ2&amp;t=635186629044772859" type="text/javascript"></script>

<script> var MSOWebPartPageFormName = 'form1';</script><script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=SKi7C%2FTrsh1U%2FCnIwkB9Ag%3D%3D"></script>
<script type="text/javascript" language="javascript" src="/_layouts/1033/init.js?rev=SKi7C%2FTrsh1U%2FCnIwkB9Ag%3D%3D"></script><script type="text/javascript" language="javascript" src="/_layouts/1033/core.js?rev=mHKsOQ0iU3Q5jdm9OZNDdg%3D%3D"></script>
<script type="text/javascript"> 
//<![CDATA[

                function DoCallBack(filterText)
                {
                    WebForm_DoCallback('g_a652973d_3b2a_41e3_808c_f3193354b309',filterText,UpdateFilterCallback,0,CallBackError,true);
                }
                function CallBackError(result, clientsideString)
                {                
                }
            //]]>
</script>
<script type="text/JavaScript" language="JavaScript"> 
<!--
var L_Menu_BaseUrl="/sites/SERVIPCManagement/imc";
var L_Menu_LCID="1033";
var L_Menu_SiteTheme="ENSEMBLENEWLOGOTHEME";
//-->
</script><SCRIPT LANGUAGE='JavaScript' > 
<!--
//-->
</SCRIPT>
                <table style="width: 100%">
                                <tr>
                                                <td>
<table TOPLEVEL border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td valign="top"><div WebPartID="00000000-0000-0000-0000-000000000000" HasPers="true" id="WebPartg_a652973d_3b2a_41e3_808c_f3193354b309" width="100%" OnlyForMePart="true" allowDelete="false" style="" ><table border="0" align="center" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:ddwrt2="urn:frontpage:internal"><tr><td><table border="0" cellspacing="0" width="900px"><tr><td class="style2" style="height: 226px;"><br><br><table width="900px" align="left" class="style16" border="1" cellspacing="1" cellpadding="1"><tr><td colspan="4" style="border: 1px solid #C0C0C0; padding: 10px; background-color: #CCCCCC;" align="center"><strong>SM Handoff</strong></td></tr><tr><td style="width: 183px"><strong>Client:</strong></td><td colspan="3">RSA</td></tr><tr><td style="width: 183px"><strong>Ticket:</strong></td><td>2341419</td><td width="100px"><strong>MINT</strong>:</td><td>20150609112</td></tr><tr><td style="width: 183px"><strong>Incident Description:</strong></td><td colspan="3">eBusiness Websites unavailable</td></tr><tr><td style="width: 183px"><strong>Business

                                            Impact:</strong></td><td colspan="3" class="custom_pre">Customers test test test test.
<br/>
<br/>&amp;lt;&amp;gt;()&amp;quot;&amp;#39;&amp;amp;</td></tr><tr><td style="width: 183px"><strong>What was done:</strong></td><td colspan="3" class="ms-alignleft"><div class="custom_pre">- test
<br/>
<br/>- test. 
<br/>
<br/>- Test. 
<br/>
<br/>- Test. 
<br/>
<br/>- Test. 
<br/>
<br/>*MINT* 
<br/>Testtesttesttesttest.
<br/></div></td></tr><tr><td style="width: 183px"><strong>Next steps:</strong></td><td colspan="3" class="custom_pre">Test
<br/>
<br/>NEXT MINT: June 10th at 12:00   </td></tr><tr><td style="width: 183px"><strong>Resources</strong>:</td><td colspan="3" class="custom_pre">Test: test
<br/>test: test </td></tr><tr><td style="width: 183px"><strong>Last  
                                            SM assigned:</strong></td><td colspan="3">test</td></tr></table></td></tr></table></td></tr></table></div></td>
    </tr>
</table>

                                                                                    </td>
                                </tr>
                </table>


<script type="text/javascript"> 
//<![CDATA[

WebForm_InitCallback();//]]>
</script>
</form>

</body>

</html>

Wait, "when you tried to add the doctype?" You mean the page doesn't have a doctype? For sure that will cause IE8 to render in quirksmode, which will do all kinds of crazy things. Always use a doctype. — Erik Funkenbusch, Jun 10 '15 at 01:07
I added my code to give you an idea. I think that one thing that could be causing the issue with IE8 is the following script `` — Daniel Ellison, Jun 10 '15 at 01:41
What is that script of yours doing exactly? What happens when you remove it? Does your problem go away? — Gerrat, Jun 10 '15 at 01:45
Short answer is yes, however the reason i put the script there to begin with is because these characters <>()"'& were not rendering correctly and this script fixes that. — Daniel Ellison, Jun 10 '15 at 01:48
This is way too much code, and far too little context. What *exactly* are you trying to do? [Internet Explorer 8 supports the `pre-wrap` option](http://i.imgur.com/n5O1Srp.png). — Sampson, Jun 10 '15 at 03:37

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

I don't have an actual ie8 browser to test on, but using ie 8 emulation on ie11, and looking at this page of Eric Meyer's, it looks like white-space: pre-wrap; works just fine in IE8:

white-space: pre-wrap

This page also seems to indicate that this should work in IE8.

Maybe there's something else wrong on your page (actual code/html/css always helps).

EDIT: Since seeing your code, it appears that your actual issue is the way you're replacing the section of text you want to show. It looks like converting the section to text, and then back to html through jQuery is messing up your formatting (likely removing all line breaks). Instead you could try to use this answer, or another one on that page to replace the offending characters in that section. ...or if coming from a database maybe just replace server-side.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 10 '15 at 01:02

Gerrat

28,863
9
73
101

This doesn't answer the question. – Rob Jun 10 '15 at 01:23
@Rob. Well, it shows (to the extent it can) that Ie8 Does recognize `white-space: pre-wrap`. I'm not sure how else one could "answer" this question. – Gerrat Jun 10 '15 at 01:25
This should be a comment since for that reason. – Rob Jun 10 '15 at 01:26
1

@Rob. Sure...I'll just put 2links, a picture, and 4 sentences in a comment. This answer adds to the community knowledge. If someone searches for things like IE8 and `white-space: pre-wrap`, it may lead them here, and I think that would be a good thing. I think if you search the site you will find quite a few great answers that elaborate on the topic in question, and cast doubt on the questioner's assumptions. feel free to flag (for a moderator), or even downvote my answer if you feel its warranted. – Gerrat Jun 10 '15 at 01:33
Thanks Gerrat, I test that site and indeed works. It seems to be a code issue then with my page. I pasted my code above if anyone has any other suggestions. – Daniel Ellison Jun 10 '15 at 01:43
I did flag this as "not an answer". – Rob Jun 10 '15 at 02:00
@Rob: All good. I'm somewhat curious myself what one of them thinks. – Gerrat Jun 10 '15 at 02:10

IE8 headaches - Does not recognize white-space: pre-wrap

1 Answers1