Log in

View Full Version : css works inline but not in a css file


Richiedude
12-09-2009, 09:58 PM
How come some css works in a css file and some doesn't?

in particular - using background-image: url('path to image')??

when i inlclude it in style tags in the document, it works?

but when i move it to the css file - it doesn't!

ideas?

is it a document type issue?
bluewalrus
12-09-2009, 10:34 PM
Post your code or a link.
Richiedude
12-10-2009, 11:43 PM
this works . . .



<!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" lang="en" xml:lang="en">
<head>
...(more stuff)
<link rel="stylesheet" type="text/css" href="css/main.css">
...(more stuff)
</head>
.
.
.
<style>
#topsection{
background-color: #3399cc;
background-image: url('images/banner-back.gif');
height: 65px; /*Height of top section*/
}
</style>

.
.
.

<div id="maincontainer">

<div id="topsection">
<div class="innertube">
<div id="logoimage">
<img border="0" src="images/howto-algebra.png" width="250" height="65">
</div>
</div>
</div>
.
.
.
[more stuff]



. . . but when the code in the style tags is moved into the css file, the background for the topsection div no longer works.
bluewalrus
12-11-2009, 12:01 AM
so the main.css doesn't work in this example but the #topsection (you should put this in the head of the document, unless you cant) does?

Whats is your directory structure like?

If this page is located at



http://www.domain.com/test/this_page.html

then this main.css should be in


http://www.domain.com/test/css/main.css

if you want it from the root call it with this


<link rel="stylesheet" type="text/css" href="/css/main.css" />
djr33
12-11-2009, 12:47 AM
I wonder if this could be a problem related to the location of the image. I don't recall how relative paths work in CSS, but if the css is in a different directory than the html file, you may need to use a path relative to that for the image to be properly included. This may vary depending on how exactly everything is put together.
jscheuer1
12-11-2009, 06:12 AM
When using a relative path in an external css file for background-image, it must be relative to the css file, not to the page that uses the css file. To avoid confusion (if any), the absolute path to the image may be used.
Richiedude
12-11-2009, 01:33 PM
goddamn it f*ck me that was it path in css must be relative to css so in the css it should be:



background-image: url('../images/banner-back.gif');
jscheuer1
12-11-2009, 03:05 PM
I'm not sure if that was a question or not. If so, the answer is yes. BTW, watch the language please.