Problema espacio entre divs en Safari y Chrome

[Mardelman]

Hola a todos!

Le cuento que maqueto los sitio con tablas hace años, por un tema de tiempo y clientes ansiosos no podía meterme con el tema de maquetar con DIVs. Pero aquí estoy con mi proyecto personal pero hay algo que queiro solucionar antes de seguir maquetándolo...

Verán tanto en Safari como en Chrome, en el sector del slide (Easy Slider 1.7 http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider) me crea un espaciado, como si fuera un salto de línea, arriba del bloque de texto del trabajo de EGO ROCK y la imagen que lo acompaña me la achica proporcionalmente. Pero cuando sigue el slide, cuando es solo imagen, no me lo hace.

Imagenes:

ERROR SAFARI 5.0 y Chrome 9.0
(arrastré el mouse presionado para que se vea el espaciado, por eso el fondo azul)



MOZILLA 3.6 y IEXPLORER 8 ()



El sitio es: http://www.matiasjaubet.com/pre/

HTML:

Código:

<div id="contenedor">
           <div id="cabecera">
           <div id="logo"><h1>Matías Jaubet</h1>
                <h2>Diseñador Gráfico y Desarrollo Web</h2></div>
             <div id="botonera">
                <ul id="navi">
	<li><a href="index.php" id="inicio">INICIO</a></li>
	<li><a href="web.php" id="web">DISEÑO WEB</a></li>
	<li><a href="grafica.php" id="grafica">DISEÑO GRÁFICO</a></li>
    <li><a href="contacto.php" id="contacto">CONTACTO</a></li>
                      </ul>
				</div>
       </div>
            <div id="contenido">
		       <div id="slide">
				   <div id="slide-extremo"><img src="imagenes/slide-top.png" alt="" width="900" height="16" /></div>
				   <div id="slide-cuerpo">
		<div id="slider">
			<ul>				
				<li><div id="trabajo-01">
				<div id="data"><p class="slide-volanta">Diseño Web</p>
				<p class="slide-titulo">Ego Rock</p>
				<p class="slide-texto">Banda de Rock de la ciudad de Mar del Plata.
El trabajo realizado fue diseño y maquetación.</p> 
<div id="bt-ver"><a href="javascript:;">Ver diseño</a></div>
<div id="bt-ir"><a href="javascript:;">Ir al sitio</a></div>
<div id="bt-trabajos"><a href="javascript:;">Trabajos web</a></div>
</div>
				<div id="imagen-data"><a href="javascript:;"><img src="imagenes/inicio-ego.jpg" alt=""  width="306" height="184" /></a></div>
				</div></li>
				<li><a href=""><img src="imagenes/borrar-02.jpg" alt="" /></a></li>
				<li><a href=""><img src="imagenes/borrar-03.jpg" alt="" /></a></li>
				<li><a href=""><img src="imagenes/borrar-04.jpg" alt="" /></a></li>
				<li><a href=""><img src="imagenes/borrar-05.jpg" alt="" /></a></li>			
			</ul>
		</div>
				   </div>
				   <div id="slide-extremo"><img src="imagenes/slide-foot.png" alt="" width="900" height="16" /></div>
			   </div>
				   <div id="banners"></div>
				   
	   </div>
                   <div id="pie">Este es el pie de pagina</div>
       </div>

CSS del sector en conflicto:

Código:

#contenido {
		margin: 0 auto;
	 	width:948px;
}
#slide {
		margin: 0 auto;
		padding:0;
	 	width:948px;
		position:relative;
}
#slider {
		margin: 0 auto;
		padding:0;
	 	width:948px;
		
}
#trabajo-01 {
		margin: 0 auto;
		padding:0;
	 	width:772px;
		height:184px;
}
#slide-extremo {
		margin: 0 auto;
		padding:0;
	 	width:900px;
		height:16px;
}
#slide-cuerpo {
		margin: 0 auto;
		height:184px;
		padding:0;
	 	width:900px;
		background-color: #FDF6EA;
}#data {
		margin: 0 auto;
		padding:0;
	 	width:461px;
		height:184px;
		float:left;
}#imagen-data {
		margin: 0 auto;
		padding:0;
	 	width:311px;
		height:184px;
		float:left;
}
#bt-ver a {
		font: normal 12px Tahoma, Helvetica, Arial;
		float:left;
		margin: 10px 10px 0 0;
		padding:0;
	 	width:71px;
		height:21px;
		text-align: center;
		line-height:18px;
		background: url("../imagenes/bt-ver.jpg") no-repeat top;
		text-decoration:none;
		color:#FFFFFF;
}#bt-ver a:hover {
		background: url("../imagenes/bt-ver.jpg") no-repeat bottom;
}

#bt-ir a {
		font: normal 12px Tahoma, Helvetica, Arial;
		float:left;
		margin: 10px 10px 0 0;
		padding:0;
	 	width:71px;
		height:21px;
		text-align: center;
		line-height:18px;
		background: url("../imagenes/bt-ir.jpg") no-repeat top;
		text-decoration:none;
		color:#FFFFFF;
}
#bt-ir a:hover {
		background: url("../imagenes/bt-ir.jpg") no-repeat bottom;
}

#bt-trabajos a {
		font: normal 12px Tahoma, Helvetica, Arial;
		float:left;
		margin: 10px 0 0 0;
		padding:0;
	 	width:97px;
		height:21px;
		text-align: center;
		line-height:18px;
		background: url("../imagenes/bt-trabajos.jpg") no-repeat top;
		text-decoration:none;
		color:#FFFFFF;
}
#bt-trabajos a:hover {
		background: url("../imagenes/bt-trabajos.jpg") no-repeat bottom;
}

Puede ser que haya abusado de div´s pero es la primera vez que trabajo con esta técnica, lo mismo con los CSS, trataré de llevar todo al metodo shorthand.

Espero que sea claro mi problema y que alguien sepa a donde le estoy errando.
Gracias y saludos!

[sanxuan]

Creo que la siguiente propiedad puede solucionar el problema:
#slide-cuerpo li{
display:block;
}
Lo he probado en Chrome, IE8, Opera y Firefox. Safari debería mostrarlo como Chrome pero no lo tengo instalado, por lo que no lo puedo asegurar.

[Mardelman]

Excelente Sanxuan!

Funcionó perfectamente. Hay varias funciones css que debo ponerme a estudiar, como por ejemplo "display:block;"

Gracias nuevamente!
Matias.

[Vicenterubi]

A mi también me ha venido muy bien! Siempre luchando con los navegadores jaja ;)