Foros del Web » Creando para Internet » CSS »

Desajuste en IE6 y detallito en IE7

Estas en el tema de Desajuste en IE6 y detallito en IE7 en el foro de CSS en Foros del Web. Hola de nuevo, ya va bastante avanzado lo mío, y tengo el siguiente problema Imágen 1 (Firefox - se ve correcto) Imágen 2 (Internet Expolorer ...
  #1 (permalink)  
Antiguo 08/04/2009, 21:17
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Desajuste en IE6 y detallito en IE7

Hola de nuevo,
ya va bastante avanzado lo mío, y tengo el siguiente problema
Imágen 1 (Firefox - se ve correcto)


Imágen 2 (Internet Expolorer 7- se ve correcto, pero si se fijan se ve un pequeño guión al lado de cada miniatura).



Imágen 3 (Internet Explorer 6) (no sólo hay un desajuste poco feliz, sino que tampoco muestra las miniaturas de la galería, nada del contenido del div de la derecha). Puede ser que lo mismo ocurra por estar utilizando opacidad en ese div?


Imagino que tendría que ir por ese rumbo el error ya que he partido para realizar la galería basada en un código que no debería presentar dificultades con el ie6/ie7 y firefox

Adjunto nuevamente los códigos completos a ver si pueden ayudarme


Código HTML:
<!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" xml:lang="es" lang="es-es">

<head>
	<meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-1" />
	<meta name="description" content="Dreamlight" />
	<meta name="Keywords" content="Lámparas, Vitreaux, Vitró, vitraux, iluminación, vidrios" /> 	
	<meta name="Author" content="Paola Andrea Magariños" />
	<meta name="Language" content="es" />
	<title>&copy; Dreamlight-Galería</title>

	<link rel="shortcut icon" href="images/uno.jpg" />
	<!-- acceso a css -->
	<link href="dream.css" rel="stylesheet" type="text/css" />
<!--[if IE LT 7]><style>#caja1 {filter: alpha(opacity=30);}</style><![endif]-->
</head>

<body>
<!--contenedor general-->
<div id="contenedor">

	<!--imágen del header-->
	<div id="cabecera"/>
		<h1>Dreamlight</h1>
		<h2>Vitrales artesanales</h2>
		<div><img src="images/header.jpg" alt="Imagen institucional" /></div>
	</div> 

	<!--menu-->
	<div id="menu">
		<ul>
			<li><a href="home.html">HOME</a></li>
			<li><a href="galeria.html">GALERIA</a></li>
			<li><a href="trabajos.html">TRABAJOS</a></li>
			<li><a href="contacto.html">CONTACTO</a></li>
		</ul>
	</div>

	<!--imagen fin header-->
	<div id="fincabecera"/>
	<div><img src="images/guarda.jpg" alt="Imagen de adorno" /></div>

	<!--cuerpo-->
	<div id="cuerpo">
	<div id="caja0">
		<div id="caja1"></div>
		<div id="caja2">
			<ul id="gallery">
			<li><a href="Ver foto1 "><img class="min" src="images/uno.jpg" alt="Amaranta" />
            <img class="gran" src="images/unog.jpg" alt="Amaranta" /></a></li>
	        <li><a href="Ver foto2 "><img class="min" src="images/dos.jpg" alt="Marisa" />
            <img class="gran" src="images/dosg.jpg" alt="Marisa" /></a></li>
			<li><a href="Ver foto3 "><img class="min" src="images/tres.jpg" alt="Isabel" />
            <img class="gran" src="images/tresg.jpg" alt="Isabel" /></a></li>
	        <li><a href="Ver foto4 "><img class="min" src="images/cuatro.jpg" alt="Sabrina" />
            <img class="gran" src="images/cuatrog.jpg" alt="Sabrina" /></a></li>	 
	        <li><a href="Ver foto5 "><img class="min" src="images/cinco.jpg" alt="Hamilton" />
            <img class="gran" src="images/cincog.jpg" alt="Hamilton" /></a></li>
			<li><a href="Ver foto6 "><img class="min" src="images/seis.jpg" alt="lamp" />
            <img class="gran" src="images/seisg.jpg" alt="lamp" /></a></li>
	        <li><a href="Ver foto7 "><img class="min" src="images/siete.jpg" alt="Tributo" />
            <img class="gran" src="images/sieteg.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto8 "><img class="min" src="images/ocho.jpg" alt="Monaco" />
            <img class="gran" src="images/ochog.jpg" alt="Monaco" /></a></li>
			<li><a href="Ver foto9 "><img class="min" src="images/nueve.jpg" alt="Tributo" />
            <img class="gran" src="images/nueveg.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto10 "><img class="min" src="images/diez.jpg" alt="Monaco" />
            <img class="gran" src="images/diezg.jpg" alt="Monaco" /></a></li>
		    </ul>
            </div></div></div>
	
	<div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /></div>
	<div class="gran"></div>   
    
	<div class="corte"></div> 

<!--pie-->
	<div id="pie">					
	<ul>
		<li><a href="pao01.css" title="Acceso al archivo CSS">Código CSS</a> | </li>
		<li><a href="http://validator.w3.org/" title=" Referencia al validador XHTML de la W3C">Válido XHTML 1.0</a> | </li>
		<li><a href="http://jigsaw.w3.org/css-validator/" title=" Referencia al validador CSS de la W3C">Válido CSS 2.1</a> | </li>
		<li><a href="http://www.sidar.org/hera/index.php.es" title=" Referencia al analizador de accesibilidad de sidar.org">Accesibilidad</a></li>
	</ul>
    </div>

</body>
</html> 
Código:
/* alineación general */ 
* {margin:0; padding: 0;
}

body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color:#35350e;
}

