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>© 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;
}