CSS menu background won't show up

[darkpowrjd]

I've been trying to create a new navigation system for my site, and I got everything figured out except for one thing. Here is the CSS code I'm using right now:

body {
    font: normal 10px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background: #FFFFFF;
    height: auto;
    width: auto;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    text-align: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}
 
a { color: #0000FF; text-decoration: none; }
a:hover { color: #000000; }
a.redbar { color: #FFFF00; text-decoration: none; }
a.redbar:hover { color: #000000; }
 
table {
    border-width: 0px;
    border-style: none;
    margin: 0px;
    padding: 0px;
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #000000;
    background-color: #FFFFFF;
}
 
.loading {
    font-size: 24px;
    font-style: italic;
    font-weight: bold;
    color: #FFFFFF;
    text-align: right;
 
}
 
.bars {
    font-size: 10px;
    font-style: italic;
    font-weight: bold;
    color: #FFFFFF;
 
 
}
 
.bars, .loading {
    background-color: #0033CC;
 
    }
 
 
#navbar {
    font: bold 12px Geneva, Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-align: center;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #333333;
    clear: both;
    margin-bottom: 10px;
}
#navbar ul {
    margin: 0px;
    padding: 0px;
}
#navbar li {
    list-style: none;
    display: inline;
}
#navbar a {
    background: url(../images/blackslant_15x15.gif);
}

and here is my unordered list that I am using that is using the #navbar property:

<div id="navbar">
          <ul>
            <li> <a href="news/index.html">News</a></li>
            <li> <a href="fanfiction/index.html">Fanfiction</a></li>
            <li> <a href="thoughts/index.html">Thoughts</a></li>
            <li> <a href="links/index.html">Links</a></li>
            <li> <a href="contact/index.html">Contact</a></li>
          </ul>
  </div>

The problem is when I actually add the background I want to use for this navigation, the background doesn't come up. I try to do different things to cause it to come up, but nothing shows up AT ALL in Dreamweaver 8. I've had various different things happen with Firefox and IE, with the background overflowing out of the navigation bar, it not being centered right, whatever they could've done to screw it up, they did. Now, the float:block property will get it to show, but since I need this navigation centered, I can't use float (the background itself is a little diagonal black line), and since I only need this BG in the actual list items, I can't tell it to use the background in the entire UL (there is supposed to be only one black line going in between each link). Be advised that I didn't use any padding because in order to start padding the background, I need to have it know that there actually IS a background being used.

I have tried to do everything imaginable in order to get this thing to look right and to actually get Dreamweaver and/or the page, css, whatever it is that is reading what, to reconize that I'm actually telling it to use a background in the code, in the way that I was wanting it. But I think I have hit my wits end in this, because everything that I have tried has done absolutly nothing with getting this problem fixed. I need help, PLEASE!!

[darkpowrjd]

I won't pretend to have this post as a way to bump up this topic, because I REALLY NEED HELP ON THIS!!! I'm STILL trying to do ANYTHING I possibly can, and no one is answering (or caring?).

What am I doing wrong? PLEASE HELP!!

[jaymanson]

Hi darkpowrjd

I just think that maybe no-one is too sure exactly what's up! Your CSS seems fine so I can't see why your background shouldn't be showing up! As it is above, you should have your menu items with ///////////////// behind them.

You say 'there is supposed to be only one black line going in between each link' so I'm presuming you mean you want your menu like this:

Item 1 / Item 2 / Item 3 / Item 4

If so, then change your CSS from this:

#navbar li {
    list-style: none;
    display: inline;
}
#navbar a {
    background: url(../images/blackslant_15x15.gif);
}

to this:

#navbar li {
    list-style: none;
    display: inline;
    padding-right: 15px;
    background: url(../images/blackslant_15x15.gif) top right no-repeat;
}

Hopefully I'm reading you right - if so then that should give you the result you want.

Jay