Weird behavior of jQuery UI Explode in Internet Explorer

Question

I'm trying to show an background-image after a user clicks on a box. (I know I'm a bit lazy on the CSS)

<script type="text/javascript">
$(document).ready(function() {
     var options = {};
     $(".toggler1").click(function() {
      $("#effect1").effect("explode",options,1000);
      $(".toggler1").html("<div id='effect1b' style='float:left;width:207px;height:153px;></div>");
      return false;
     });
});
</script>

The image container is

<div class="toggler1">
    <div id="effect1" style="float:left;width:207px;height:153px;border:none;">
     <p>
     </p>
    </div>
</div>

The stylesheet is simply

<style type="text/css">
    #effect1b {
    background: url("2_01.jpg");
    } 
</style>

Why would this work in Firefox but not in IE? I think I'm going slightly insane!

Answer 1

Your HTML is malformed. It is missing a closing quote.

$(".toggler1").html('<div id="effect1b" style="float:left;width:207px;height:153px;"></div>');