CODEWITHSUNDEEP
css
Deviland
Deviland

Reputation: 3374

Two CSS files linked, only one is being used, other is ignored

When loading two CSS files via an include I am only seeing one of them being used. The other isn't being included and I don't know why.

I have a standard header file which is included on all of the site's pages.

Example below:

<html>
<head>
<link href="css/jquery-ui.css" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

This is of course a cut down version of the header for simplification. As you can see both CSS files are within the css directory. but only the main CSS file is being recognised.

Upvotes: 0

Views: 308

Answers (4)

Maxim Krizhanovsky
Maxim Krizhanovsky

Reputation: 26739

You are missing the rel attribute in the first link tag, and most likely this is the reason it's not being parsed as CSS.

Upvotes: 2

phihag
phihag

Reputation: 288260

Either one of the CSS files cannot be loaded (probably because of a typo or a server misconfiguration). You can detect that by checking that all resources are properly loaded in the developer tools of your browser.

The other cause may be that you're implicitly expecting your own stylesheets to take precedence over the default jQuery UI ones. If that's the case, move your own stylesheets under the jQuery UI one, or make your rules more specific than the default ones.

This is a simple demo that shows that your example works.

Solution:

In your live example, you're missing rel=stylesheet for the jQuery UI stylesheet:

<link href="css/jquery-ui-1.8.13.custom.css" type="text/css"/>

should be

<link href="css/jquery-ui-1.8.13.custom.css" type="text/css" rel="stylesheet" />

Upvotes: 4

Scott
Scott

Reputation: 2793

You're certain the second file is linked correctly? Check Firebug's NET panel, for instance, to double-check that it's loading and not returning a 404 error or somesuch.

You wouldn't be the first developer to be brought down by an unintentional typo!

Upvotes: 0

Tom Walters
Tom Walters

Reputation: 15616

Looks like you forgot to close you link tags, just add a forward slash '/' before the closing of both tags.

Upvotes: 0

Related Questions