Canvas Removes Link Code From HTML

Jump to solution
hechla
Community Participant

Hello all, I've searched the community but can't find this scenario. 

First, I'm little more than a beginner/intermediate coder. I don't live in html and css, although I understand it fairly well. I just have minimal experience writing it. So, my code may not be pretty or the most efficient. I can take some constructive criticism but please don't bash me for trying.

Anyway, I've done some custom css in trying to create dynamic buttons in our courses. I've created some code based on some examples I've found online. I've also verified the html as fully compliant with html5. When I save everything in the RCE it works perfectly. But, if I try to edit the content again (with the RCE), the link portion of the code is gone. 

My custom css adds a class for "btn-link," and further styles the "button" class, <a> tag and <img> tag that are nested inside btn-link (so the custom css doesn't mess with all button, <a> tags and <img> tags). 

So this is a sample of the code I start with (I've changed some to make it more generic).

<a title="Course Home Page" href="https://[ourdomain].instructure.com/courses/1/pages/course-home-page" class="btn-link">
   <div class="button">
      <img src="https://[validlinktoimage] alt="home" >
      <span>Home</span>
   </div>
</a>
<br />

 

After I go back in to Edit the content on the page, this is all that appears in the code: 

   <div class="button">
      <img src="https://[validlinktoimage] alt="home" >
      <span>Home</span>
   </div>
<br />

 

The actual link text gets completely stripped from the code.  

Now, I've had some inline css styling stripped before (and I can't seem to find any clear documentation on what's NOT supported within Canvas) but I think this is first time I've ever had a whole line of code stripped. I've contacted one of the ID consultants at Canvas and with her assistance I've been able to rework it a little. But I'm really curious if anyone can explain WHY the link was getting stripped from this code? As I said, I verified that its valid html using the w3c validator. And I want to avoid this happening in the future.  

Thanks, Adam

Labels (1)
1 Solution
and-hu
Community Participant

I've found that when your "a" tag (an inline-level element) is wrapped around block-level elements (in this case, "div"), Canvas doesn't like it and strips the link despite this structure being HTML5 compliant. If you were to change the "div" to a "span", or swap the positions of the "div"/"a" tags, it should stop being stripped. In this case, I'm not exactly sure you need the "div", but then the "button" class does nothing on my instance (only "btn" does). 

View solution in original post

0 Likes