Weird IE7 div resize float bug? Form buttons remain fixed!

Question

I have a form:

<form>
<div id=content> form content (fields, etc) </div>
<div id=buttons> 
  <table>
    <tr>
      <td>submit button</td>
      <td>cancel button</td>
    </tr>
  </table> 
</div>
</form>

When I display error messages, the content div gets a bit bigger in height to fit in the error messages.

The weird thing is, in IE7 ONLY, the buttons div gets pushed down as it should, but the buttons remain fixed, thus the top content div is overlapping the buttons by a bit!! HOWEVER, if I move my mouse over the buttons (I assume it's triggering a hover?), they move themselves down.

wtf?

Answer 1

You could try using this to see if a forced redraw will correct things.