#contenedor {
display:block;
width: 760px;
position:absolute;
top:50%;
left:50%;
margin-top:-212px;
margin-left:-380px;
border: solid 1px #000;
}

/* estilo de la cabecera */ 

#cabecera {width: 760px;
height: 92px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
display:none; 
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #ffffff;
margin-bottom: 4px;
display:none;
}

/* menú */ 

#menu {background-color: #C2C299;
width: 760px;
height: 26px;
}
#menu ul {
list-style-type:none;
text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #606966;
line-height: 26px;
font-family: "Times New Roman";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #c2c299;
color: #35350e;
line-height: 26px;
} 
#fincabecera {width: 760px;
height: 32px;
}

/* contenido */ 

.imagen {width: 225px;
/*float: auto;*/
border-right: solid 1px #c2c299;
}
.imagen img {float: left;
padding: 0px 0px 0px 0px;
}

#caja0 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background: url(images/fondotexto.jpg);
position: relative;
}
#caja1 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background-color: #b2b998;
position: relative;
opacity: 0.1;
}
#caja2 {position: absolute;
left: 30px;
top: 10px;
width: 450px;
}
p {color: #30373a;
font-family: Arial;
font-size: 1em;
font-weight: normal;
text-align:justify;
margin:0.5em;
}
#gallery { 
     width: 500px;
     height: 175px;	 
	 list-style-type:none; /*Quitamos viñeta*/
     margin:0px; /*Elimina sangría en IE6*/
     padding: 0;    /*Elimina sangría */
	 position: relative;
	 margin-top:12px;

}
		 
#gallery li {
	display:block;
	width:75px;
	height:80px;
	margin:0px 10px;
	float: left;
}
	 
img.min   {width: 67px;
height: 58px;
padding: 0px;
border: solid 1px #666600;
/*cursor:crosshair; reemplaza manito por cruz */
}	 
 
img.gran {
	display:block;
	width: 224px;
	height: 180px;
	overflow:hidden;
	visibility:hidden; /*Ocultamos la foto*/
	position:absolute;
	float: left; /*Algo mayor que el acho de la foto pequeña*/
	border:1px #000 solid;
	top:-23px;
	left:-257px;

}
            a:hover {display:inline;} /* Para IE6 */
            a:hover img.gran {visibility:visible; z-index:4;}

			.corte {clear: both;} 

