Okay
  Public Ticket #332757
<pre> and <code> text not formatting correctly
Closed

Comments

  • Ian started the conversation
    December 9, 2014 at 9:59pm

    Hello,

    One of my blog authors noticed that while text within <code> and <pre> tags is properly formatted in the Salient editor, when it is output on the page it not formatted correctly. Specifically, <code> adds line breaks while <pre> text is not fixed width. You can see an example here and I have also attached a screenshot, showing the output in the browser, with annotations.

    Any help on how to overcome this issue would be appreciated, as the blog is filled with code examples. I am assuming it is a CSS fix ...

    Thank you,

    Ian

  •  8,847
    Tahir replied
    December 10, 2014 at 3:03pm

    Hey!

    Sure, Add this into the Custom CSS box located in your Salient Options panel :

    code,pre {
    display: block;
    clear: both;
    overflow: auto;
    padding: 10px 20px 20px 20px;
    white-space: pre;
    background-color: #f0f0f0;
    width: 60% !important ;
    font: 12px "Andale Mono",Courier,"Courier New",monospace;
}
    Thanks 

    ThemeNectar Support Team 

  • Ian replied
    December 10, 2014 at 5:06pm

    Hello Tahir,

    Thanks. This solved the <pre> issue, but the <code> still breaks out on its own line -- there shouldn't be any breaks before or after. You can see an example on http://jquery.in30minutes.com/serialize-un-serialize-form-data/  on the first paragraph, which should be a complete whole paragraph with fixed width fonts for the three terms bolded here:

    A very common task in jQuery is to take data from your form and send it to a server for processing. This is done so often that it’s a surprise that there is no built in method to this cleanly for json requests. Although jQuery does provide the .serializeArray() method it doesn’t do quite what we want. It gives us an awkward array of data not suitable for sending along with the data js on formatted parameter in $.ajax calls.

    Instead, they are output on their own line (check the link I sent you). I am assuming it's a CSS fix to get rid of the unwanted breaks, could you tell me what it is?

    Thanks

    Ian

  •  8,847
    Tahir replied
    December 11, 2014 at 1:35pm

    Hey Ian!

    Sorry but can you elaborate with a screenshot as i cant make sense of it. 

    Thanks

    ThemeNectar Support Team 

  • Ian replied
    December 11, 2014 at 9:29pm

    Hi Tahir. There are two issues. I've attached an annotated screenshot of this blog post in Chrome.

    Issue 1: As the blog post shows, the <code> text breaks out onto its own line (or paragraph?). This shouldn't happen -- the text within <code></code> should be monospace but part of the same paragraph that it's included in. 

    Issue 2: While Chrome shows correctly formatted <pre> text (see screenshot), in Firefox the formatting is broken -- no monospace text or gray background.

    Any help on how to resolve both issues would be appreciated.

    Thanks

    Ian 

  •  8,847
    Tahir replied
    December 16, 2014 at 1:48pm

    Hey!

    Sorry for the delay, Please add this revised code so i can check it on Firefox :

    code {
    display: inline;
    clear: both;
    overflow: auto;
    padding: 5px 20px 5px 20px;
    white-space: pre;
    background-color: #f0f0f0;
    width: 60% !important ;
    font: 12px "Andale Mono",Courier,"Courier New",monospace;
}
pre {
    display: inline-block;
    clear: both;
    overflow: auto;
    padding: 10px 20px 20px 20px;
    white-space: pre;
    background-color: #f0f0f0;
    width: 60% !important ;
    font: 12px "Andale Mono",Courier,"Courier New",monospace;
}

    Thanks 

    ThemeNectar Support Team 

  • Ian replied
    December 16, 2014 at 7:30pm

    I added the code. Looks OK on Chrome, but it's not rendering properly on FF or Safari. Here's the link I tried it on: http://jquery.in30minutes.com/serialize-un-serialize-form-data/

  •  8,847
    Tahir replied
    December 17, 2014 at 5:04pm

    Hey!

    Please see screenshot: http://prntscr.com/5htjsb . Seems to be alright in Firefox , Win 7 . 

    Thanks 

    ThemeNectar Support Team