En IE va, pero en FF no!

Carxl · #1 (**permalink**) 27/02/2007, 09:18

Hola, cómo van??

Resulta que estoy maquetando un sitio de prueba, pues hace rato que no lo hago. Al hacerlo, cómo lo tengo actualmente, se ve bien en IE pero no en FF. Sé que sino se ve en FF es problema mío y no del navegador, caso contrario si me pasara con IE

Bueno en fin, no entro en detalles para que vean de que se trata, les dejó el código para que lo observen y me ayuden a detectar mi error, por que yo solo no pude

La página de estilos:

Código:

body
{
	background-color:#666666;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10pt;
	text-align:left;
}

#contenedor
{
	width:850px;
	background-color:#FFFFFF;
	margin:auto;
	border:1px solid #000000;
	padding:10px;
}

#encabez
{
	background-image:url(../imag/X-MOS.gif);
	width:500px;
	height:100px;
	//margin:10px;
}

#up
{
	background-color:#FFCC00;
	margin-top:40px;
	padding:3px;
}

.enlaces
{
	background-color:#000000;
	color:#FFFFFF;
	padding:3px;
}

a.lenks,a.lenks:VISITED,a.lenks:ACTIVE,a.lenks:FOCUS,a.lenks:LINK
{
	color:#000000;
	font-weight:bold;
	text-decoration:none
}

a.lenks:HOVER
{
	color:#ffffff;
}

a.links,a.links:VISITED,a.links:ACTIVE,a.links:FOCUS,a.links:LINK
{
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}

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

#login
{
	background-color:#CCCCCC;
	margin:10px 0px 10px 0px;
	padding:3px;
	
}

#menu
{
	width:230px;
	border:1px solid #cccccc;
	float:left;
	background-color:#FFCC00;
	padding:5px;
}

#cuerpo
{
	float:right;
	width:580px;
	border:1px solid #cccccc;
	padding:5px;
}

#pie
{
	width:850px;
	display:block;
	background-color:#FFFFCC;
	margin:auto;
	text-align:center;
	padding:0px 10px 0px 10px;
}

El index.php

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!!! - El sitio de ayuda al programador y dise&ntilde;ador web!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles/a_styles.css" type="text/css">
</head>

<body>
	<div id="contenedor">
		<div id="encabez">
		</div>
		<div id="up">
			Visitando | <a href="#" class="lenks">Con&oacute;zcanos</a> |	<a href="#" class="lenks">Servicios</a> |	<a href="#" class="lenks">Programaci&oacute;n</a>
		</div>
		<div id="up1" class="enlaces">	
			<a href="#" class="links">Qui&eacute;nes somos?</a> |	<a href="#" class="links">Un poco de historia</a>
		</div>	
		<div id="up2" class="enlaces">	
			<a href="#" class="links">P&aacute;ginas est&aacute;ticas</a> | <a href="#" class="links">P&aacute;ginas de din&aacute;micas</a> | <a href="#" class="links">Dise&ntilde;o de Bases de Datos</a> | <a href="#" class="links">Aplicaciones web</a>
		</div>
		<div id="up3" class="enlaces">	
			<a href="#" class="links">Manuales</a> | <a href="#" class="links">Programas</a> | <a href="#" class="links">Scripts</a>
		</div>
		<div id="login">
			Es usuario registrado?
			<form action="index.php" method="post" name="form1">
				Usuario: 
				  <input name="usuario" type="text" size="10" maxlength="30">
				Contrase&ntilde;a: 
				<input name="contrase" type="text" size="10" maxlength="30">
				<input name="enviar" type="submit" value="Ir">
			</form>
			<a href="#">Reg&iacute;strese</a>, si a&uacute;n no lo es.
		</div>	
		
		<div id="menu">
			at mi den tru for the seken sal anj krou de ever sintell sou de much od ju te!!
		</div>
		<div id="cuerpo">
			<h1>Bienvenido a X-MOS</h1>
			Bienvenido!!!!
			Te invitamos a que visites nuestras diferentes secciones, php, javasript, AJAX.
			Registrate para poder descargar de manera gratuita manuales, scripts y dem&aacute;s programas.
		</div>
	</div>
	<div id="pie">
		Algunos derechos reservados<br>
		Colombia<br>
		2007
	</div>
</body>
</html>

Espero me puedan ayudar!!!!

Gracias de antemano y saludos.

Mikmoro · #2 (**permalink**) 27/02/2007, 11:21

Sólo un par de cositas: añade overflow: auto; a tu selector "contenedor" y añade una nueva clase form con un padding superior de 10px y un margen de 0px (por ejemplo, porque también se podría hacer de otras maneras):

#contenedor { border: 1px solid rgb(0, 0, 0);
margin: auto;
padding: 10px;
width: 850px;
background-color: rgb(255, 255, 255);
overflow: auto;
}

form {padding: 10px 0px;
margin: 0px;
}

Mikel.

P.D.: me encanta el chiste de tu firma, pero desgraciadamente no se puede contar en muchas partes

.

Carxl · #3 (**permalink**) 27/02/2007, 12:11

Cita:

Iniciado por Mikmoro

Sólo un par de cositas: añade overflow: auto; a tu selector "contenedor" y añade una nueva clase form con un padding superior de 10px y un margen de 0px (por ejemplo, porque también se podría hacer de otras maneras):

#contenedor { border: 1px solid rgb(0, 0, 0);
margin: auto;
padding: 10px;
width: 850px;
background-color: rgb(255, 255, 255);
overflow: auto;
}

