Foros del Web » Creando para Internet » CSS »

Alineado vertical en EXPLORER erroneo

Estas en el tema de Alineado vertical en EXPLORER erroneo en el foro de CSS en Foros del Web. Hola, tengo una pagina web que estoy desarrollando, y tengo un "pequeño problema" con explorer. La pagina es esta: http://www.tuciudad360.es/ En todos los navegadores la ...
  #1 (permalink)  
Antiguo 04/01/2013, 11:11
Avatar de Pentaxeros  
Fecha de Ingreso: mayo-2008
Mensajes: 173
Antigüedad: 15 años, 11 meses
Puntos: 3
Alineado vertical en EXPLORER erroneo

Hola, tengo una pagina web que estoy desarrollando, y tengo un "pequeño problema" con explorer.

La pagina es esta:
http://www.tuciudad360.es/

En todos los navegadores la zona inferior que muestra los resultados se ve bien, que es asi:


Pero en EXPLORER me hace esto:


La verdad no logro averiguar porque es.
Lo primero que observo es que las cajas de las imagenes quedan un poco mas altas, pero no logro averiguar que es.

Me puede ayudar alguien, porque seguramente sea una "chorrada", pero como suele ocurrir, a veces de tanto mirar uno mismo lo que uno ha escrito, no suele darse cuenta.

Saludos!!!
  #2 (permalink)  
Antiguo 04/01/2013, 15:28
sidneyendis
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Alineado vertical en EXPLORER erroneo

Prueba hacer lo siguiente....
Antes de que acabe el div:
Código HTML:
<div id="campook2" class="jTscroller"> 
Metele lo siguiente:
Código HTML:
<div style="line-height:0;font-size:0;clear:both;"></div> 
Tal que quede así:
Código HTML:
<div id="campook2" class="jTscroller">
 <!-- El resto de código -->
 <div style="line-height:0;font-size:0;clear:both;"></div>
</div> <!-- Fin #campook2 --> 
P.d. Borra el caché antes de probarlo...
  #3 (permalink)  
Antiguo 05/01/2013, 12:07
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 14 años, 10 meses
Puntos: 641
Respuesta: Alineado vertical en EXPLORER erroneo

mejor que lo hagas en el css, esa linea blanca que queda alta como dice sydneyendis debería quitarse con el line-height:0

pero si le pones el estilo directamente en el css te ahorras las 5000 lineas si no es dinámico y si lo es, de todos modos separas el css del html como debe ser.
  #4 (permalink)  
Antiguo 09/01/2013, 15:40
Avatar de Pentaxeros  
Fecha de Ingreso: mayo-2008
Mensajes: 173
Antigüedad: 15 años, 11 meses
Puntos: 3
Respuesta: Alineado vertical en EXPLORER erroneo

Hola, he probado, con lo que me decís, y no soluciona el problema...

Alguna idea?

Mira que da guerra el explorer...


La estructura es asi:

<div id="campook2" class="jTscroller">

<div style="float: left;margin-left:10px;width:160px;">
<a href="aaa.html">
<img width="150" alt="Restaurante El Palmeral" height="75" src="./portal/mini360/p-1137.gif">
</a>

<a href="aaa.html">
<img width="150" alt="Restaurante El Palmeral" height="75" src="./portal/mini360/p-1137.gif">
</a>

<a href="aaa.html">
<img width="150" alt="Restaurante El Palmeral" height="75" src="./portal/mini360/p-1137.gif">
</a>
</div>

<div style="float: left;margin-left:10px;width:160px;">
<a href="aaa.html">
<img width="150" alt="Restaurante El Palmeral" height="75" src="./portal/mini360/p-1137.gif">
</a>

<a href="aaa.html">
<img width="150" alt="Restaurante El Palmeral" height="75" src="./portal/mini360/p-1137.gif">
</a>

<a href="aaa.html">
<img width="150" alt="Restaurante El Palmeral" height="75" src="./portal/mini360/p-1137.gif">
</a>
</div>

