espacio entre imagenes

[sanchy]

hola el problema q tengo es el siguiente, necesito poner una imagen debajo del menu, y por alguna razon me queda un espacio en blanco entre las imagenes. probe todo lo que pude y nada funciona.

no encuentr ningun margin o padding que este molestando ni nada... aca les dejo una foto, la franja negra es la imagen de la q hablo, y tendria q ir pegada al menu en ves de tener ese espacio en blanco



y aca les dejo el codigo
lo que esta marcado en rojo es la imagen que me queda mal posicionada
lo primero es el codigo del menu, y lo segundo es el css del menu

Código:

<div id="menu" align="center"><ul>
  <li><img src="images/menu-left.png" alt="" style="margin:0px; padding:0px" /></li>
  <li class="nivel1"><a href="index.html" onmouseover="act('one')" onmouseout="inact('one')" class="nivel1"><img src="images/home.jpg" name="one" border="0" alt="" /></a> 
	
  </li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('two');act2('two')" onmouseout="inact('two')"><img src="images/musica.jpg" name="two" border="0" alt=""/></a> 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 2<table class="falsa"><tr><td><![endif]--> 
	<ul class="dos"> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-1.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-2.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-3.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-4.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('two')" onmouseout="inact('two')"><img src="images/musica-5.png" alt=""/></a></li> 
	</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine.jpg" name="three" border="0" alt=""/></a> 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 3<table class="falsa"><tr><td><![endif]--> 
	<ul class="tres"> 
		<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-1.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-2.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-3.png" alt=""/></a></li>
        <li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-4.png" alt=""/></a></li> 
        <li><a href="#" class="nivel1" onmouseover="act('three')" onmouseout="inact('three')"><img src="images/cine-5.png" alt=""/></a></li>  
	</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('four')" onmouseout="inact('four')"><img src="images/moda.jpg" name="four" border="0" alt=""/></a> 
</li> 
  <li class="nivel1"><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte.jpg" name="five" border="0" alt=""/></a> 
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 5<table class="falsa"><tr><td><![endif]--> 
	<ul class="cinco"> 
		<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-1.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-2.png" alt=""/></a></li> 
		<li><a href="#" class="nivel1" onmouseover="act('five')" onmouseout="inact('five')"><img src="images/arte-3.png" alt=""/></a></li> 
	</ul> 
<!--[if lte IE 6]></td></tr></table></a><![endif]--> 
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('six')" onmouseout="inact('six')"><img src="images/galeria.jpg" name="six" border="0" alt=""/></a> 
</li>
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('seven')" onmouseout="inact('seven')"><img src="images/foro.jpg" name="seven" border="0" alt=""/></a> 
</li>  
<li class="nivel1"><a href="#" class="nivel1" onmouseover="act('eight')" onmouseout="inact('eight')"><img src="images/contacto.jpg" name="eight" border="0" alt=""/></a> 
</li>
<li><img src="images/menu-right.jpg" alt="" style="padding-left:1px; padding-bottom:0px; margin-bottom:0px"/></li><li><img src="images/submenu-home.jpg" style="margin-top:0px" alt=""/><img src="images/flags.jpg" alt="" usemap="#flags" border="0"/>
     </li>
</ul>

</div>

Código:

* { margin: 0px;
padding: 0px; outline: 0;
}

#menu {  

width: 100%px;
position: relative;
margin-bottom:0px;
}
#menu ul { 
list-style-type: none;
}

#menu ul li.nivel1 { 
float: left;
width: 111px;
position: relative;
}
#menu ul li { 
float: left;
}

#menu ul li a { 
background-image:url(images/submenu-bg.png);
display: block;
text-decoration: none;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {
color: #000;
position: relative;
}
#menu ul li a.nivel1 {
display: block!important;
display: none;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li:hover ul {
display: block;
position: absolute;
width: 816px;
}
#menu ul li ul li a {
width: auto;
}
#menu ul li ul li a:hover {
position: relative;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -32px;}
ul.dos {left: -143px;}
ul.tres {left: -255px;}
ul.cuatro {left: -32px;}
ul.cinco {left: -146px;} 

[sanchy]

lo arregle achicando la imagen y poniendo ese gris de fondo para simularla

pero no es lo q quiero, si alguien me puede ayudar a arrelgar esto mejor

[Aresillo]

Con que lo estas viendo con IE o con FF y qué versión?

Aresillo!!

[Null_]

prueba poniendole la propiedad vertical-align:bottom; a la imagen y me dices si te funciona, no tengo tiempo para probarlo ahora...

suerte

[sanchy]

Iniciado por Null_

prueba poniendole la propiedad vertical-align:bottom; a la imagen y me dices si te funciona, no tengo tiempo para probarlo ahora...

suerte

no funciona, gracias por la sugerencia

Iniciado por Aresillo

Con que lo estas viendo con IE o con FF y qué versión?

Aresillo!!

con chrome, IE y FF.... perdona si suena mal la pregunta pero, que importa con que lo estoy viendo? la gracia es q se vea bien en todos los exploradores

[Mikmoro]

¿Tienes eso en línea para poder verlo? es que sin ver las imágenes es difícil, además de que no acabo de entender la consulta: dices que es la franja negra que está separada del menú, luego dices que es lo que señalas en rojo en tu código, pero lo que señalas está dentro de dos "li". ¿Cómo iba a estar la franja negra dentro de un "li" del mismo menú?

Yo no lo entiendo.

Y la pregunta de en que navegador lo estás viendo supongo que es para saber si ocurre lo mismo en todos o sólo en alguno.

[Aresillo]

Efectivamente, lo decía porque si era IE6 podía tener algo que ver con una cosa que me explicó Mikmoro recientemente. Si lo ves así en varios el problema cambia, porque no es sólo cosa de explorer...

Aresillo!!