form {padding: 10px 0px;
margin: 0px;
}

Hola Mikmoro. Gracias por tu ayuda, aún no la aplico, tan pronto llegue a casa la pruebo, pero me dejaste loco

en algo donde aplico la clase?? en el div "contenedor"??

Gracias de nuevo.

PDT: Y lo de mi firma, cómo tú dices, en muy pocos lugares se puede decir y que además lo entiendan, pero........., es una verdad absoluta.

Saludos.

Mikmoro · #4 (**permalink**) 27/02/2007, 12:39

Cita:

Iniciado por Carxl

me dejaste loco

en algo donde aplico la clase?? en el div "contenedor"??

En tu hoja de estilo. Allí donde tienes el selector #contenedor, añádele la propiedad overflow que te comento, y debajo de esta (o donde quieras de la hoja de estilo), añade el nuevo selector form tal y como te lo pongo.

Mikel.

Carxl · #5 (**permalink**) 27/02/2007, 14:19

Cita:

Iniciado por Mikmoro

En tu hoja de estilo. Allí donde tienes el selector #contenedor, añádele la propiedad overflow que te comento, y debajo de esta (o donde quieras de la hoja de estilo), añade el nuevo selector form tal y como te lo pongo.

Mikel.

Osea que la lo que me dices de "form", se aplica al form de registro que tengo??

Gracias de nuevo ya las cogí!

Saludos

Carxl · #6 (**permalink**) 27/02/2007, 14:47

Hola de nuevo Mikmoro. Ya probè tu soluciòn y fue de una!!! gracias.

Ahora me surgiò otra duda, me puedes explicar lo que hace el atributo overflow????, por que con esto se me arreglò?. Lo de form

lo siento, no me acordaba que era para posicionar el FORMMMMMM!!!!!. Disculpas!!

Gracias de nuevo y saludos!

Mikmoro · #7 (**permalink**) 27/02/2007, 16:30

Una caja puede tener una altura definida o no tenerla. Con Firefox, si la tiene, su contenido no la hará crecer de ninguna manera, y si no la tiene, crecerá dependiendo del contenido: si son elementos en línea, crecerá para albergar su contenido, pero si son otras cajas flotadas o con posición absoluta, la caja principal no crecerá, porque es como si estas cajas no ocuparan espacio dentro de ella.

De esa manera, overflow se usa para decir qué ocurrirá con el contenido que desborde la caja, y tiene 4 posibles propiedades: auto, scroll, hidden o visible.

Concretamente auto, significa que aprezcan las barras de scroll cuando sea necesario, es decir, cuando el contenido rebase el tamaño del contenedor.

De tal manera, si una caja tiene un alto definido, como ya hemos comentado que ésta no crecerá, si su contenido rebasa ese tamaño aparecerán las barras de scroll. Pero si la caja no tiene tamaño, y no ha crecido debido a su contenido (cajas flotadas por ejemplo), el overflow auto le obligará a crecer tanto como lo haga su contenido en lugar de sacar las barras de scroll.

En resumen, overflow auto hace crecer a una caja sin tamaño de alto definido que no haya crecido según su contenido, tanto como crezca su contenido.

Sé que no buscabas una explicación tan extensa como esta, pero como se ha respondido tantas veces a esta consulta, porque es una de las dudas más comunes y fuente habitual de errores, de paso la escribo lo más clara que se me ocurre para que la próxima vez que alguien lo pregunte le pueda referenciar directamente a esta respuesta.

Y de paso, me alegro de que te haya funcionado

Mikel.

Carxl · #8 (**permalink**) 28/02/2007, 09:26

Mikel, muchas gracias por tu repuesta y tu explicación quedé satisfecho!!!

Mirando y mirando, me encontré con esta otra solución:

1. Crear una clase y colocarle el atributo clear:both

Código:

.space
{
clear:both;
}

2. Después de mi div "cuerpo", colocar otro div aplicándole esta clase:

Código HTML:

<div id="cuerpo">
			<h1>Bienvenido a X-MOS</h1>
			Bienvenido!!!!
			Te invitamos a que visites nuestras diferentes secciones, php, javasript, AJAX.
			Registrate para poder descargar de manera gratuita manuales, scripts y dem&aacute;s programas.
</div>
<div class="space"></div>

Con esto también me funcionó. Ahora me surgieron 2 preguntas mas

1. Según tú, cual de las dos soluciones sería las mas óptima??
2. Cuál afecta mas a la hora de validar estilos???

De antemano muchas gracias!!!

Saludos!

Mikmoro · #9 (**permalink**) 28/02/2007, 12:24

Esta segunda manera, también muy habitual, en general suele producir el problema de que introduce una línea en blanco (un hueco de una línea) en explorer, algo indeseado.

Yo lo uso mucho, por ejemplo cuando una caja está dentro de otra y además de no crecer ella, tampoco lo hace su contenedora; con overflow ella crecería, pero la contendora no. También si la contenedora tiene height: auto;, por ejemplo. En fin, según la situación conviene más una cosa que otra.

Si es importante decir que la primera forma (con overflow) se considera más "semántica", porque la segunda incluye una caja vacía, lo que rompe un poco la semántica del sitio.

Mikel.

Carxl · #10 (**permalink**) 01/03/2007, 14:45

Ok! Mikmoro, me queda claro!!!

Gracias por tu colaboración en mi duda!

Saludos.