CSS problem within loaded div with Ajax

Question

I am having trouble with the CSS when I load a page into div.

Firefox loads CSS perfectly, but in Chrome, it does not load the CSS styles of the loaded page.

It only works when I apply style with the element, for example

<table style="left:100px;top:50%;position:fixed">

Only this way does it work in Chrome.

But this doesn't work:

<style type="text/css">
.mystyle {
    left:100px;
    top:50%;
    position:
    fixed;
}   
</style>
<table class="mystyle">

Is there a way to fix this?

Answer 1

Did you forget a ; on the end of fixed?

<table style="left:100px;top:50%;position:fixed;">

Answer 2

I'm guessing the page you are loading via AJAX has its own styles in the head of that page. While that could/should work, I suggest putting all the styles for your site in one or more external style sheets and load them at every page. When you then load HTML content in a div via AJAX, the styles will already be there and will be applied to the new content.

Putting styles in an external stylesheet is, in most cases, the best practice for a number of reasons.

Answer 3

I would be curious to see if this:

<style type="text/css">
    .mystyle {
        left:100px;    
        top:50%;    
        position:    
        fixed;
    }

       </style>

would work if it were to be formated as:

<style type="text/css">
.mystyle 
{
   left: 100px;    
   top: 50%;    
   position: fixed;
}
</style>
<table class="mystyle">

BUT, as others suggest, I would prefer to see it in an external style sheet file and linked in that way.