Simplify .update-img layout

Fixes #424.

Using a float rather than table-cell styling also means we
no longer have to work around IE7 table display support.

3 files changed, 10 insertions, 35 deletions

diff --git a/templates/web/base/report/update.html b/templates/web/base/report/update.html
index 048968eae..a5fd97870 100644
--- a/templates/web/base/report/update.html
+++ b/templates/web/base/report/update.html
@@ -6,17 +6,19 @@
         [% INCLUDE meta_line %]
     </em></p></div>
 [% IF NOT update.whenanswered %]
+
+    [% INCLUDE 'report/photo.html' object=update %]
+
     <div class="update-text">
         [% add_links( update.text ) | html_para %]
 
-        [% INCLUDE 'report/photo.html' object=update %]
-
         [% IF c.cobrand.allow_update_reporting %]
         <p align="right">
             <small><a rel="nofollow" class="unsuitable-problem" href="[% c.uri_for( '/contact', { id => update.problem_id, update_id => update.id } ) %]">[% loc('Offensive? Unsuitable? Tell us') %]</a></small>
         </p>
         [% END %]
     </div>
+
 [% END %]
     </div>
 [% '</div>' IF loop.last %]
diff --git a/templates/web/fixmystreet/report/update.html b/templates/web/fixmystreet/report/update.html
index a400b2416..847277dfd 100644
--- a/templates/web/fixmystreet/report/update.html
+++ b/templates/web/fixmystreet/report/update.html
@@ -28,6 +28,7 @@
                     <p class="meta-2"> [% INCLUDE meta_line %] </p>
                 </div>
             [% ELSE %]
+                [% INCLUDE 'report/photo.html' object=update %]
                 <div class="update-text">
                     <div class="moderate-display">
                         [% add_links( update.text ) | html_para %]
@@ -50,7 +51,6 @@
                         [% END %]
                     </p>
                 </div>
-                [% INCLUDE 'report/photo.html' object=update %]
             [% END %]
             </div>
             [% IF moderating %]
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 8e2a65d1b..b4c4d18da 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -822,35 +822,14 @@ a:hover.button-left {
     padding: 0.5em 1em;
     display:block;
     .update-wrap {
-      display:table;
-      width:100%;
-      .update-text,
-      .update-img {
-        display:table-cell;
-        vertical-align:top;
-        p {
-          margin-bottom: 0.5em;
-        }
-      }
-      .update-img {
-        text-align:right;
-        img {
-          margin:-0.5em -1em 0 0.5em;
-          height:auto;
-        }
-      }
+      @include clearfix;
     }
-  }
-}
-//display:table fixes
-.ie7, .ie7 {
-  .issue-list li .update-wrap {
-    .update-text {
-      float:left;
-      width:19em;
+    .update-text p {
+      margin-bottom: 0.5em;
     }
     .update-img {
-      float:right;
+      float: right;
+      margin: 0.5em 0 0.5em 1em; // gutter between text and floated image
     }
   }
 }
@@ -966,12 +945,6 @@ a:hover.button-left {
     }
   }
 }
-//bit of a hack - as we can't use em's, push the span out to the right
-//by how much it would be if the user did not resize the text
-.issue-list li .update-wrap .update-img a span {
-  right:-16px;
-  top:-8px;
-}
 
 .problem-header {
   margin-bottom:1em;