Foros del Web » Creando para Internet » CSS »

Pequeño desajuste en IE y Scroll transparente

Estas en el tema de Pequeño desajuste en IE y Scroll transparente en el foro de CSS en Foros del Web. Hola, de nuevo por aquí. Paso a contarles: Estoy armando esta página y el home está casi listo, pero como es la base para todo ...
  #1 (permalink)  
Antiguo 25/03/2009, 21:45
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Pequeño desajuste en IE y Scroll transparente

Hola, de nuevo por aquí.
Paso a contarles: Estoy armando esta página y el home está casi listo, pero como es la base para todo el resto, deseaba tenerlo bien a punto para luego continuar.
En la imágen que adjunto en el 1 se ve correctamente con Firefox, en el 2 se observa que los divs cambian de lugar, bajando un poco el que contiene la imágen, y no he podido descubrir el motivo.

Asimismo, otra consulta; en la imágen 3 puede verse el formato que yo deseaba de scroll, algo más delicado y que pasara más desapercibido, pero no encuentro como realizarlo, en algún sitio me pareció haber leído que es javascript.
Bueno, si alguien me puede dar una manito, indicándome qué leer ó donde buscar, agradecida.



Adjunto el código para ver si alguien me puede indicar cuál es el error para el desencuadre en IE.


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ó, iluminación, vidrios" /> 	
	<meta name="Author" content="Paola Andrea Magariños" />
	<meta name="Language" content="es" />
	<title>&copy; Dreamlight</title>

	<!-- acceso a css -->
	<link href="dream.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]><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 class="imagen"></div>
	<div id="caja0">
		<div id="caja1"></div>
		<div id="caja2"><div style="width: 478px; height: 125px; overflow: auto; padding: 11px">
			<p>La   creación  de  vitrales   es  un  trabajo milenario  que  consiste  en  darle vida
			al cristal a través de toda la magia que le rodea. En  la  actualidad   se  siguen   produciendo
			vitrales   artesanales   con   temas diversos   y   la  era  moderna  no  solo  exige la
			preservación de lo clásico sino la representación  de un mundo dinámico  en  vidrio,  creando  un
			ambiente  de  alegría,  paz,  armonía,  elegancia  y  exclusividad, pues cada vitral es diseñado
			y elaborado de acuerdo al lugar y espacio que tan especialmente fue designado para él.</p>
			<p>Ahora los temas principales no son los pasajes bíblicos; también se representan diseños contemporáneos, plasmados no sólo en ventanas sino en puertas, lámparas, articulos de decoración, recuerdos, etc.
			Los vitrales seguirán sobreviviendo gracias a la magia de su luz, que después de tanto tiempo ya es propia.
			La elaboración del vitral es un arte y nuestras manos el instrumento perfecto para la realización de estas obras artesanales, con diseños únicos de alta calidad.</p>
		</div></div>
	</div>

	<div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /> </div> 
	<div class="corte"></div> 

	<!--pie-->
	<div id="pie">
			<img src="images/pie.jpg" alt="fondo decorativo" />
			</div>

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

/* 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;
border: solid 1px #35350e;
line-height: 22px;
} 
#fincabecera {width: 760px;
height: 32px;
}

/* contenido */ 

.imagen {width: 225px;
float: left;
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;
}

.corte {clear: both;} 

/* pie */ 

#pie {width: 760px;
float: left;
}
#pie img {float: left;
padding: 0px 0px 0px 0px;
}
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #2 (permalink)  
Antiguo 25/03/2009, 21:59
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Pequeño desajuste en IE y Scroll transparente

Super Pao, el estilo para las barras de desplazamiento solo funciona para IE, o bien, como mencionas, usando algo de javascript.

El desplazamiento es porque tienes:
Código html:
Ver original
  1. <!--cuerpo-->
  2.     <div id="cuerpo">
  3.     <div class="imagen"></div>
  4.     <div id="caja0">

Solo quita el <div class="imagen"></div> y parece que se soluciona.
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 25/03/2009, 22:06
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Pequeño desajuste en IE y Scroll transparente

Gracias Triby era eso
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #4 (permalink)  
Antiguo 25/03/2009, 23:18
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Pequeño desajuste en IE y Scroll transparente

Al parecer, a alguien le urgia la respuesta!!

Pequeño desajuste en IE y Scroll transparente -- Strike 1
Pequeño desajuste en IE y Scroll transparente -- Strike 2
Pequeño desajuste en IE y Scroll transparente -- Strike 3

Contestada tu pregunta! (en vez de ¡Estas Fuera!)
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #5 (permalink)  
Antiguo 25/03/2009, 23:29
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Pequeño desajuste en IE y Scroll transparente

Cita:
Iniciado por CaLiZzZ Ver Mensaje
Al parecer, a alguien le urgia la respuesta!!

Pequeño desajuste en IE y Scroll transparente -- Strike 1
Pequeño desajuste en IE y Scroll transparente -- Strike 2
Pequeño desajuste en IE y Scroll transparente -- Strike 3

Contestada tu pregunta! (en vez de ¡Estas Fuera!)
No CaliZzZ, ocurre que estaba subiendo el tema y comenzó a ponerse lento todo, cuando finalmente reaccionó y volvió a la normalidad, estaba subido por tres. De inmediato lo reporté, así que en cuanto lo vean los borrarán.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #6 (permalink)  
Antiguo 25/03/2009, 23:31
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Pequeño desajuste en IE y Scroll transparente

Entiendo perfectamente...! no lo dije por molestarte, al contrario... me pareció gracioso!

No hay ningun problema...
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #7 (permalink)  
Antiguo 26/03/2009, 10:09
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Pequeño desajuste en IE y Scroll transparente

No hay problema CaliZzZ.

Quedo al aguardo de ver lo del scroll.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
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 02:40.