.

anatomy/static/css/anatomy.css

@@ -12,13 +12,17 @@ a, a:link {
 }
 
 .answer-list {
-  font-size: 30px;
+  font-size: 25px;
   user-select: none;
   -webkit-user-select: none; /* Chrome/Safari */        
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+ */
 }
 
+.answer-list .answer:hover{
+  z-index: 99999;
+}
+
 .answer-list .correct {
   color: green;
 }
@@ -148,6 +152,7 @@ button a {
 #dicom-image {
   width: 100%;
   height: 600px;
+  z-index: 0;
 }
 
 #dicom-image.marking-dicom {

anatomy/templates/anatomy/mark.html

@@ -14,7 +14,7 @@
         Unmarked:
         <ul id="new-answer-list" class="answer-list">
             {% for answer in user_answers %}
-            <li><span class="answer not-marked">{{ answer }}</span></li>
+            <li><pre><span class="answer not-marked">{{ answer }}</span></pre></li>
             {% endfor %}
         </ul>
         Marked:
@@ -23,10 +23,10 @@
             <li><pre><span class="answer correct">{{ answer }}</span></pre></li>
             {% endfor %}
             {% for answer in half_mark_answers %}
-            <li><span class="answer half-correct">{{ answer }}</span></li>
+            <li><pre><span class="answer half-correct">{{ answer }}</span></pre></li>
             {% endfor %}
             {% for answer in incorrect_answers %}
-            <li><span class="answer incorrect">{{ answer }}</span></li>
+            <li><pre><span class="answer incorrect">{{ answer }}</span></pre></li>
             {% endfor %}
         </ul>
         <div class="answer-list key">Key: <span class="correct">2 Marks</span>, <span class="half-correct">1