Problem adding a separator between <li>

[soltek]

Hello, mates

 

What's wrong with this code? I cant manage to add a separator image between the <li> tags.

 

Take a took, please:

 

////@ html
<ul id="menu">
<li><a href="#nogo">Home</a></li>
<li class="separator"></li>
<li><a href="#nogo">Help</a></li>
<li class="separator"></li>
<li><a href="#nogo">FAQ</a></li>

////@ css
#menu
{
height: 20px;
padding:0;
margin:0;
color:#fff;
font-family: Microsoft, sans-serif;
font-size: 15px;
white-space:nowrap;
list-style-type:none;
}
#menu li {display:inline;}
#menu li a
{
padding:0.2em 1em;
background-image:url('http://mdown.org/tretas/teste.V4/imagens/botoes-cat/fundo-menu.png');
color:#fff;
text-decoration:none;
float:left;
}
#menu li a:hover
{
background-image:url('menu.png');
color:#fff;
}
#ul.menu li.separator
{
  width:5px;
  height:80px;
  background-image: url('separador.png');
  background-position: top center;
  background-repeat:no-repeat;
}
</ul>

</div>

 

Any clues?

Thanks in advance.

[ignace]

You don't need the extra markup for this to work:

 

<ul>
  <li class="first">Home</li>
  <li>Help</li>
  <li class="last">FAQ</li>
</ul>

ul {
  display: block;
  background: url(http://mdown.org/tretas/teste.V4/imagens/botoes-cat/fundo-menu.png) repeat-x;
  height: 20px;
}

ul li {
  display: block;
  width: 100px;
  float: left;
  background: url(separador.png) right no-repeat;
  height: 100%;
}

ul li.last {
  background: none;
}

[soltek]

You don't need the extra markup for this to work:

 

<ul>
  <li class="first">Home</li>
  <li>Help</li>
  <li class="last">FAQ</li>
</ul>

ul {
  display: block;
  background: url(http://mdown.org/tretas/teste.V4/imagens/botoes-cat/fundo-menu.png) repeat-x;
  height: 20px;
}

ul li {
  display: block;
  width: 100px;
  float: left;
  background: url(separador.png) right no-repeat;
  height: 100%;
}

ul li.last {
  background: none;
}

 

 

hmm.. I didnt knew css could align background images. That's awesome.

Thank you for teaching me something, have a nice new year.

[TheFilmGod]

I know you're problem has been solved with more efficient code. But if you are wondering, you're original code didn't work because the li tag was set as inline. You have to set it as display: block; if you wish for it to take the width/height declarations you made.