Here's why it breaks. When it transcludes the {{Mission Clue}} template, the first few lines are:
<div style="margin: 0.5em;">
{|style="background-color: #F4F4F4; border: 1px solid #AAAAAA;"
Since we have a colon in the front, we then get this:
:<div style="margin: 0.5em;">
{|style="background-color: #F4F4F4; border: 1px solid #AAAAAA;"
The colon only is intended to be used on single lines. So the above turns into this html code:
<dl><dd><div style="margin: 0.5em;">
</dd></dl>
<table style="background-color: #F4F4F4; border: 1px solid #AAAAAA;">
So it opens DL, DD, and DIV, then closes DD
before the DIV gets closed. That's invalid HTML and that's where everything gets screwed up.
There's not really any way for us to make the template work with a colon, and we'll likely find that any other template with multiple lines will break the same way if used with the colon. To work around this defect, I've added {{
Indent}}, which works on multi-line input.