Images in Table Showing Up Offset

[JenniferStrasse]

I was updating my homepage for next school year and wanted to change some of the buttons. I didn't change the formatting at all; just moved reassessment policy from the table of buttons on the bottom to the table of buttons on the top. In the screenshot, you can see that the button is now offset. 

The offset button does NOT appear offset when I'm in editing mode, and it also isn't offset when I click on Pages. However, when Canvas loads to the homepage or if I follow any links that link back to the home page, this is how the buttons look.

The buttons are the exact same size. All images are centered. I tried to increase the width of the table, but it didn't work. Please help! Thank you!

[Chris_Hofer]

Hi there, @JenniferStrasse ...

This is a little hard to troubleshoot because we cannot see the HTML code that you've got for that page in your course.  Would you be able to include the code in a reply so that we might be able to investigate this a bit more with you?

How do I use the HTML view in the Rich Content Editor as an instructor?

[JenniferStrasse]

Sure...Sorry it's a lot! 

<p style="text-align: center;"><img src="https://u46.instructure.com/courses/128966/files/12276926/preview" alt="District Requirement - Course Banner 2023.png" width="100%" height="100%" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276926" data-api-returntype="File" /></p>
<table style="border-collapse: collapse; width: 100.798%; height: 100%; border-style: dotted; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 19.9869%; text-align: center;">&nbsp; &nbsp; &nbsp; <img src="https://u46.instructure.com/courses/128966/files/12284286/preview" alt="Slide4-6.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284286" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;">&nbsp; &nbsp; <img src="https://u46.instructure.com/courses/128966/files/12284287/preview" alt="Slide3-6.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284287" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;">&nbsp; <img src="https://u46.instructure.com/courses/128966/files/12284290/preview" alt="Slide2-7.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284290" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;">&nbsp; &nbsp; &nbsp; <img src="https://u46.instructure.com/courses/128966/files/12284291/preview" alt="Slide1-6.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284291" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;"><a title="Reassessment Policy" href="https://u46.instructure.com/courses/128966/pages/reassessment-policy" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/pages/reassessment-policy" data-api-returntype="Page"><img src="https://u46.instructure.com/courses/128966/files/12276016/preview" alt="Reassessment Policy" width="249" height="140" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276016" data-api-returntype="File" /></a> &nbsp;&nbsp;&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><img src="https://u46.instructure.com/courses/128966/files/12276032/preview" alt="Welcome to Mrs. Strasser's 6th Grade!" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276032" data-api-returntype="File" />&nbsp;&nbsp;</p>
<p style="text-align: center;"><img src="https://u46.instructure.com/courses/128966/files/12276033/preview" alt="This week
Click on today's button to see what's due and quickly get to modules. You've got this!" width="1280" height="192" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276033" data-api-returntype="File" />&nbsp;&nbsp;</p>
<table style="border-collapse: collapse; width: 100%; height: 100%; margin-left: auto; margin-right: auto;" border="0">
<tbody>
<tr>
<td style="width: 20%; text-align: center;"><a class="inline_disabled" href="https://docs.google.com/presentation/d/1my6Ba2vO1PDBg3Hw-MRfAdSZ3fC0-8KZ8-1zvKV2sqk/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://u46.instructure.com/courses/128966/files/12276034/preview" alt="Monday" width="225" height="225" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276034" data-api-returntype="File" /></a>&nbsp;&nbsp;</td>
<td style="width: 20%; text-align: center;"><a class="inline_disabled" href="https://docs.google.com/presentation/d/1sv2_q4K8x6JSmI4i5tgKZ9yyFjRdRPqkQ2Qu0UtUAyM/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://u46.instructure.com/courses/128966/files/12276031/preview" alt="Tuesday" width="225" height="225" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276031" data-api-returntype="File" /></a>&nbsp;&nbsp;</td>
<td style="width: 20%; text-align: center;"><a class="inline_disabled" href="https://docs.google.com/presentation/d/11sTwDRCUdIecsx_ARUi9EJhfIoYLGVkIK_TvvHo9WqY/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://u46.instructure.com/courses/128966/files/12276011/preview" alt="Wednesday" width="225" height="225" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276011" data-api-returntype="File" /></a>&nbsp;&nbsp;</td>
<td style="width: 20%; text-align: center;"><a class="inline_disabled" href="https://docs.google.com/presentation/d/1U_opK8Tag6ee6vYLSccswXQUq_LI6d5Kcx7a6Bf2paw/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://u46.instructure.com/courses/128966/files/12276027/preview" alt="Thursday" width="225" height="225" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276027" data-api-returntype="File" /></a>&nbsp;&nbsp;</td>
<td style="width: 20%; text-align: center;"><a class="inline_disabled" href="https://docs.google.com/presentation/d/1wYPwnINOd-YMu8_makR7dzgjKLb4hUobMHRAlSpUxMo/edit?usp=sharing" target="_blank" rel="noopener"><img src="https://u46.instructure.com/courses/128966/files/12276036/preview" alt="Friday" width="225" height="225" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276036" data-api-returntype="File" /></a>&nbsp;&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"><img role="presentation" src="https://u46.instructure.com/courses/128966/files/12276479/preview" alt="Canvas Front Page Quote.png" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276479" data-api-returntype="File" />&nbsp;</p>
<p style="text-align: center;"><img src="https://u46.instructure.com/courses/128966/files/12275920/preview" alt="What Are We Learning?
Click on the links below for access to outlines for our current integrated curriculum unit and math module. If you&rsquo;re looking for the curriculum overview for the year, visit the Course Information page OR click the Units of Study button at the bottom of the page for direct access." data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12275920" data-api-returntype="File" />&nbsp;</p>
<p style="text-align: center;"><a title="Units of Study - Integrated Curriculum Unit 2" href="https://u46.instructure.com/courses/128966/pages/units-of-study-integrated-curriculum-unit-2" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/pages/units-of-study-integrated-curriculum-unit-2" data-api-returntype="Page"><img src="https://u46.instructure.com/courses/128966/files/12276072/preview" alt="Integrated Curriculum Unit" width="900" height="101" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276072" data-api-returntype="File" /></a>&nbsp;</p>
<p style="text-align: center;"><a title="Units of Study - Math Module 1" href="https://u46.instructure.com/courses/128966/pages/units-of-study-math-module-1" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/pages/units-of-study-math-module-1" data-api-returntype="Page"><img src="https://u46.instructure.com/courses/128966/files/12276085/preview" alt="Math module" width="900" height="101" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276085" data-api-returntype="File" /></a>&nbsp;</p>
<p style="text-align: center;"><a title="Reader's Workshop Homepage" href="https://u46.instructure.com/courses/128966/pages/readers-workshop-homepage" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/pages/readers-workshop-homepage" data-api-returntype="Page"><img src="https://u46.instructure.com/courses/128966/files/12276651/preview" alt="Canvas - Front Page Readers Workshop.png" width="1093" height="123" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12276651" data-api-returntype="File" /></a></p>
<p style="text-align: center;">&nbsp;</p>
<table style="border-collapse: collapse; width: 100.798%; height: 90%;" border="0">
<tbody>
<tr>
<td style="width: 19.9869%; text-align: center;"><img src="https://u46.instructure.com/courses/128966/files/12284292/preview" alt="Slide7.PNG" width="249" height="140" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284292" data-api-returntype="File" />&nbsp;&nbsp;</td>
<td style="width: 19.9869%; text-align: center;">&nbsp; <img src="https://u46.instructure.com/courses/128966/files/12284283/preview" alt="Slide5-2.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284283" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;">&nbsp; &nbsp;<img src="https://u46.instructure.com/courses/128966/files/12284293/preview" alt="Slide10-1.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284293" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;">&nbsp; &nbsp;<img src="https://u46.instructure.com/courses/128966/files/12284294/preview" alt="District Required Canvas Mini Buttons.png" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284294" data-api-returntype="File" /></td>
<td style="width: 19.9869%; text-align: center;">&nbsp; <a class="inline_disabled" href="https://www.u-46.org/FoxMeadow" target="_blank" rel="noopener"><img src="https://u46.instructure.com/courses/128966/files/12284285/preview" alt="Slide11.PNG" width="250" height="141" data-api-endpoint="https://u46.instructure.com/api/v1/courses/128966/files/12284285" data-api-returntype="File" /></a></td>
</tr>
</tbody>
</table>

[Chris_Hofer · Accepted solution]

@JenniferStrasse ...

Thanks for sharing the code.  I am not able to see many of the images within your tables because they are located on servers that I don't have access to.  Not a big deal, though.  I looked at your code, and I *think* this might be the issue...

If you take a look at the highlighted text in line 9, that code isn't found in lines 6, 7, or 8 (which I assume are the other buttons to the left of "Reassessment Policy".  You might also try removing the yellow highlighted text and move the orange &nbsp; (non-breaking spaces) up to where that yellow text used to be.  Essentially, maybe try to make line 9 look more like lines 6, 7, or 8.

You might want to try all of this in a separate non-published page in your course...something that only you can see.  Once you know it is working properly, then you can paste the corrected page into your actual page that you want students to see in your course.

Keep us posted here in the Community...thanks!

[JenniferStrasse]

YOU ARE MY HERO!! Duplicating the &nbsp; set and moving it up into line 9 fixed the problem. THANK YOU!!