The CSS style not applied until refresh

Question

I have a webpage with the following CSS style that overrides some higher level styles.

#pnlActions { 
    background-image: -webkit-gradient(linear,left top,left bottom,from(#000),to(#000));
    background-image: -webkit-linear-gradient(#000,#000);
    background-image: -moz-linear-gradient(#000,#000);
    background-image: -ms-linear-gradient(#000,#000);
    background-image: -o-linear-gradient(#000,#000);
    background-image: linear-gradient(#000,#000);               
}

The odd thing is that the first time I load the page, the styles are completely ignored until I refresh the page - then the styles are applied. Then I'll quit the browser, load the page again and the styles are no longer applied (until I refresh the page).

I can tell all this from chrome/firefox/ie browser tools.

I am at a complete loss to explain why this is happening. Any ideas?

Answer 1

A couple of years later, but this is how I solved it.

For some reason having the STYLE inside the HEAD tag (Internal CSS) was only working after a refresh.

But adding it as a LINK (External CSS) solved it. Now it works from the first run.

Inside the CSS I added !IMPORTANT to the styles because I needed to override some other elements, just like the OP.

For those who have doubts on how to add Internal or Extenal CSS, please check this link.

Answer 2

Try appending the following php code to your .css file in the header. Your file must have the extension of .php for this to work.

<link rel="stylesheet" type="text/css" media="screen" href="your.css?<?php echo time(); ?>" />

That will rule out caching of the style sheet.