spaces for images in right place but no images

[ydubel]

I am using this css in a javascript app that produces a report in an html page at the end.
As an index.html file it worked fine...When I was using a separate css.txt file I got nothing so I added the style to the html. The background shows up and the space for the images are in the right place but the images don't show up. The buttons show up but not the spacers in between them.
Since the files are local I wondered if the url reference was the issue but I tried removing those and it still didn't fix it. Do you have any suggestions or insights about how I can fix this?
Thanks in advance for any help :)



<STYLE TYPE="text/css" MEDIA=screen>
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #44607e;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
width: 777px;
text-align: left;
background-color: #FFFFFF;
}
#header{
background-image: url(images/header.jpg);
height: 226px;
width: 777px;
left: 0px;
top: 0px;
}
#header a{
font-size: 18px;
font-style: normal;
line-height: normal;
font-weight: bolder;
color: #FFFFFF;
text-decoration: none;
margin-left: 112px;
font-family: "Arial", Helvetica, mono;
margin-top: 35px;
}
#navlist{
margin-left: 0px;
padding-left: 0px;
white-space: nowrap;
position: absolute;
height: 27px;
width: 777px;
top: 225px;
}
#navlist li{
display: inline;
list-style-type: none;
}
#navlist a {
padding: 3px 10px;
background-image: url(images/button.gif);
height: 20px;
width: 91px;
display: inline;
position: absolute;
text-align: center;
color: #fff;
text-decoration: none;
}
#navlist a:hover{background-image: url(images/buttonover.gif);}
#n1{left: 0px;}
#n2{left: 111px;}
#n3{left: 222px;}
#n4{left: 333px;}
#n5{left: 444px;}
#n6{left: 555px;}
#n7{left: 666px;}
#leftside{
float: left;
}
#leftside h3{
border-top-width: 3px;
border-right-width: 3px;
border-bottom-width: 0px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #00306f;
border-right-color: #00306f;
border-bottom-color: #00306f;
border-left-color: #00306f;
width:200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
background-color: #FFFFFF;
text-align: center;
display: block;
margin-left: 35px;
margin-top: 35px;
}
#content{
margin-top: 252px;
position: absolute;
width: 777px;
background-color: #FFFFFF;
}
#picture1{
margin-left: 35px;
height: 150px;
width: 200px;
background-image: url(images/money1.jpg);
border: 3px solid #00306f;
}
#picture2{
margin-left: 35px;
height: 150px;
width: 200px;
background-image: url(images/bg.gif);
border: 3px solid #00306f;
}
#picture3{
margin-left: 35px;
height: 150px;
width: 200px;
background-image: url(images/sponsor.jpg);
border: 3px solid #00306f;
}
#picture4{
margin-left: 35px;
height: 150px;
width: 200px;
background-image: url(images/MoneyRain.jpg);
border: 3px solid #00306f;
}
#footer{
clear: both;
background-color: #FFFFFF;
position: relative;
height: 46px;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
#rightside{
float: right;
width: 460px;
background-color: #FFFFFF;
margin-right: 15px;
margin-top: 20px;
overflow: hidden;
}
#rightside p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
margin-left: 0px;
margin-bottom: 20px;
width: 460px;
}
#rightside h1{
margin: 10px 0px 10px 0px;
width: 300px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #033387;
}
#rightside span{
margin-top: 10px;
margin-bottom: 4px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #649721;
}
#rightside a{color: #666666;}
#footer p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
float: right;
padding-top: 23px;
margin-right: 10px;
}
#footer a{color: #fff;}
#footer a:hover{color: #fff;}
#imagepreloader{
visibility: hidden;
overflow: hidden;
height: 0px;
width: 0px;
}

</STYLE>

[jscheuer1]

I may have missed it but I see no reference to a spacer image in your posted code.

Here are some of the rules (the ones that pertain to your question) governing css style background images -


If a stylesheet is external, the paths to the images it uses for background images are relative to the stylesheet, not to the page using the stylesheet.
The convention: background-image:url(some.gif); must still be used, even for local pages.


Now, if your spacer image is hard coded (or injected via javascript as an image tag) onto your page, its path must be relative to the page, not to the script.

[ydubel]

In the index htm file everything looks right, but in my output page the spaces for the images show up but not the images. The images are in a subfolder called images. The installer adds this folder with the other files when the program is installed. I have uploaded the zipped files/folders and you can get them here (http://www.sendspace.com/file/ea5axj)

[jscheuer1]

What image isn't showing?

[ydubel]

Thanks for your question....
None of the images or buttons show up.

[jscheuer1]

They all show up for me here using the archive you posted.