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?

There's probably Javascript or an extension overriding the styles. — Barmar, Sep 14 '13 at 00:55
post the whole code! no can answer perfectly your mistake by just looking css! — Brijesh Gajjar, Sep 14 '13 at 01:53
I had the same kind of issue. It was my JavaScript so I put a timeout function set to execute 3 seconds after the page was loaded and it worked everytime since. — Ryan Walker, Jun 04 '18 at 19:19

Federico Alvarez · Answer 1 · 2018-08-07T14:11:25.727

7

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.

edited Aug 07 '18 at 14:11

answered Aug 07 '18 at 03:30

Federico Alvarez

1,459
1
19
30

1

That's exactly what I needed, put all custom initial css in a file and import it via HEAD to be applied when the page is refreshed...thank you ! – Shessuky Nov 30 '19 at 22:23
1

Your answer still useful in 2023 – jitvimol Jun 05 '23 at 06:43

score 4 · Answer 2 · answered Sep 14 '13 at 02:00

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.

score 2 · Accepted Answer · answered Sep 14 '13 at 12:41

2

If you load the page with Chrome DevTools closed, open DevTools, then refresh the page, and you have the setting "Disable cache (while DevTools is open)" checked, this could explain your experience.

answered Sep 14 '13 at 12:41

Ethan Selzer

1,757
15
14

score 1 · Answer 4 · answered Oct 11 '13 at 13:05

Check that you don't have content being added inside your <head> before the reference to your stylesheet.

I had this exact same problem on my Win7 box with IE9; that is, my styles were not being applied until I did a refresh. On my XP box with IE8 the problem did not occur; the styles were applied on initial load.

Additional info, may be helpful: Being new to master pages, I was following along "Beginning ASP.Net 4". The example has you add a ContentPlaceHolder in the <head> just before the link to your stylesheet (pg. 200, step 4). The example CPH is empty. Then they have you add the asp:Content ID="Content1"... to your ASPX on pg. 203. I put 'Content1' inside this tag, which put 'Content1' before the stylesheet link in the browser output. This was not in the instructions, I was seeing if it would display in the browser (it does). I had been refreshing all along, so the apply-stylesheet-only-on-refresh issue did not appear until much later. Removing 'Content1' on my ASPX fixed the problem -- maybe some other guru can tell us why IE9 (but not IE8) stops processing <head> content when it encounters a problem on initial load, but not on refresh.

Hope this fixes your problem!

score 0 · Answer 5 · answered Jan 04 '14 at 07:46

I just solved this same exact issue.

My code looked like this while I was getting the error: (Simplified to leave out -webkit -moz etc)

<div style="width: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.2) 100%), url('relativePathToImg.png') repeat 0 0;">

What I did was use the chrome dev tools, inspected the div then selected the "Computed" tab, not the "Styles" tab. I noticed that chrome computed the css as this:

background-image: linear-gradient(rgba(255, 255, 255, 0.701961) 0%, rgba(255, 255, 255, 0.2) 100%), url(http://mywebsite.com/);

For unknown reasons the relative url was translated into the sites root url, thus the css was looking for an image at the wrong url. I then replaced the "relativePathToImg.png" with the absolute path to the image. This fixed the problem for me.

I noticed you don't explicitly list an image in your code above however you said styles are applied elsewhere. Take a look at the "computed" tab in the dev tools and see what really is going on.

The CSS style not applied until refresh

5 Answers5

Linked