Foros del Web » Creando para Internet » CSS »

En IE va, pero en FF no!

Estas en el tema de En IE va, pero en FF no! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/02/2007, 09:18
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Exclamación En IE va, pero en FF no!

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.
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #2 (permalink)  
Antiguo 27/02/2007, 11:21
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
Re: En IE va, pero en FF no!

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 .
  #3 (permalink)  
Antiguo 27/02/2007, 12:11
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Exclamación Re: En IE va, pero en FF no!

Cita:
Iniciado por Mikmoro Ver Mensaje
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.
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #4 (permalink)  
Antiguo 27/02/2007, 12:39
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
Re: En IE va, pero en FF no!

Cita:
Iniciado por Carxl Ver Mensaje
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.
  #5 (permalink)  
Antiguo 27/02/2007, 14:19
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Re: En IE va, pero en FF no!

Cita:
Iniciado por Mikmoro Ver Mensaje
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
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #6 (permalink)  
Antiguo 27/02/2007, 14:47
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
Re: En IE va, pero en FF no!

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!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #7 (permalink)  
Antiguo 27/02/2007, 16:30
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
Re: En IE va, pero en FF no!

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.
  #8 (permalink)  
Antiguo 28/02/2007, 09:26
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Re: En IE va, pero en FF no!

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!
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
  #9 (permalink)  
Antiguo 28/02/2007, 12:24
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
Re: En IE va, pero en FF no!

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.
  #10 (permalink)  
Antiguo 01/03/2007, 14:45
Avatar de Carxl
Colaborador
 
Fecha de Ingreso: agosto-2006
Ubicación: Bogotá
Mensajes: 2.993
Antigüedad: 11 años, 4 meses
Puntos: 70
De acuerdo Re: En IE va, pero en FF no!

Ok! Mikmoro, me queda claro!!!

Gracias por tu colaboración en mi duda!

Saludos.
__________________
Hay 10 tipos de personas, los que entienden binario y los que no. (Anónimo)
www.programandoweb.com
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 11:01.