<div style="float: left;width:10px;height:250px;"></div>

</div>

el div campook2 es el contenedor principal, y contiene columnas de 3 imagenes.

El CSS es este:
Código:
@charset "utf-8";
/*
Thumbnail scroller jQuery plugin
scrollers styling 
*/ 
.jThumbnailScroller{ position:relative; width:860px; height:292px; margin:0 auto 0 auto; border:5px solid #eee; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

.jThumbnailScroller2{ position:relative; width:860px; margin:0 auto 0 auto; border:5px solid #eee; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

.jThumbnailScroller .jTscrollerContainer{position:absolute;height:292px;}
.jThumbnailScroller .jTscroller{position:relative; height:292px; margin:0; left:0; top:0; display:inline-block; *display:inline;}
.jTscrollerRESETButton {position:absolute; display:block; width:1px; height:1px;opacity:0;}
.jThumbnailScroller .jTscrollerNextButton,.jThumbnailScroller .jTscrollerPrevButton{position:absolute; display:block; width:40px; height:40px; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; opacity:0.7;}
.jThumbnailScroller .jTscrollerNextButton{background:#000 url(nextArrow.png) center center;}
.jThumbnailScroller .jTscrollerPrevButton{background:#000 url(prevArrow.png) center center;}
.jThumbnailScroller .jTscrollerNextButton:hover,.jThumbnailScroller .jTscrollerPrevButton:hover{background-color:#1163f9; opacity:1;}
.jThumbnailScroller .jTscroller a{display:block; float:left; border:5px solid #ddd; margin:9px 0px 0px 0; background:#fff; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;}
.jThumbnailScroller .jTscroller a:hover{border-color:#fff;}
.jThumbnailScroller .jTscroller a:first-child{margin-left:0px;}
.jThumbnailScroller .jTscroller a img{border:none;line-height:0;}
/* different styled scrollers */
/* liquid width scroller */
.jThumbnailScroller#tS1{width:95%;}
.jThumbnailScroller#tS2{margin:10px auto;}
.jThumbnailScroller#tS2 .jTscroller a{opacity:0.8;}
.jThumbnailScroller#tS2 .jTscroller a:hover{opacity:1;}
.jThumbnailScroller#tS2 .jTscrollerNextButton{margin:-20px 10px 0 10px; right:-5; top:50%;}
.jThumbnailScroller#tS2 .jTscrollerPrevButton{margin:-20px 10px 0 10px; left:-5; top:50%;}
/* a vertical scroller */
.jThumbnailScroller#tS3{position:absolute; left:40px; top:322px; width:122px; height:400px; margin:0; background:#eee;}
.jThumbnailScroller#tS3 .jTscroller{height:auto; margin-bottom:40px;}
.jThumbnailScroller#tS3 .jTscroller a{display:block; margin:0 6px 10px 6px; width:100px; overflow:hidden; opacity:0.7;}
.jThumbnailScroller#tS3 .jTscroller a:hover{opacity:1;}
.jThumbnailScroller#tS3 .jTscroller a:first-child{margin-top:50px;}
.jThumbnailScroller#tS3 .jTscrollerNextButton{margin:10px 0 10px -20px; bottom:0; left:50%; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg);}
.jThumbnailScroller#tS3 .jTscrollerPrevButton{margin:10px 0 10px -20px; top:0; left:50%; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -o-transform:rotate(90deg); -ms-transform:rotate(90deg);}
Saludos!!!
  #5 (permalink)  
Antiguo 10/01/2013, 09:25
sidneyendis
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Alineado vertical en EXPLORER erroneo

Es un problema de maquetación....

Si pruebas en cambiar la altura (height:292px;) y el ancho (width:860px;) de la clase .jThumbnailScroller de tu archivo css jquery.thumbnailScroller3.css.... a las siguientes medidas... height:308px; width:870px; verás como se soluciona en IE (Yo utilizo el 9) pero falla en firefox, chrome y posiblemente en safari (No lo he probado)... por lo tanto tienes que ponerle un hack especifico para IE... haces lo siguiente:

Cambias:
Código CSS:
Ver original
  1. .jThumbnailScroller{ position:relative; width:860px;  height:292px;  margin:0 auto 0 auto; border:5px solid #eee; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

por lo siguiente:
Código CSS:
Ver original
  1. .jThumbnailScroller{ position:relative; width:860px; _width:870px; height:292px; _height:308px; margin:0 auto 0 auto; border:5px solid #eee; background:#bbb; padding:0; overflow:hidden; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}


Borra caché antes de visualizar el resultado final.... y solucionado... o eso espero.

P.D. Si te da error en otras versiones de Internet Explorer, hay hacks más específicos que puedes utilizar:
ejemplo:
Código CSS:
Ver original
  1. height:308px !important; /* IE 7 y posteriores sí respetarán la propiedad */
  2. *height:308px; /* IE7 y versiones anteriores */

Un saludo!
  #6 (permalink)  
Antiguo 28/01/2013, 13:06
Avatar de Pentaxeros  
Fecha de Ingreso: mayo-2008
Mensajes: 173
Antigüedad: 15 años, 11 meses
Puntos: 3
Respuesta: Alineado vertical en EXPLORER erroneo

GRACIAS!!! Eso funciona!!!

Ahora me esta haciendo otra cosa mal!!! DICHOSO EXPLORER!!!

Os pongo 2 capturas:
Asi en CHROME que es como debe ser:


Y Asi en EXPLORER... y no encuentro PORQUE...


Los fallos son que en EXPLORER me desplaza todo en la cabecera un montón hacia abajo, y luego en la primera barra negra de titulo, en lugar de centrado, me lo descentra.

Alguna ayuda???

GRACIAS!!!
  #7 (permalink)  
Antiguo 29/01/2013, 04:27
sidneyendis
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Alineado vertical en EXPLORER erroneo

mmm... eso será cuestión de ir probando... yo tengo la versión 9 de explorer y no genera tanto margen.

No obstante si vas a dejar la cabecera con una altura fija.... mira a ver si estipulando una altura fija al siguiente div consigues algo:
Código HTML:
Ver original
  1. <div id="00IDPRINCIPAL" class="PRINCIPAL" onclick="mostrardiv('');">

Es decir, en tu archivo css styleii13.css en la linea 110 (o eso me dice chrome) faltaría que indicases una altura. Prueba añadirle
Código CSS:
Ver original
  1. height:89px;

No obstante ten en cuenta que si más adelante quieres poner un banner en esa posición o cualquier otra cosa, deberás aumentar la altura.

Espero que con eso se te solucione.
  #8 (permalink)  
Antiguo 29/01/2013, 04:53
sidneyendis
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: Alineado vertical en EXPLORER erroneo

ahh!! y sobre el titulo....
... antetodo... lo primero que me viene ala cabeza y que me choca de primeras es que no entiendo porque pones mayusculas para definir la clase de un DIV si luego en tu archivo css está en minusculas... Corrigelo y a ver si así IE lo interpreta mejor:
Es decir;
En tu archivo html tienes lo siguiente:
Código HTML:
Ver original
  1. <div id="titulo" class="zonapanoTITULO">El Rey Monje</div>
y lo siguiente:
Código HTML:
Ver original
  1. <div id="titulo2" class="zonapanoTITULODIRECCION"><!-- D4  -->P plaza de López Allué 22001 Huesca (Huesca)  </div>

y en tu archivo css las clases las tienes de la siguiente forma definidas:
Código CSS:
Ver original
  1. .zonapanotitulo{/*Código css*/}
  2. .zonapanotitulodireccion{/*Código css*/}

Por lo tanto.... quitale las mayúsculas y si no funciona seguimos probando...

Ah! Acuérdate de borrar cache...

Etiquetas: erroneo, explorer, imagenes, vertical
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




La zona horaria es GMT -6. Ahora son las 14:41.