Foros del Web » Creando para Internet » HTML »

Problema espacio entre divs en Safari y Chrome

Estas en el tema de Problema espacio entre divs en Safari y Chrome en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/03/2011, 08:25
 
Fecha de Ingreso: noviembre-2004
Ubicación: Mar del Plata
Mensajes: 24
Antigüedad: 20 años
Puntos: 0
Problema espacio entre divs en Safari y Chrome

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!
  #2 (permalink)  
Antiguo 09/03/2011, 17:00
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 10 meses
Puntos: 36
Respuesta: Problema espacio entre divs en Safari y Chrome

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.
  #3 (permalink)  
Antiguo 10/03/2011, 06:17
 
Fecha de Ingreso: noviembre-2004
Ubicación: Mar del Plata
Mensajes: 24
Antigüedad: 20 años
Puntos: 0
Respuesta: Problema espacio entre divs en Safari y Chrome

Excelente Sanxuan!

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

Gracias nuevamente!
Matias.
  #4 (permalink)  
Antiguo 10/03/2011, 06:42
Avatar de Vicenterubi  
Fecha de Ingreso: noviembre-2010
Ubicación: Valencia
Mensajes: 8
Antigüedad: 14 años
Puntos: 0
Respuesta: Problema espacio entre divs en Safari y Chrome

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

Etiquetas: chrome, css, safari
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:44.