/* pie */ 

#pie {width: 760px;
float: left;
}
#pie img {float: left;
padding: 0px 0px 0px 0px;
}
/* estilo del pie */
#pie {  
background: url(images/pie.jpg);
width: 760px;
margin: auto;
font-size: 0.8em;
height: 92px;
clear:both;
line-height:112px;
}
#pie ul { 
list-style-type: none;
text-align: center;
}
#pie ul li {  
display: inline;
color: #35350e;
}
#pie ul li a { 
padding: 0px 17px;
text-decoration: none;
color: #606966;
}
#pie ul li a:hover, #pie ul li a:active { 
color:#35350e;
text-decoration: underline;
}
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #2 (permalink)  
Antiguo 09/04/2009, 06:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Desajuste en IE6 y detallito en IE7

Buenas. Pues mira, son tres cosas:
1.- el comentario condicional lo tienes mal; debe ser así:
Cita:
<!--[if lt IE 7]><style>#caja1 {filter: alpha(opacity=30);}</style><![endif]-->
2.- para que aparezca en IE6 quítale el float right y el centrado a #caja1, y déjala así:
Cita:
#caja1 {width: 534px;
height: 180px;
background-color: #b2b998;
position: relative;
opacity: 0.1;
}
3.- para el guión que comentas de IE7, añade este selector a tu CSS:
Cita:
#gallery a {text-decoration: none;}
  #3 (permalink)  
Antiguo 09/04/2009, 06:55
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Desajuste en IE6 y detallito en IE7

Mikel muchísimas gracias, ahora en la tarde me pongo a modificar todo esto y te cuento.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #4 (permalink)  
Antiguo 09/04/2009, 11:54
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Desajuste en IE6 y detallito en IE7

Mikel, heme aquí otra vez....

Muchísimas Gracias,ha funcionado todo lo que me has dicho , ahora el tema es que el desajuste en ie6 no se soluciona; estimo que ahí el tema es un error mío paso a explicarte el por qué aunque no logro desembrollarlo:
La galería funciona fantástica en ie6 con galería y todo, ahora como esa galería no muestra imágen alguna a menos que tú sitúes el mouse sobre alguna miniatura y yo no deseaba que ese espacio quedara vacío, es que coloqué una imágen fija sobre la cual en FF y en IE7 va abriendo la imágen en grande.
Pero al abrirlo en ie6 me ocurre que la imágen en grande la desplaza hacia abajo, mostrando la imágen pulsada de las miniaturas donde corresponde.
No se si he sido clara, igual adjunto una imágen para ver si puedo graficar mejor lo que intento decir.

__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #5 (permalink)  
Antiguo 09/04/2009, 17:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Desajuste en IE6 y detallito en IE7

Sí. claro: te falta un float left en la caja .imagen:
Cita:
.imagen {width: 225px;
border-right: solid 1px #c2c299;
float: left;
}
  #6 (permalink)  
Antiguo 09/04/2009, 17:55
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Desajuste en IE6 y detallito en IE7

Hasta aquí bien, y ahí si logro lo que deseo en ie6, Ahora tengo otro problema
Cuando le doy en firefox a Ctrl -, para ir reduciéndola en pantalla, se desacomoda nuevamente. Sólo ocurre en firefox, en ie7 no, También aclaro que cuando le doy ctrl + no se desacomoda en absoluto.

Gracias Mikel por la paciencia y las respuestas. Prometo mejorar
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #7 (permalink)  
Antiguo 10/04/2009, 12:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Desajuste en IE6 y detallito en IE7

Cita:
Iniciado por pao01 Ver Mensaje
Cuando le doy en firefox a Ctrl -, para ir reduciéndola en pantalla, se desacomoda nuevamente.
Eso ya no lo veo.
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 20:26.