I think that I have exhausted all my limited knowledge looking for an answer, I've even typed in the full url of the image into the css and still no luck.
It must be something easy that I keep overlooking.
test.html
and I'll guess you'll need this as well. the 'screen.css' file:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
body {
background-color: #343e3c;
color: #2d2e2e;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 16px;
margin: 50px 0 0 0;
padding: 0 0 0 0;
text-align: center;
}
h1 {
color: #78a769;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
h2 {
color: #78a769;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
a, a:link {
color: #239f3e;
font-weight: bold;
text-decoration: none;
}
a:visited {
color: #578557;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #017a20;
text-decoration: underline;
}
a:focus {
color: #017a20;
}
a:active {
color: #004e2a;
}
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto;
text-align: left;
width: 780px;
}
#outerWrapper #header {
background-image: url("../imgs/banner.jpg");
background-repeat: no-repeat;
border-bottom: solid 2px #657f51;
font-size: 18px;
font-weight: bold;
height: 99px;
line-height: 15px;
}
#outerWrapper #contentWrapper {
background-image: url("../imgs/contentWrapper_bg.png");
background-repeat: repeat-y;
overflow: hidden;
}
#outerWrapper #contentWrapper #sidebar {
background-color: #edf6e4;
border-right: solid 1px #92b876;
float: left;
padding: 10px 10px 10px 10px;
width: 150px;
}
#outerWrapper #contentWrapper #content {
margin: 0 0 0 170px;
padding: 10px 20px 10px 20px;
}
#outerWrapper #contentWrapper #content h1 {
color: #78A769;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18px;
}
#outerWrapper #footer {
background-color: #edf6e4;
border-top: solid 1px #92b876;
padding: 10px 10px 10px 10px;
}