Unicode characters duplicating when used in Cascade.

webadmin's Avatar

webadmin

19 Mar, 2015 03:33 PM

I'm having a very odd problem. I'm attempting to load some code that a design firm sent us into Cascade. They're using a font and the "before" command in CSS to display icons on the page. The code they sent us renders just fine, but when I attempt to include it in Cascade, it starts duplicating the characters multiple times, for no apparent reason. To simplify the problem, I created a blank page in Cascade and just tried to display a single word. For some reason, it displays the word twice. When I use the exact same code, just adding <html></html> around it, and open it manually, it displays correctly. Here's the Cascade code that's displaying incorrectly:

<head>
    <style>
        .icon-search:before {
            content: "test";
        }
    </style>
</head>
<body>
    <i class="icon-search" />
</body>

And here's the offline code that does display correctly:

<html>
    <head>
        <style>
            .icon-search:before {
                content: "test";
            }
        </style>
    </head>
    <body>
        <i class="icon-search" />
    </body>
</html>

Can you tell me why this is happening?

  1. 1 Posted by webadmin on 19 Mar, 2015 03:34 PM

    webadmin's Avatar

    Apparently it didn't allow me to include the code. Here is the code in file form. Test.html is the code that is not working correctly when put into Cascade, and TestOffline.html is the one that, when opened directly, works fine.

  2. 2 Posted by webadmin on 19 Mar, 2015 03:34 PM

    webadmin's Avatar

    Also of note is that the code appears correctly while viewing it in the editor, but when you submit the code, it duplicates again.

  3. Support Staff 3 Posted by Tim on 19 Mar, 2015 07:45 PM

    Tim's Avatar

    Hi,

    Can you tell me where you are placing this code?:

    <head>
        <style>
            .icon-search:before {
                content: "test";
            }
        </style>
    </head>
    <body>
        <i class="icon-search" />
    </body>
    
    Are you putting this in the Template or attempting to put it directly into the Page via the WYSIWYG (or an XML/XHTML Block)?
  4. 4 Posted by webadmin on 19 Mar, 2015 09:28 PM

    webadmin's Avatar

    I'm putting it directly into the page via the HTML button on the editor.

  5. Support Staff 5 Posted by Tim on 20 Mar, 2015 03:20 PM

    Tim's Avatar

    You'll want to avoid putting things like <head> tags and <body> tags into your Page content as those should already be getting pulled in from your Template. Generally what folks will do is create a region in their Template to act as a placeholder for CSS, then they'll create an XML Block and plug it into that region.

    For example, a very simple Template might look like this:

    <html>
        <head>
           <system-region name="CSS"/>
        </head>
        <body>
           <system-region name="DEFAULT"/>
        </body>
    </html>
    
    Then, you would create a new XML Block with the following code:
    <style>
            .icon-search:before {
                content: "test";
            }
    </style>
    
    Finally, you would attach your new XML Block to the CSS region at the Template level, Configuration level, or Page level. At that point you should be able to add content like:
        <i class="icon-search" />
    
    to a Page using your Template and it would be styled accordingly.

    As a side note, the editor will change <i> tags to <em> tags, but should leave your class attribute intact.

    Let me know if this helps. If you continue to have problems, let me know:
    * The exact code you're placing into the HTML source * What that same code looks like after you submit

    Thanks!

  6. 6 Posted by webadmin on 20 Mar, 2015 03:32 PM

    webadmin's Avatar

    I'll look into that, but I have noticed one thing. When I publish the code, as-is, this is what outputs:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title ></title>
    </head>
    <body>
    <div id="content"><style type="text/css">
    <!--
                    .icon-search:before {
                            content: "test";
                    }
            
    -->
    </style><em class="icon-search" /></div>
    </body>
    </html>
    

    The <div id="content"> seems to be added by cascade. If I take that exact code adn remove the <div> tag, then the problem goes away.

  7. Support Staff 7 Posted by Tim on 23 Mar, 2015 03:43 PM

    Tim's Avatar

    The <div id="content"> seems to be added by cascade. If I take that exact code adn remove the <div> tag, then the problem goes away.

    Can you attach a copy of the Template you are using for this Page? Also, if you're applying an XSLT or Velocity Format to the DEFAULT region of your Page, please attach a copy of that as well.

    Thanks!

  8. 8 Posted by webadmin on 23 Mar, 2015 04:15 PM

    webadmin's Avatar

    Here's the template. Apparently, I put the content div in there, but it still doesn't seem to explain why the unicode is duplicating. The template code is attached. I'm not using any formats onto the default region of the page.

  9. Support Staff 9 Posted by Tim on 23 Mar, 2015 04:21 PM

    Tim's Avatar

    As far as the duplicate code is concerned, which version of Cascade Server are you using and which browser vendor/version are you using?

  10. 10 Posted by webadmin on 23 Mar, 2015 04:25 PM

    webadmin's Avatar

    Cascade version: 7.12.2 - f65d7
    Browser: Chrome, Version 41.0.2272.101 m; Firefox, Version 32.0.3; Internet Explorer, Version 9.0.8112.16421

  11. Support Staff 11 Posted by Tim on 23 Mar, 2015 05:05 PM

    Tim's Avatar

    I'm having a lot of trouble replicating this behavior. Would it be possible for you to use something like LICEcap to grab some video of this as you are reproducing it on your end?

    Thanks

  12. 12 Posted by webadmin on 23 Mar, 2015 05:34 PM

    webadmin's Avatar

    Try this code. This is the published code I gave you in the post above. When you open the page, it should display "test" twice.

  13. 13 Posted by Wing Ming Chan on 23 Mar, 2015 07:26 PM

    Wing Ming Chan's Avatar

    Hi,

    It is the empty em element that is causing the problem. Try this:

    &lt;em class="icon-search"&gt;&#160;&lt;/em&gt;

    and the second "Test" will go away.

    Wing

  14. 14 Posted by webadmin on 23 Mar, 2015 07:47 PM

    webadmin's Avatar

    That appears to have worked on my test. Apparently, the "Tidy HTML" button was removing the space. I'll check the other code to make sure the same didn't happen. Thanks.

  15. 15 Posted by Wing Ming Chan on 23 Mar, 2015 08:00 PM

    Wing Ming Chan's Avatar

    I am on vacation and will be back on April 9, 2015. If you need immediate assistance, please contact David Vanwie ([email blocked]) or Weizhen Tu ([email blocked]). You can also reach them by calling 4-7896.

    Wing

  16. Tim closed this discussion on 30 Mar, 2015 08:24 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac