Problema con Explorer

Carxl · #1 (**permalink**) 01/10/2006, 20:36

Si, buenas....

Mmmmm resulta que estoy tratando de maquetear una web con estilos css, lo que he hecho se ve bien en Mozilla Firefox. Cuando veo en Explorer cierta capa se coloca al fondo de otra.

Dicho esto, explicaré un poco mejor mi problema. Hice un div contenedor con anchura de 760px, pues para que este cargara con toda la página, dentro de dicha capa hice otro div que se coloca al lado izquiero de la pantalla con anchura de 180px; coloqué otro div principal que es el que tiene el contenido del sitio con un ancho de 570px flotando al lado derecho. Ahí todo va bien, se ven los dos en sus posiciones correspondientes.

El problema va cuando hago un div "pie", que sería mi pie de página, le otorgo el atributo clear:both para que se coloque debajo de las otras dos capas. Efectivamente lo hace, en Firefox se ve como quiero, pero en explorer esta capa "pie" aparece detrás de la que está flotando al lado izquierdo. Qué me tocaría agregar o modificar para que explorer lo tome como lo toma Firefox??

Espero que haya sido claro en la explicación. Ah! otra cosa la capa "pie" también está dentro de contenedor.

Agradezco de antemano su ayuda....

Carxl · #2 (**permalink**) 02/10/2006, 08:50

He venido realizando pruebas, y al realizar varias, me encuentro con lo siguiente:

En IE parece que no toma la anchura de la capa contenedor. Le coloco márgenes a la capa "piedepagina" y nada, padding y nada. Siempre se queda pegado con la capa la div "izquierda" le toma su alto osea que por el lado izquierdo trata de hacerlo bien, pero si llego a escribir mas, de tal manera que el texto que se encuentra en la capa "cuerpo" (la que está a la derecha), sobrepase la altura de la div "izquierda", el maldito "piedepagina", aparece por detrás de la capa "cuerpo", mejor dicho, la capa "cuerpo" se sobrepone a la capa "piedepagina", debería la capa "piedepagina" ir bajando a medida que uno vaya escribiendo en la capa "cuerpo" pero sigue en una posición estática. Aclaro que sólo me pasa en IE por que Mozilla todo va bien.

A ninguna capa, absolotunamente a ninguna le he puesto height....

La página que trato de hacer, es un modelo parecido a la de www.desarrolloweb.com que muestra en su taller de maquetacion por CSS, lo que cambia es que el cuerpo va a la derecha y los vinculos van a la izquierda, ah y el tamaño de las capas, arriba ya dije las dimensiones.

Gracias.... y espero haber sido claro.

marce_str · #3 (**permalink**) 02/10/2006, 09:00

mmm... mejor publica tu codigo, tanto el html como el css, por ahi alguno de nosotros podemos tocarlo y ver que pasa.

Saludos!

Carxl · #4 (**permalink**) 02/10/2006, 13:37

Este es el archivo estilos.css

Código:

/*CSS Document*/

body{
	background:url(images/fondo.gif);
	font:10pt Verdana, Arial, Helvetica, sans-serif;
	color:#333333;
	text-align:left;
	margin:20px 0px 20px 0px;
}

/*#prueba{
height:auto;
}*/

#contenedor{
	width:760px;
	margin:auto;
	text-align:left;
	background:#ffffff;
	border:2px solid #cccccc;
}

#cabecera{
	background:url(images/encabezado.jpg);
	border-bottom:1px solid #cccccc;
	width:760px;
	height:98px;
	/*margin:auto;*/
}

#left{
	width:180px;
	float:left;
	/*border-top:1px solid #cccccc;*/
	/*border-right:1px solid #cccccc;*/
	border:1px solid #cccccc;
	background:#009966;
	color:#FFFFFF;
}

.title{
	font:10pt Verdana, Arial, Helvetica, sans-serif;
	color:#666666;
	background:#ffffcc;
	text-transform:uppercase;
	letter-spacing:1px;
	padding:7px 3px 7px 3px;
	margin:0px;
}

.cuerpoleft{
	padding:10px 5px 10px 5px;
}

.cuerpoleft li{
	list-style:none;
	line-height:18px;
}

a.links,a.links:VISITED,a.links:ACTIVE,a.links:FOCUS,a.links:LINK{
	color:#FFFFFF;
}

a.links:HOVER{
	color:#ffffcc;
}

input{
	font-size:8pt;
	color:#666666;
}

.camptext{
	width:60px;
	border:1px solid #cccccc;
}

#usuario input{
	margin-left:27px;
}

#usureg{
	letter-spacing:normal;
}

#cuerpo{
	width:565px;
	float:right;
	padding:10px 5px 10px 5px;
	border:1px solid #cccccc;
	background-color:#ffffff;
}

h1{
	font-weight:normal;
	text-align:center;
}

/*.parr{
	
	padding-top:25px;
}*/

/*p{
line-height:18px;
}*/

a{
	color:#3366FF;
}

#pie{
	clear:both;
	text-align:center;
	padding:6px 0px;
	background:#F2FFFF;
	/*line-height:2px;*/
	/*margin:47px 0px;*/
	border-top:1px solid #cccccc;
}

Este es el index.html

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Bienvenido a T.V. Ambalema - Lo que usted quiere!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="estilos.css" type="text/css">
</head>

