Foros del Web » Creando para Internet » CSS »

tamaño cajas diferente IE y FF

Estas en el tema de tamaño cajas diferente IE y FF en el foro de CSS en Foros del Web. Hola, tengo un problema que además me pasa de vez en cuanto y me tiene En IE las cajas no tienen el mismo tamaño que ...
  #1 (permalink)  
Antiguo 22/08/2006, 12:55
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
tamaño cajas diferente IE y FF

Hola, tengo un problema que además me pasa de vez en cuanto y me tiene

En IE las cajas no tienen el mismo tamaño que en Firefox. Aqui en este simple ejemplo me pasa que la fecha sale mas lejos en IE

Código:
	 	<div><ul style="list-style-type:none; clear:both;">
				<li class="titulo" style="float:left; width:515px; padding-right:30px; padding-bottom:10px;">LOS ESPA&Ntilde;OLES GANAN EL IV OPEN Y ADEMAS LA GANARON TODOS LOS OTROS A&Ntilde;OS</li>
				<li class="fecha">21/08/2006</li>
			 </ul>
		</div>
__________________
webplan - Diseño y desarrollo de páginas webs.
Desde Andalucía - España
  #2 (permalink)  
Antiguo 22/08/2006, 18:28
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 13 años, 5 meses
Puntos: 53
Si, en efecto, y es que IE no cumple con los estandares del modelo de cajas, lo que yo hago es hacer mi CSS con los estandares, y luego hago otro CSS corrigiendo algunas medidas o bugs de IE.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ColorOne</title>

<script type="text/javascript" src="common/javascript/prototype.js"></script>
<script type="text/javascript" src="common/javascript/effects.js"></script>
<script type="text/javascript" src="common/javascript/ajax.js"></script>

<link href="common/css/layouts.css" rel="Stylesheet" type="text/css" />

<!--[if gte IE 5.5]><![if lt IE 7]>
<link href="common/css/IEBugs.css" rel="Stylesheet" type="text/css" />
<![endif]><![endif]-->

</head>
<body>

<div id="frame">
<div id="superior">
  #3 (permalink)  
Antiguo 22/08/2006, 21:12
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
Bien, pero ese pequeño ejemplo en concreto porqué no funciona bien ?

He definido al principio todos los margenes a 0 con

*{
padding:0;
margin:0;
border:0;
}

He estado leyendo sobre el fallo de las cajas pero no me aclaro como arreglarlo y ademas he leido que eso es solo para IE 5, y si yo uso el 6, entonces no deberia estar pasandome.
__________________
webplan - Diseño y desarrollo de páginas webs.
Desde Andalucía - España
  #4 (permalink)  
Antiguo 22/08/2006, 22:40
Avatar de opeth  
Fecha de Ingreso: junio-2004
Ubicación: Distrito Federal, México
Mensajes: 338
Antigüedad: 13 años, 5 meses
Puntos: 0
pues porque para IE width es = 515px
y para FF son 545px;

solución: .titulo { width: 545px; width/**/:/**/515px; }


PD. eso es un hack también se puede hacer con comentarios condicionales pra IE como la primera solución.

articulo de diseñorama "El modelo de cajas"

Última edición por opeth; 22/08/2006 a las 22:48
  #5 (permalink)  
Antiguo 23/08/2006, 06:06
 
Fecha de Ingreso: agosto-2006
Ubicación: Madrid
Mensajes: 95
Antigüedad: 11 años, 4 meses
Puntos: 0
En IE 6 no hay problema si especificas un doctype de XHTML. De lo contrario, renderizará igual que IE 5
  #6 (permalink)  
Antiguo 23/08/2006, 06:47
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 9 meses
Puntos: 997
Cita:
Iniciado por Nigel Ver Mensaje
En IE 6 no hay problema si especificas un doctype de XHTML. De lo contrario, renderizará igual que IE 5
va por el lado que dice Nigel.. el IE 6 tiene 2 modos posibles de renderizar el html. El QUIRKS o el "estándar".. en modo estardar se supone que respeta los estándares web (se supone.. por eso lo pongo entrecomillado ), y el modo quirks se comporta como si fuera IE 5 (osea, se pasa los estándares por donde ya sabés..).

Depende del doctype que le pongas, se va a comportar de uan forma u otra... aquí te dejo la comparativa de que cosas cambian entre los modos estricto y quirks, además aquí tenés la lista de doctypes que activan uno u otro modo.
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #7 (permalink)  
Antiguo 23/08/2006, 10:06
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
Pues no se que pasa, aun cambiando doctype y el tamaño con
.titulo { width: 545px; width/**/:/**/515px; }
sigue exactamente igual
__________________
webplan - Diseño y desarrollo de páginas webs.
Desde Andalucía - España
  #8 (permalink)  
Antiguo 24/08/2006, 13:19
Avatar de asinox  
Fecha de Ingreso: enero-2002
Ubicación: Santo Domingo
Mensajes: 2.712
Antigüedad: 15 años, 10 meses
Puntos: 6
Imnotinsane trata esto:
Código:
/* para FF */
html>body .titulo{
   width: 515px;
}
y para ie pues lo dejas igual que como lo tienes, osea tendras dos referencias a la clase .titulo , la normal y esta para FF

Saludos
__________________
www.dataautos.com
  #9 (permalink)  
Antiguo 24/08/2006, 13:51
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
pues no se porque pero no me funciona esto

/* para FF */
html>body .titulo{
width: 515px;
}

de ninguna manera.
He probado en el ejemplo, poniendo una nueva capa pero eso de html>body nunca tiene efecto en FF ni en IE por supuesto
__________________
webplan - Diseño y desarrollo de páginas webs.
Desde Andalucía - España
  #10 (permalink)  
Antiguo 25/08/2006, 11:35
Avatar de stock  
Fecha de Ingreso: junio-2004
Ubicación: Monterrey NL
Mensajes: 2.390
Antigüedad: 13 años, 5 meses
Puntos: 53
mira, ya se te han planteado las soluciones existentes, revisa bien tu codigo, pues cada una de las soluciones expuestas en alguna ocacion yo las he usado y siempre me funcionan, revisa que tus IDs este bien, y que tus clases tambien....

have funnnnnnn
  #11 (permalink)  
Antiguo 25/08/2006, 12:42
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
pues lo que me estaba dando problemas es el clear y float. IE y FF hacen cosas diferentes cuando los pongo ! Sobretodo el clear... ¿esto es normal?
__________________
webplan - Diseño y desarrollo de páginas webs.
Desde Andalucía - España
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 06:00.