CSS in ajax-loaded content is not applied

Question

Sorry if this is obvious but I just don't know what more to do.

I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.

CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.

How can I fix this without having to apply individually each element's css with jQuery .css() calls?

Thank you

Note: I know this may be over-duplicated, but I still haven't found the right solution.

Edit: Ajax-loaded content is inside an iframe

Answer 1

Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.

Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.