I have been trying to find a solution for the pre tag formatting problem for a couple of days, and finally I have one. Hurray!!! Here is a quick rundown…

While I’ve been working on customizing Joomla CMS, I’ve ran into formatting problem with the pre tags and that was driving me batty. All of my areas contained within the pre tags were formatted without whitespaces and everything was bunched together. For example,

body {
font-size:62.5%;
margin:0;
padding:0;
}

was displayed as:

body {
font-size:62.5%;
margin:0;
padding:0;
}

In attempt to solve this problem, I have searched and searched and searched all types of resources (google, tinyMCE forums, etc.), and I found nothing, nada, zilch. There were several other people who have experienced the same problem in the past, and hopefully, this post will help some of them in the future.

First of all, I’ve noted and applied several suggestions on the tinyMCE forum (“ensure that pre tag is included in the extended_valid_elements array in the tinymce.js and tinymc_src.js files” was one of them), but that didn’t fix the formatting issue in my case. So then I turned to my stylesheets and have discovered a declaration that went like this:

pre { white-space:normal; }

And the light when ON. I then have changed it to this:

pre { white-space: pre; }

And that has solved my pre tag formatting problem. Mmm, I feel content.

Note to self – check the most obvious first. (But then again, how do I know what the most obvious is?!?)