jquery dialog box content aligns only for first request

Question

JSP File

 <a  href="#" onclick="pop('terms')> Terms of Use </a>
 | <a  href="#"  onclick="pop('privacy')"> Privacy Policy </a>
 | <a  href="#"  onclick="pop('contact')"> Contact Us / Advertise  


 <div id="dialog"> </div>

JS File

 function pop(url){
  $("#dialog").dialog({
     modal:true,
     height:450,
     width:600,
     open: function(){
        if(url=="privacy")
        $("#dialog").load('/temp_privacy.jsp');
        if(url=="contact")
            $("#dialog").load('/temp_contact.jsp');
        if(url=="terms")
            $("#dialog").load('/temp_terms.jsp');
    },
       title: url.toUpperCase(),
    close: function(){
        $("#dialog").dialog('destroy');
    }
});

For a First request dialog box opens up with text align at the left , top for every second and subsequent request alignment in dialog box is totally random , I am not able to understand what causes this behavior ?

Answer 1

without seeing your code, when you load pages like an ajax request your contents css is gettin g overridden somewhere from the rest of your body. make sure all your ids are unique and are not being styled elsewhere even in your jsp files. same with classes make sure they dont have some alt css that is being used by the same class somewhere else in your document