CSS inside a div gets applied only when mouse pointer changes position in IE7

I have some jQuery ajax tabs and within one of the tabs I open a link containing a div, some jQuery and a link to a CSS file, ie

<link type="text/css" rel="stylesheet" href="url_to_css"></link>
<div>
... some code here
</div>
<script type="text/javascript" src="url_to_javascript"></script&g开发者_StackOverflow社区t;

Every browser except IE7 applies the CSS instantly, but IE7 applies it only when the mouse pointer moves.

I fixed it by loading the CSS in the parent div (the one that's loaded before the div that should be loading the css is opened)

I had the same linking problem.

At this moment, I am moving my link tags into the head tag at the moment they are being loaded.

So:

1. OnLoadingTheNewTab
2. Fetch all link tags
3. Put the link tags inside the head tag.
4. add a reference of $.data(link, 'dynamic', true);

On every change of the tab, you can go through all your link tags in the head and check if they where dynamically loaded. If so, delete them again, because the tab was unloaded.

Seems to work pretty fine for me.