My images won't display on the internet, though they do on my desktop.

[NornEtaro]

I can't figure out my problem... I have images that won't display at http://www.urigaming.org/uricon/ , but only when I'm viewing the pages from the web. Viewing from the desktop, it works fine. The image being referenced is in the same folder, and functionally equivalent code displays images just fine on the pages using my other style sheet, such as http://www.urigaming.org/

Here's the relevant CSS for the pages where the images won't load...

#cornerstone {
float: left;
background-image:url(TuxthulhuCircle.png);
background-repeat:no-repeat;
border: 0px solid #999999;
width:110px;
height:100px;
}
#header {
float:left;
text-align:left;
text-indent:10%;
color: #000000;
background-image:url(bgTitle.png);
background-repeat:no-repeat;
border: 0px solid #000000;
margin: 0px;
width: 900px;
height: 105px;
}

I just can't figure what I'm doing wrong... probably some stupid small error.

Full Versions
Broken Pages:
http://www.urigaming.org/uricon/URIconStyle.css
Working Pages:
http://www.urigaming.org/URIStyle.css

[theone3]

put a ../ before each image in teh css in the uricon directory, like so.background-image:url(../TuxthulhuCircle.png);This tells the web server to look into the parent directory of the folder. Currently, the css is looking for the file http://www.urigaming.org/uricon/TuxthulhuCircle.pngWith the ../, it would be looking for http://www.urigaming.org/TuxthulhuCircle.pngYou can also do this more times, if you like, (../../). Remember that it looks for the files from the directory of the css file, not the html file.

[Avril]

Or, you would have had to upload a separate "Images" folder with your images in there, and then used:

background-image:url("Images/TuxthulhuCircle.png");

in your stylesheet.

[theone3]

Or, you would have had to upload a separate "Images" folder with your images in there, and then used:

background-image:url("Images/TuxthulhuCircle.png");

in your stylesheet.

In your main stylesheet, it would be
background-image:url("Images/TuxthulhuCircle.png");

in your other stylesheet, it would be
background-image:url("../Images/TuxthulhuCircle.png");

[ronaldb66]

The images referred to in URIconStyle.css actually don't seem to be present at the given location; I can only give you some advice regarding images and CSS:


Take into account that images referred to by the url parameter using relative urls are referred to relative to the location of the style sheet, not of the page that contains the link to the style sheet.
Pay special attention to the images' file names; camelcasing may not be the best choice and can easily lead to naming errors. Keeping everything lowercase prevents this.

[NornEtaro]

I've looked over what was mentioned, but the images ARE in the same location as the stylesheet... they are all in that uricon folder. Moving them into a seperate images folder within the uricon folder doesnt seem to help. Nor does pushing them into the parent directory.

The images in my original example were in the same directory as the stylesheet, and now they're in a properly referenced sub-directory, but it still doesnt work. The problem must lie somewhere else (though thanks for the attempts)

[NornEtaro]

Never mind, I figured out the problem. Whenever I edited the images, the program I would use (paint) would name all the ".png"s as ".PNG"s. All of the pictures I had trouble with I had edited.

So it WAS a capitilization problem... I thought it would be something stupid like that. I'll have to remember from now on to type out .png in lower case whenever naming my files.