0

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>
1
Contributor
1
Reply
2
Views
9 Years
Discussion Span
Last Post by curt22
0

Never mind I fixed it. I needed to use divs instead of a's.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.