Why aren't the css background images showing up in the sidebar?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Your Page</title>
<style type="text/css">
body,
html {
margin:0;
padding:0;
background:#000000;
color : #00cc00;
}
body {
min-width:810px;
}
#wrap {
background:#000000;
margin: 0 auto;
width:810px;
}
#wrap img {
float:left;
}
#header {
background-color:#000000;
height:75px;
margin-top:3px;
}
#header h1 {
padding:0;
line-height:75px;
font-family:"Comic Sans MS";
margin-left:80px;
color:#00CC00;
}
#main {
background:#000000;
float:right;
width:560px;
color:#00FF00;
}
#main h2, #main h3, #main p {
padding:0 10px 0 0;
}
#sidebar {
background:#000000;
float:left;
width:240px;
}
#sidebar ul {
margin:0 0 0 0; padding: 0 0 0 0; list-style-type: none;
}
#sidebar h3{
padding:0 0 0 0;
margin-top:5px;
margin-left:3px;
margin-bottom:3px;
text-align:center;
color:#00FF00;
}
#sidebar a
{
line-height:20px;
text-decoration:none;
margin-left:3px;
color:#00FF00;
text-align:left;
}
#sidebar a:hover
{
text-decoration:underline;
}
#sidebar img
{
margin-left:3px;
border:0;
float:left;
}
a.image{
background-image: url("glowing-green-button.gif");
height:20px;
width:20px;
}
#footer {
clear:both;
color:#00ff00;
background-color: #000000;
font-size:12px;
margin:0;
}
#footer p{
padding-top:0;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<img src="green-planet.gif" width="75" height="75" alt=
"Green Planet" />
<h1>Your Website</h1>
</div>
<div id="main">
<h2>Column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Mauris vel magna. Mauris risus nunc, tristique varius,
gravida in, lacinia vel, elit. Nam ornare, felis non faucibus
molestie, nulla augue adipiscing mauris, a nonummy diam
ligula ut risus. Praesent varius. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</p>
<p>Nulla a lacus. Nulla facilisi. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Fusce pulvinar lobortis purus.
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Donec semper ipsum et urna. Ut
consequat neque vitae felis. Suspendisse dapibus, magna quis
pulvinar laoreet, dolor neque lacinia arcu, et luctus mi erat
vestibulum sem. Mauris faucibus iaculis lacus. Aliquam nec
ante in quam sollicitudin congue. Quisque congue egestas
elit. Quisque viverra. Donec feugiat elementum est. Etiam vel
lorem.</p>
<p>Aenean tempor. Mauris tortor quam, elementum eu, convallis
a, semper quis, purus. Cras at tortor in purus tincidunt
tristique. In hac habitasse platea dictumst. Ut eu lectus eu
metus molestie iaculis. In ornare. Donec at enim vel erat
tempor congue. Nullam varius. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nulla feugiat hendrerit risus.
Integer enim velit, gravida id, sollicitudin at, consequat
sit amet, leo. Aliquam nec ante in quam sollicitudin congue.
Quisque congue egestas elit. Quisque viverra. Quisque congue
egestas elit. Quisque viverra.</p>
</div>
<div id="sidebar">
<h3>Column 2</h3>
<ul>
<li><a href="#" class="image"></a><a href=
"#">Link 1</a></li>
<li><a href="#" class="image"></a><a href=
"#">Link 2</a></li>
<li><a href="#" class="image"></a><a href="#">Link 3</a></li>
<li><a href="#" class="image"></a><a href=
"#">Link 4</a></li>
<li><a href="#" class="image"></a><a href=
"#">Link 5</a></li>
<li><a href="#" class="image"></a><a href=
"#">Link 6</a></li>
<li><a href="#" class="image"></a><a href=
"#">Link 7</a></li>
<li><a href="#" class="image"></a><a href=
"#">Link 8</a></li>
</ul>
</div>
<div id="footer">
<p>Portions of this website were created using the free web
resources available at www.elated.com and are copyright
Elated Communications Ltd 1996-2002
<br />
Designed by Curtis LeBlanc</p>
</div>
</div>
</body>
</html>