title: Dynamicly loading css files for popup window
body: <p>I have a page where I want onclick to show users kind of popup styled with css. <br />
  Every popup is html fetched via ajax from php backend and most of them need different css file. I can`t include all css files in the begining, because some overwrite others, so I have to dynamicly load specific css for specific html. <br />
  So I typed this</p>
  
  <blockquote>
    <p>file1: <br />
    link type="text/css" rel="stylesheet" href="/css/popup1.css" <br />
    <br />
    file2: <br />
    link type="text/css" rel="stylesheet" href="/css/popup2.css" <br />
    etc.
    <br />
    at the begining of every html popup.</p>
  </blockquote>
  
  <p>this works, most of the time, but sometimes it looks like css is ignored and the html is displayed at the bottom of the page unstyled.</p>
  
  <p>I tried load the css file and append it to head before fetching html like this:</p>
  
  <pre>
  var css = document.createElement("link"); <br />
          $(css).attr('type', 'text/css');
  
          $.get('/css/popup1.css', function(result){
  
              $(css).html(result);
              $('head').append(css);
  
              $.get('/fetchHtmlPopup.php', function(data){
                  $(cotainer).html(data);
                  $(container).fadeIn('fast');
              });
          });
  </pre>
  
  <p>This seemed to work, but actualy this way fails sometimes too and I still have no idea what causes this code somethimes to work ok, sometimes to fail.<br />
  What bothers me the most is the fact that both solutions work, sometimes they don<code>t I can</code>t find a specific action to cause this.</p>
  
  <p>Anybody has any idea what should I do ?</p>