HTML is being stripped

~katie~'s Avatar

~katie~

20 Nov, 2014 05:08 PM

The href tags are being removed every time I submit. The second example is what I'm left with. Why is this html being stripped and what is the fix for this?

Original HTML

<link class="twitter-hover social-slide" div="" href="/_files/custom-css/footer_socialMedia.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4"></div>
</div>
<div>
<div class="col-md-4"></div>
</div>
<div>
<div class="col-md-4">
<a href="https://www.facebook.com/USAFA.Official"><div class="facebook-hover social-slide"></div></a>
<a href="http://instagram.com/af_academy"><div class="instagram-hover social-slide"></div></a>
<a href="https://www.youtube.com/user/USAFAOfficial"><div class="youtube-hover social-slide"></div></a>
<a href="https://twitter.com/AF_Academy"><div class="twitter-hover social-slide"></div></a>
</div>
</div>

After submitting

<link class="twitter-hover social-slide" div="" href="/_files/custom-css/footer_socialMedia.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4"></div>
</div>
<div>
<div class="col-md-4"></div>
</div>
<div>
<div class="col-md-4">
<div class="facebook-hover social-slide"></div>
<div class="instagram-hover social-slide"></div>
<div class="youtube-hover social-slide"></div>
<div class="twitter-hover social-slide"></div>
</div>
</div>
  1. 1 Posted by Ryan Griffith on 20 Nov, 2014 08:47 PM

    Ryan Griffith's Avatar

    Hi Katherine,

    My guess is the <a> tags are most likely being removed because they are being considered empty due to there being no actual text content within them, only an empty <div> tag.

    When you have a moment, try adding a non-breaking space &#160; within the <div>'s and let me know if the tags are no longer stripped out.

    Please let me know if you have any questions.

    Thanks!

  2. 2 Posted by ~katie~ on 20 Nov, 2014 09:04 PM

    ~katie~'s Avatar

    Hi Ryan,

    I did try that and it is stripping the href's out and leaving the non-breaking space.
    after submitting...

    <div class="col-md-4">
    <div class="facebook-hover social-slide">&#160;</div>
    <div class="instagram-hover social-slide">&#160;</div>
    <div class="youtube-hover social-slide">&#160;</div>
    <div class="twitter-hover social-slide">&#160;</div>
    </div>
    
  3. 3 Posted by Ryan Griffith on 20 Nov, 2014 09:18 PM

    Ryan Griffith's Avatar

    Thank you for giving the non-breaking space a shot, Katie.

    Are you entering this content in a WYSIWYG by chance? If so, I'm curious if the WYSIWYG library (TinyMCE) does not like the <div> tags within the <a> tags. When you have a moment, try replacing the <div> tags with a <span> tag to see if the links are removed/rewritten.

    Please let me know if you have any questions.

    Thanks!

  4. 4 Posted by Ryan Griffith on 26 Nov, 2014 04:43 PM

    Ryan Griffith's Avatar

    Hi Katie,

    Just wanted to follow up to see if you had a chance to view my recent comment.

    Please let us know if you have any questions.

    Thanks.

  5. 5 Posted by Chris on 29 Nov, 2014 04:10 PM

    Chris's Avatar

    Hay Ryan, those <span>'s did the trick on this!

    <a href="https://www.facebook.com/USAFA.Official"><span class="facebook-hover social-slide"></span></a>
    

    You don't even need the &#160; with it!

    Thanks!

  6. 6 Posted by Chris on 29 Nov, 2014 04:48 PM

    Chris's Avatar

    Sadly, on a bigger scale, this does not seem to work...

       <a title="Test" target="_blank" href="http://google.com">
          <span class="media">
            <div class="pull-left">
              <div class="fa-stack fa-2x">
                <div class="fa fa-circle fa-stack-2x text-primary">
                </div>
                <div class="fa fa-music fa-stack-1x fa-inverse">
                </div>
              </div>
            </div>
            <div class="media-body">
              <h3 class="media-heading">
                Events
              </h3>
              <p>
                Reminisce with old friends and have a night out on the town.
              </p>
            </div>
          </span>
        </a>
    

    gets me:

    <div class="pull-left">
       <div class="fa-stack fa-2x">
          <div class="fa fa-circle fa-stack-2x text-primary"></div>
          <div class="fa fa-music fa-stack-1x fa-inverse"></div>
       </div>
    </div>
    <div class="media-body">
       <h3 class="media-heading">Events</h3>
       <p>Reminisce with old friends and have a night out on the town.</p>
    </div>
    

    I even tried going overboard with the <span>'s...

       <a title="Test" target="_blank" href="http://google.com">
          <span class="media">
            <span class="pull-left">
              <span class="fa-stack fa-2x">
                <span class="fa fa-circle fa-stack-2x text-primary">
                </span>
                <span class="fa fa-music fa-stack-1x fa-inverse">
                </span>
              </span>
            </span>
            <span class="media-body">
              <h3 class="media-heading">
                Events
              </h3>
              <p>
                Reminisce with old friends and have a night out on the town.
              </p>
            </span>
          </span>
        </a>
    
    and I get this in return:
    <h3 class="media-heading">Events</h3>
    <p>Reminisce with old friends and have a night out on the town.</p>
    

    Although this is valid HTML5, it is probably not on the up-n-up. So I guess Cascade is keeping me on the narrow path, javascript here I come.

    Thanks again Ryan.

  7. 7 Posted by Ryan Griffith on 01 Dec, 2014 01:39 PM

    Ryan Griffith's Avatar

    Hi Chris,

    I am glad to hear the <span> did the trick for your original issue.

    Regarding your latest issue, I believe the issue is with the <h3> and <p> tags that you have within the <a> tags. I've encountered situations in the past where the WYSIWYG library (TinyMCE) attempts to cleanup content where block-level elements are inside of inline-level elements, because it is technically not valid XHTML. I think the newer HTML5 specs allow this, but it looks like even the latest version of TinyMCE (v4.1.7) rewrites your HTML as well.

    When you have a moment, try changing the <h3> and <p> tags to a <span> and let me know what the result looks like.

    Please let me know if you have any questions.

    Thanks!

  8. 8 Posted by ~katie~ on 01 Dec, 2014 03:52 PM

    ~katie~'s Avatar

    Ryan,

    Thank you. The span tags worked great!

  9. 9 Posted by Ryan Griffith on 01 Dec, 2014 06:25 PM

    Ryan Griffith's Avatar

    Thank you for following up, Katie. I am glad to hear the span tags did the trick.

    Another option, if you are adding this content via a Block, would be to use an XML Block because these types of blocks to not use the WYSIWYG and won't be subjected to TinyMCE's cleanup routines.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  10. Ryan Griffith closed this discussion on 01 Dec, 2014 06:25 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