<body>
	<div id="contenedor">
	
		<div id="cabecera">
		</div>
		<div id="left">
			<h4 class="title">Ingresar</h4>
			<div id="primeizq" class="cuerpoleft">
				<form action="#" method="post" name="formingusu" onSubmit="">
					<div id="usuario">Usuario:
						<input name="login" type="text" class="camptext">
					</div>
					<div id="contrasena">Contrase&ntilde;a:	
						<input name="password" type="password" class="camptext">
					</div>
					<div id="botonir">
						<input type=image src="images/go.gif">
					</div>					
				</form>
			</div>
			<h4 class="title">Con&oacute;zcanos</h4>
			<div id="segunizq" class="cuerpoleft">	
				
					<li><a href="#" class="links">Inicio</a></li>
					<li><a href="#" class="links">Qui&eacute;nes somos?</a></li>
					<li><a href="#" class="links">Servicios</a></li>
				
			</div>
			<h4 id="usureg" class="title">Usuarios registrados</h4>
			<div id="cuartoizq" class="cuerpoleft">	
				
					<li><a href="#" class="links">Consultas</a></li>
					<li><a href="#" class="links">PQR</a></li>
			</div>
		</div>
		
		<div id="cuerpo">
			<h1>BIENVENIDO(A)!</h1>	
			<p>
				Estimado(a) visitante estamos muy complacidos con su presencia. Lo(a) invitamos a que 
				conozca nuestras secciones y se familiarice con su contenido.
			</p>
			<p>
				Si es usuario(a) de T.V. Ambalema, inicie sesi&oacute;n para que pueda acceder a sus 
				servicios virtuales.
			</p>
			<p>
				Si a&uacute;n no es un(a) usuario(a) registrado(a), podr&aacute; ver nuestros 
				servicios ofrecidos en la secci&oacute;n 'Con&oacute;zcanos'. 
			</p>
			<p>
				Esperamos que nuestro sitio sea de su agrado.
			</p>
			<p id="centr">
				Gracias por visitarnos!!!
			</p>
			<p>
				Qu&eacute; ser&aacute; lo que no deja bajar el pie de pagina en Internet Explorer????. En Mozilla Firefox 
				todo va bien pero en la barrabasada de Explorer, no entiende que tiene que bajar el pi&eacute; a raz con el cuerpo.... 
			</p>
			<p>
				Parece ser que no toma la anchura que se le va otorgando a medida que uno va ingresando texto en la div 
				&quot;cuerpo&quot;, lo que oacasiona que siga con el mismo ancho y la div &quot;pie&quot;, no se coloque donde 
				debe ser.
			 </p>
		</div>
		<div id="pie">
			Tiene sugerencias, comentarios? escr&iacute;banos: <a href="mailto:[email protected]">[email protected]</a>
		</div>		
	</div>
</body>

</html>

Espero que me puedan ayudar..... Gracias de antemano.

marce_str · #5 (**permalink**) 02/10/2006, 13:55

ponele algun valor a height en el #pie y listo, ahi lo toma bien y lo ubica en su lugar. Total el pie no tiene por que ser una caga de altura varialble.

De todas formas ojo co el texto, te lo varia todo. No se bien cual es la razon, pero supongo que es que no especificaste muchos valores. Es decir, especifica el tamaño del h1 por ejemplo, asi tanto IE como Firefox te los toma de igual forma.
Si no se arreglan asi esos cambios proba con ponerle altura a ".cuerpoleft li", o a otros elementos que sabes que van a quedar fijos

Carxl · #6 (**permalink**) 02/10/2006, 14:02

Viste el código???, Probalo y verás..... La verdad lo de height en #pie no lo he hecho lo haré y te comentaré.

Gracias...

kahlito · #7 (**permalink**) 02/10/2006, 16:44

Hola Carxl, como bien dice marce_str, tienes que cambiar el heigth, aunque tambien añadirle esto height:10px; y line-height:10px; (por ejemplo, adáptalo a tu diseño):

Código:

#pie{
	clear:both;
	text-align:center;
	padding:6px 0px;
	background:#F2FFFF;
	height:10px;
	line-height:10px;
	border-top:1px solid #cccccc;
}

hucasys · #8 (**permalink**) 02/10/2006, 19:02

Acá hay una buena discusión sobre los escurridizos pies > footer css en inglés

Carxl · #9 (**permalink**) 02/10/2006, 20:02

Haré lo que me dicen, probaré sus ideas, tan pronto tenga un resultado, lo comentaré.

Gracias....

Otra cosa, como manejé los divs???, lo hice bien??? O tienen una sugerencia??

Carxl · #10 (**permalink**) 03/10/2006, 09:04

Listo..., todo se muestra bien, tanto en Explorer como en Mozilla. Ahora me surgío otra duda, siempre debo poner el attributo height para los pie de páginas??? por qué en IE si y en Mozilla no?

De nuevo muchas gracias por la ayuda..... y haberme safado de esta.

See you!

kahlito · #11 (**permalink**) 03/10/2006, 09:32

No siempre, fijate en este otro enlace:

http://www.tierradenomadas.com/rc010.phtml

Y su ejemplo:

http://www.tierradenomadas.com/rc010a.html

marce_str · #12 (**permalink**) 03/10/2006, 11:30

Cita:

Iniciado por Carxl

Ahora me surgío otra duda, siempre debo poner el attributo height para los pie de páginas??? por qué en IE si y en Mozilla no?

La verdad que no estoy muy seguro, yo en realidad soy relativamente nuevo en todo esto de CSS, pero por mi corta experiencia te diria que la razon de algunos cambios se debe a que IE no es lo mismo que Firefox en cuanto a las "medidas".

Yo creo que hay que ponerlo cuando realmente lo necesitas, o sea... tenes que probar y ver cuales son las diferencias.
Recomendación: instalte la extension IE Tab para firefox, vas a poder probar la pagina en los dos navegadores en la misma ventana de firefox. OJO... si tenes la pagina centrada, cuando te pasas a IE vas a notar un movimiento de todo porque en IE se agrega el scroll del costado.