CODEWITHSUNDEEP
htmlcss
Oscar Godson
Oscar Godson

Reputation: 32716

Two Linked CSS Files Not working

<head>

    <title>Water Bureau</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="/css/main.css" type="text/css" media="screen" title="Main CSS">
    <link rel="stylesheet" href="custom.css" type="text/css" media="screen" title="Custom Styles">
    <script language="JavaScript" src="/shared/js/createWin.js" type="text/javascript"></script> 

</head>

Thats the code, but the "custom.css" isn't working. It doesn't work at all. If we add a @import into main.css OR into the header instead of a it works fine though. Any ideas? We also got rid of the media="screens" on both as well.

The CSS inside of it is working fine, it's just when we stack those two, the first one parsed is the only one read by the browser. So if we swap main below custom, custom than works but NONE of main works. and custom just has snippet of CSS, and doesn't override all the CSS in main, just 1 element.

I can't figure it out! We have other ed stylesheets in the head (which we took out for trying to fix this) and they worked fine...

Upvotes: 0

Views: 2562

Answers (4)

robalan
robalan

Reputation: 113

GaVra, you were right about the doctype, etc. We should have known that, given the HTML5 doctype was being used and probably isn't quite ready for action.

Thanks!

Upvotes: 0

Gavrisimo
Gavrisimo

Reputation: 1837

Like hsource said, try validating both css files.

http://jigsaw.w3.org/css-validator/

Also just try this, without that title thing with both css files in same folder, both relative to the page which is importing them:

<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />

It also might be that because you are not using any doctype and also you are not closing your link tags, something related to that might be your problem. So try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="css/custom.css" media="screen" />
</head>

Upvotes: 1

Zackman
Zackman

Reputation: 314

This might be due to the way CSS handles style precedence, but might as well be caused by bad markup. Try validating your document or using an absolute path for the custom.css stylesheet.

Upvotes: 0

phsource
phsource

Reputation: 2446

There's a two places that I think may be the problem:

  1. The href for custom.css currently points to a location in the current directory of the HTML file. If custom.css is in the /css directory like main.css, you'd have to add that. The file is included when you use an@import tag because the @import is relative to main.css, and it can find custom.css in the same directory as main.css

  2. There's an unclosed CSS tag or something that is breaking all the CSS coming after it; this is pretty unlikely, but you can verify your CSS with the W3.org CSS validator.

Upvotes: 1

Related Questions