list-style-image + float

[Dukelouis 0]

Aew pessoal, preciso de uma luz akew...

Seguinte:

#Menu ul li {
  list-style: url(imagens/menu_sep.jpg) inside square;
  font-family: @Arial Unicode MS;
  font-size: 10px;
  float:left;
  height:32px;
  margin-top: -1px;
}

<div class="fonte" id="Menu">
		<ul>
			<li><a href="">O Colégio</a></li>
			<li><a href="">Cursos</a></li>
			<li><a href="">Cursos Extras</a></li>
			<li><a href="">Notícias</a></li>
			<li><a href="">Eventos</a></li>
			<li><a href="">Serviços</a></li>
			<li><a href="">Projetos</a></li>
		</ul>
		</div>

Estou querendo fazer um menu que fique com os itens lado a lado e aproveitar a imagem do item pra fazer uma espécie de 'separador'. Com o firefox fica direitinho.... mas o IE some com a imagem assim q eu uso o float:left;

 

Me ajudem aew pessoal, plz!

[Giovani 104]

Eu acho mais fácil você colocar uma borda em cada <li> http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

[Maujor 144]

Experimente assim:

#Menu ul li {
 margin:0; 
 padding-left:10px;
 list-style:none;
 background: url(menu_sep.gif) right top no-repeat;
 font-family: Arial Unicode MS;
 font-size: 10px;
 float:left;
 height:32px;
}
#Menu ul li a {margin-right:10px;}