title: jquery modal -- well that's ugly, what's wrong with my modal?
body: <p>I created a quick modal dialog window and when I open it in FireFox, there's a non-faded band that goes right across the screen (see <img src="https://i.stack.imgur.com/Z2oXE.png" alt="here">). This doesn't happen in Chrome.</p>
  
  <p>Any idea what's going on?</p>
  
  <hr>
  
  <p>jquery:</p>
  
  <pre><code>  $("#add_route").click(function(){
      $("#create_route").dialog("open");
    });
  
    $("#create_route").dialog({
      autoOpen: false,
      height: 300,
      width: 200,
      modal: true,
      buttons: {
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="create_route" title="Create New Route"&gt;
    Please choose a lead for this new route:&lt;br&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Added <a href="http://jsfiddle.net/sajjansarkar/RHkWh/1/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <hr>
  
  <p>Naturally, it works on jsfiddle, but not on my project....</p>