html does not load css file in some browsers

Question

My html does not load the css style file. The preview povided by Eclipse correctly shows the changes I made in the css file. If I am loading the file with Firefox on the other hand these changes are gone. This also hapens if loaded on another machine. I emptied my cache etc. (using CCleaner). However if I load the html file with IE all changes are visible. Intrestingly this is only the case for colors.

I include the css file using the following line:

<link rel="stylesheet" type="text/css" href="./css/style.css" />

The releveant css lines:

 #menubar
{ width: 920px;
height: 50px;
text-align: center; 
margin: 0 auto;
background:     #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d); 
border-radius: 15px 15px 15px 15px;
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border: 15px 15px 15px 15px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}

The lines in html:

<div id="menubar">
  <ul id="menu">
    <li class="current"><a href="index.html">Home</a></li>
    <li><a href="PracticalInfo.html">Practical Information</a></li>
    <li><a href="people.html">People</a></li>
    <li><a href="programme.html">Programme</a></li>
    <li><a href="contact.html">Contact Us</a></li>
  </ul>
</div><!--close menubar-->

So it only works in IE and not in any other browser? What IE version are you running? And this is only for colors? Could you please post your CSS file and the HTML where you are using your CSS. — user1021726, Nov 25 '13 at 09:32
What does Firebug have to say? Does your server log show FF asking for the CSS? Did you try holding the Shift key for the reload command, to trigger a full reload? — Christopher Creutzig, Nov 25 '13 at 09:33
Are you sure you don't use any html `conditional comments` like ` — super, Nov 25 '13 at 09:39
@ChristopherCreutzig My server log shows, that I the ``css`` file gets loaded ``"GET /css/style.css HTTP/1.1" 304 - "http://localhost/index.html" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:25.0) Gecko/20100101 Firefox/25.0"`` and a reload using shift shows that it is using the correct file but does not load the colors — swot, Nov 25 '13 at 09:42
What *exactly* are you changing that isn't showing up in Firefox? — Quentin, Nov 25 '13 at 09:42
@Quentin I have changed the color to blue ``#000099`` but it remains in the original grey color that was there before — swot, Nov 25 '13 at 09:45
You can find the revalent answer here http://stackoverflow.com/questions/9480773/html-not-loading-css-file — MD Shahrouq, Apr 25 '17 at 06:12

score 2 · Accepted Answer · answered Nov 25 '13 at 09:46

Based on the comment:

I have changed the color to blue #000099 but it remains in the original grey color that was there before

You have 4 rules to set the background colour.

background:     #000099;
background: -moz-linear-gradient(#535353, #1d1d1d);
background: -o-linear-gradient(#535353, #1d1d1d);
background: -webkit-linear-gradient(#535353, #1d1d1d);

Each one is applied in turn and ignored if the rule isn't supported by the browser.

You are only changing the first rule, which is the only rule supported by IE.

Since Firefox supports -moz-linear-gradient that continues to override the previous background colour rule, so it gets ignored.

You need to change your gradient rules too.

Note, however, that the -prefix- rules are experimental and should generally be avoided for production work and that you are missing an unprefixed linear-gradient for use in browsers which have their final implementation of the property. Support for prefixed rules will be dropped at some stage.

Thanks, this did the job. However I am not getting exactly what you meant by the last paragraph. Could you explain this to me again? — swot, Nov 25 '13 at 09:51
`-prefix-` stuff is experimental, unstable and support for it will go away. — Quentin, Nov 25 '13 at 09:52
It's recommend being very careful about using them, and not neglecting the unprefixed version if you do use them. — Quentin, Nov 25 '13 at 09:53

html does not load css file in some browsers

1 Answers1