Hola
Cecilia_Cristina:
Podes ahorrarte un poco de código colocando un reset en el css que es el que va con el
*:
Código html:
Ver original<!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" lang="es-es"> <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" /> *{margin:0; padding:0; border:0; outline:0;}
#barra {float:left; width:100%;}
#barra li{ list-style:none; float:left;}
.inicio a{background:url(images/inicio.jpg) no-repeat; text-decoration:none; display:block; width:116px; height:40px;}
.inicio a:hover {background-position:bottom; background-image:url(images/inicio_over.jpg);}
.galerias a{background:url(images/galerias.jpg) no-repeat; text-decoration:none; display:block; width:150px; height:40px;}
.galerias a:hover {background-position:bottom; background-image:url(images/galerias_over.jpg);}
.servicios a{background:url(images/servicios.jpg) no-repeat; text-decoration:none; display:block; width:159px; height:40px;}
.servicios a:hover {background-position:bottom; background-image:url(images/servicios_over.jpg); border: 0; }
.mapa a{background:url(images/mapa.jpg) no-repeat; text-decoration:none; display:block; width:142px; height:40px;}
.mapa a:hover {background-position:bottom; background-image:url(images/mapa_over.jpg);}
<li><img src="images/relleno.jpg" /></li> <li class="inicio"><a href="#" class="inicio"></a></li> <li class="galerias"><a href="#" class="galerias"></a></li> <li class="servicios"><a href="#" class="servicios"></a></li> <li class="mapa"><a href="#" class="mapa"></a></li>
en la
li donde esta relleno.jpg no esta cerrado según el código que pones, y la ul tampoco, podrías colgar algo en la red para que veamos que es lo que quieres lograr y como es que te queda mal, ya que no se cuanto mide tu imagen o que forma tiene.
PD: Bienvenida al foro