CODEWITHSUNDEEP
htmlcss
swot
swot

Reputation: 278

html does not load css file in some browsers

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-->

Upvotes: 2

Views: 675

Answers (1)

Quentin
Quentin

Reputation: 943563

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.

Upvotes: 2

Related Questions