Frames in Internet Explorer 9: CSS styles not loaded correctly <p>I have a web site with URL <a href="http://myapp.herokuapp.com/welcome.php" rel="nofollow">http://myapp.herokuapp.com/welcome.php</a> and I am redirecting a domain www.example.com to that PHP page as FRAME. When I try to load www.example.com from IE9, I get this error:</p> <pre><code>CSS3111: @font-face encountered unknown error. abeatbyKai.TTF </code></pre> <p>That font is placed here: <a href="http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF" rel="nofollow">http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF</a></p> <p>My CSS file is called from welcome.php like this:</p> <pre><code>&lt;link rel="stylesheet" href="css/iflikeu.welcome.0.1.css" type="text/css" /&gt; </code></pre> <p>This is the code of my CSS:</p> <pre><code>@font-face { font-family: 'abeat'; src: url(../common/fonts/abeatbyKai.TTF); } </code></pre> <p>If I enter as <code>src: url('http://myapp.herokuapp.com/common/fonts/abeatbyKai.TTF');</code> still doesn't work.</p> <p>Another example: this image is loaded from welcome.php like this</p> <pre><code>&lt;a id="enLang" class="btn lang_flag" href="#" onclick="changeLanguage('userLangWelcome','en');"&gt;&lt;img src="common/images/flags/en.png"/&gt;&lt;/a&gt; </code></pre> <p>On the CSS file, this is the code:</p> <pre><code>.lang_flag img { width: 25px; height: 12px; vertical-align: middle; } </code></pre> <p>However, the image is not displayed. Just the button (<code>btn</code>).</p> <p><strong>This error only occurs in IE when there is a FRAME redirection.</strong> If I load directly <a href="http://myapp.herokuapp.com/welcome.php" rel="nofollow">http://myapp.herokuapp.com/welcome.php</a> from IE it works, and www.example.com from any other browser works as well.</p> <p>Any ideas? Thanks</p>