tamaño cajas diferente IE y FF

imnotinsane · #1 (**permalink**) 22/08/2006, 11:55

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>

stock · #2 (**permalink**) 22/08/2006, 17:28

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">

imnotinsane · #3 (**permalink**) 22/08/2006, 20:12

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.

opeth · #4 (**permalink**) 22/08/2006, 21:40

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"

Nigel · #5 (**permalink**) 23/08/2006, 05:06

En IE 6 no hay problema si especificas un doctype de XHTML. De lo contrario, renderizará igual que IE 5

webosiris · #6 (**permalink**) 23/08/2006, 05:47

Cita:

Iniciado por Nigel

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.

imnotinsane · #7 (**permalink**) 23/08/2006, 09:06

Pues no se que pasa, aun cambiando doctype y el tamaño con
.titulo { width: 545px; width/**/:/**/515px; }
sigue exactamente igual

asinox · #8 (**permalink**) 24/08/2006, 12:19

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

imnotinsane · #9 (**permalink**) 24/08/2006, 12:51

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

stock · #10 (**permalink**) 25/08/2006, 10:35

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

imnotinsane · #11 (**permalink**) 25/08/2006, 11:42

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?