jquery html() not working on positioned element in Chrome

Question

I have a paragraphed named dialog I am trying to add content to via ajax. The element is positioned like so:

<div id="modal" style="height:100%; width:100%; position:fixed; z-index:1; left:0; top:0; display:none;">

 <div style="position:fixed; top:50%; left:0; width:100%;">
     <div style="height:150px; width:300px; margin:auto;">
         <div>Processing</div>
            <div>
            <p id="dialog">Please Wait...</p>
            </div>
        </div>
    </div>

</div>

Note I am calling:

$('#modal').show("fast");

before trying to add content to it.

Then I try to add to the dialog paragraph like so:

$.post(
  'processor.php', 
  queryString, 
  function(data){
   alert('data:'+data);
   $('#dialog').html(data);
  }
 )

It does not innerHTML to the dialog paragraph. I tried adding the content to a different element that is not positioned, and it worked fine.

Anyone know why this is not working? or have a fix?

P.s. I know I should move my styles to a style sheet, I usually do that at the end.

Update

I wanted to let you know I only have 1 dialog id and it actually IS removing the text inside #dialog just not adding anything.

Also I am calling this in document.ready

You can see the page here click the submit button on the very bottom to see it happen.

update2

This is working correctly in FF and IE, its only not working in chrome.

Answer 1

 $(document).ready(function() {
   // do stuff when DOM is ready

   //Is your code called inside here or after this function is executed? 
   //If not, it should be.
 });

Answer 2

if you view the console log, the text is there. try add css to the dialog something like :

#dialog { display:block; width:auto; height:auto;}

Answer 3

Hiding it, then changing the text, then showing it again seems to get it to work. You have to animate both the hide and the show to get it to work tho:

$('#mydialog').hide("slow",function(){
                $('#mydialog').html(data);
                $('#mydialog').show("slow");
            });

It doesn't look very elegant tho. I would prefer a better fix if someone has one.

edit:

A better looking work around I came up with is using 2 dialogs and toggling them as I change the text.