The image will not show up in either browser (IE or FF)

ok so i have been building my website with css and htlm and its worked fine untill a few days ago.

I edited some code to make it longer and put a banner on the site, now the images (2) will not show up.

www.nasgaming.com/testpage

@charset "utf-8";
/* CSS Document */

html {
margin: 0px;
padding: 0px;
}

body {
background-color: black;
}

#contents {
padding: 10px 10px 5px 10px;
/*background:url(/images/backs.gif) repeat-y top left;*/
background-color: white;
margin: 10px 19% 5px 19%;
position: relative;
}

#header {
margin: 10px;
height: 120px;
}

#listlinks {
	padding-top:10px;
	padding-right:20px;
	background-color: white;
	top: 7px;
	left:7px;
	position:absolute;
	height: 200px;
}

#listlinks li {
line-height: 2.5ex;
display: block;
padding-top: 5px;
margin-bottom: 5px;
}

h1 {
margin-bottom: 2px;
letter-spacing: 1px;
font-size:90px;
}

h1.bg {
background-image:url(../images/top.gif);
background-position: top left;
background-repeat: no-repeat;
}

h1.bg span {
display: none;
}

#h3div {
margin: 10px;
height: 35px;
}

h3 {
margin-top: 0px;
font-size: 30px;
}

h3.Links {
background-image:url(../images/Nav.png);
top: 0px;
left: 0px;
}

h3.back {
background: transparent url(../images/menu.gif) repeat-x top center;
}

h3.back span {
display: none;
}

Code (markup):

I have 2 places for the images and i've tried all of them, 1 place is 1 dir up from the dir that im using, and the other place is in the folder. (i recently put them in the folder to troubleshoot)

as you see the top part (the 'header') has an image value of 'top.gif' and it will not show up on the page. but if you goto nasgaming.com/testpage/top.gif it shows up fine. now why would this not be working?

 

Ok i found a mess up in my first post what i meant was.

as you see the top part (the h1.bg') has an image value of 'top.gif' and it will not show up on the page. but if you goto nasgaming.com/testpage/top.gif it shows up fine. now why would this not be working?

 

Are you using Pretty URLs or something?

It looks like your CSS sheet is in /testpage/ and so is top.gif but is this true? Because normally url(top.gif) should work for background-image.

Paths can be hidden or incorrect if you are rewriting urls.

 

Im not using Pretty urls (i don't know what they ,are if i am using them)

Yes the css stylesheet is in /testpage/ along with top.gif. but it's not working that's why i came here.

 

I'm assuming you are reffering to the background images set for your h1 and h3 (.bg and .back)

Because the <span> inside of these tags is set to display:none; it means there is no content inside of these tags. What this means is the <h1> and <h3> is therefore empty (An element without anything in won't show up on the screen..because there is nothing inside of it, unless you have given it some dimensions).

So you basically need to give h1 and h3 a height and/or width (The width is 100% by default).

 

Duh, I should have noticed that. Good catch, ya limey! : )

Pretty URLs are when someone takes an "ugly" url like
art.com/artgallery/default.asp?sid=9DF4BC0580DF11D3ACB60090271E26A8&command=freelist

ew

You can use mod_rewrite on an Apache server (and there's something similar on other servers) to turn that into something like
art.com/artgallery/joespaintings/241/

which is actually readable. But often when people first get into this, they lose all the "correct" paths for their JS, CSS, and images. This wasn't in your case, though.