CODEWITHSUNDEEP
htmlcssfirefox
user2902115
user2902115

Reputation: 1

Firefox won't load my CSS

Firefox won't load a portion of my website, I'm having problems loading the CSS I think. Chrome and IE all load them fine.

http://zionscape.net/landing/RuneScape%20Fanpage/index.html Loads perfect in Chrome.

<!DOCTYPE html>
<HEAD>
       <BODY bgcolor="#000000">


        <title>Site - Home</title>
        <link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
        <link href="css/style.css" type="text/css" rel="stylesheet" /

Upvotes: 0

Views: 305

Answers (2)

JSW189
JSW189

Reputation: 6335

The CSS is loading properly in Firefox, but there are bugs in your CSS that are not being rendered in Firefox (but are being rendered in IE/Chrome). Take a look at the Firefox Web Console; it lists the line numbers in bootstrap.css that are not being rendered.

To use the Web Console, go to:

Tools --> Web Developer --> Web Console

These are four of the errors listed in Web Console:

[14:30:32.700] Expected declaration but found '*'.  Skipped to next declaration. @ http://zionscape.net/landing/RuneScape%20Fanpage/css/bootstrap.css:3462
[14:30:32.700] Expected end of value but found '\9 '.  Error in parsing value for 'background-color'.  Declaration dropped. @ http://zionscape.net/landing/RuneScape%20Fanpage/css/bootstrap.css:3467
[14:30:32.700] Expected declaration but found '*'.  Skipped to next declaration. @ http://zionscape.net/landing/RuneScape%20Fanpage/css/bootstrap.css:3472
[14:30:32.700] Expected declaration but found '*'.  Skipped to next declaration. @ http://zionscape.net/landing/RuneScape%20Fanpage/css/bootstrap.css:3473

The number at the end refers to the line number of the syntax error. For example, bootstrap.css:3473 means there is an error in line 3473 of bootstrap.css.

Here is the CSS of the above four errors, with the issues pointed out as comments:

.btn-inverse.disabled,
.btn-inverse[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515; // Issue here is the *
}

.btn-inverse:active,
.btn-inverse.active {
  background-color: #080808 \9; // Issue here is the "/9"
}

button.btn,
input[type="submit"].btn {
  *padding-top: 3px; // Issue here is the *
  *padding-bottom: 3px; // Issue here is the *
}

Upvotes: 0

Andrew
Andrew

Reputation: 2011

The webpage is probably cached in Firefox. Try clearing your browser cache by pressing ctrl + shift + del. Check "cache" and click "Clear now." You also want to put your css files in the <head>, not <body>. It would look like:

<head>
    <title>Site - Home</title>
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet" />
    <link href="css/style.css" type="text/css" rel="stylesheet" /
</head>
<body bgcolor="#000000">
    ...
</body>

Upvotes: 1

Related Questions