Anyone?

I thought I would leave the question fort someone with a proper answer.

You are NOT using Wordpress so what software or site do you use to make and edit your website ?

If you just open your website as an ordinary person would in Firefox and then use Ctrl+U

• Does it display the source code ok.
• And what about this forum if you use Ctlr+U

It is better, for sure. But it is NON-EDITIBLE so it makes no use in my case.

I dunno what is the platform, it is a custom build website - the company has its own platform. I have also attatched an image of what the EDITOR looks like before i enalre it (and before i turn it into a code version).

As i get it, our editor is one of the most popular FREE editors for such websites.

Thats all i know.

Could you look at the source editor in the respective Inspectors? They are somewhat similar: right-click the element you want to inspect, choose Inspect or Inspect Elements from the right-click context menu, then a panel opens in the lower part of the tab. HTML is displayed on the left with the right-clicked element highlighted, and the corresponding CSS is displayed on the right. I guess my questions are:

(1) Do you notice any radical difference between the HTML in the two browsers? For example, is one a plain PRE element and the other something fancier?

(2) If they are the same HTML, are there major CSS differences? In particular, rules for display and white-space.

Here are screenshots with INSPECT ELEMENT from both browsers.

Note is is the SAME PAGE and SAME ARTICLE so its totally comperative. Again even in the inspect element the stuff seems more scambled in Firefox. Picture left is FIREFOX, picture right is Chrome.

I have no idea how to determine (2)...

Yes, the problem is there in your first screenshot: the white-space style property has been changed from its default behavior. Attached screenshots:

(1) Relevant portion of your screenshot (2) Tested using https://imperavi.com/redactor/ with white-space:normal (3) Display of #2 without the override (using default white-space:pre-wrap)

I don't know why that rule doesn't break the display in Chrome. ??

To test this in the Inspector, you can try unchecking the white-space:normal rule to confirm that it displays the source view like Chrome.

Assuming that works, you need a more convenient way to remove or override that rule. For example, a bookmarklet (a script that you save as a bookmark to a convenient location, such as your bookmarks toolbar or bookmarks menu). Most sites still allow bookmarklets to modify their pages, only a few block them (using CSP, more on that if needed).

(A) Select and copy the following (updated) bookmarklet script:

javascript:var tbx=document.querySelectorAll('.redactor-box textarea'); for(var i=0; i<tbx.length; i++) {tbx[i].setAttribute('style', 'white-space: pre-wrap !important;' + tbx[i].getAttribute('style'));} void 0;

(B) Right-click a place on the Bookmarks Toolbar or Bookmarks Menu where you would like to create the new bookmark and choose New Bookmark

(C) In the small dialog that opens, right-click in the Location and Paste (or click in the Location and Ctrl+v) to enter the script there

(D) Name the bookmark something like SourceWrap or whatever you like and click the Add button

Then, to test, open the problem page, display the source, and click the button. Does it work?

Ok so it is just like you said -- it fixes when i remove that option in inspect.

However i totally couldn't do that BOOKMARKLET magic.

Any other way? Or can you explain it for more stupid-programming-wise-people?

Also if i just talk to the site creator cant he remove that by default?

Mitizaro said

However i totally couldn't do that BOOKMARKLET magic.

Where did the problem occur, what step?

Another way is to use an add-on. For example, a Greasemonkey userscript. It's a little hard to write a good script without hands on access to the website, but if you want to test variations on it, that might work.

Also if i just talk to the site creator cant he remove that by default?

YES, that would be best for all their users!! They need to add a style rule for that element:

#itextbg {white-space: pre-wrap !important;}

Oh crap, typo in the original code. Please try replacing Location with this:

javascript:var tbx=document.querySelectorAll('.redactor-box textarea'); for(var i=0; i<tbx.length; i++) {tbx[i].setAttribute('style', 'white-space: pre-wrap !important;' + tbx[i].getAttribute('style'));} void 0;

Here's another way to add the bookmarklet. I have a page where I sometimes post bookmarklets when they are for popular sites. I added this one, not mentioning the site since I have no idea:

https://www.jeffersonscher.com/res/sumomarklets.html#Redactor