Doctype

Tarzan · #1 (**permalink**) 04/05/2011, 11:07

hola a todos,

me gustaría saber por qué, cuando escribo una página con este código:

<html>
<body>
Email: <input type="text" name="email" style="width:179px; height:15px;" />
</body>
</html>

El campo mide exactamente 179 de ancho por 15 de alto. Es decir, exactamente lo que quiero.

Y si escribo, lo mismo, pero con la directiva estándard xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><body>
Email: <input type="text" name="email" style="width:179px; height:15px;" />
</body>
</html>

entonces tanto el ancho como el alto del input vale 6 pixeles mas.

¿Por qué pasa esto?
¿Cómo lo arreglo si ya tengo un proyecto avanzado con este DocType?

un saludo

zerokilled · #2 (**permalink**) 04/05/2011, 11:16

buenas,

probablemente porque al tener un Doctype, el navegador aplica una hoja de estilo u otra a los elementos. recuerda que el doctype le dice al navegador como debe comportarse. al decirle que utilice el modo estandar, el navegador usa directrices distintas a cuando usa el modo quirk.

Tarzan · #3 (**permalink**) 04/05/2011, 12:25

MMmm... es que me armo unos jaleos con esto de los estilos...
Al principio no usaba ningún doctype y los pixeles se me respetaban tal cual los definía pero, dependiendo del navegador que usara, IE o MOZILLA, se representaban de una manera u otra los estilos y me obligaba a tener dos archivos css por el modelo de cajas...

Por eso implementé el doctype... ¿y ahora qué hago?

quito el doctype y sigo con dos ficheros css, o tres o cuatro dependiendo del navegador...

creo que no estoy bien informado y desconozco la mejor solución para todo esto.
¿Alguien puede iluminarme o aconsejarme?

zerokilled · #4 (**permalink**) 04/05/2011, 12:31

mi consejo es que siempre use un doctype, cualquier que cumpla con tu necesidad. lo segundo, define un reset en la hoja de estilo para asegurar que en todos los navegadores se vean igual. a partir de ahi realizas la hoja de estilo.

Tarzan · #5 (**permalink**) 04/05/2011, 13:06

Por favor, Zerokilled,

¿puedes explicarme en qué consiste eso de resetear el css para usar el mismo en todos los navegadores?

Eso es lo que yo llevo queriendo hacer desde los tiempos de Matusalem!!

zerokilled · #6 (**permalink**) 04/05/2011, 13:51

en la web hay mucha teoria sobre este tema, incluso en el foro de css estoy seguro que encuentras algunas explicaciones. es cuestion de poner reset css en cualquier buscador. algunos enlaces de posible interes:
http://www.anieto2k.com/2007/08/07/r...o-estilos-css/
http://www.cssblog.es/10-tecnicas-para-resetear-css/
http://es.wikipedia.org/wiki/Reset_CSS

_Adrian_ · #7 (**permalink**) 04/05/2011, 13:53

Cita:

Iniciado por Tarzan

¿puedes explicarme en qué consiste eso de resetear el css para usar el mismo en todos los navegadores?

10 técnicas para resetear el CSS

zerokilled, respondimos al mismo tiempo

jomaruro · #8 (**permalink**) 05/05/2011, 02:30

Hola:

Otra cosa que puedes hacer es usar FF o Chrome para ver los cambios cuando maquetas y cuando lo tengas terminado, comprobar como se ve con IE y arreglar los errores que encuentres (que los habrá, por culpa del IE no tuya) .

Cita:

Iniciado por _Adrian_

zerokilled, respondimos al mismo tiempo

¿Al mismo tiempo? Yo veo dos minutos de diferencia.

Saludos.

_Adrian_ · #9 (**permalink**) 05/05/2011, 09:17

Cita:

Iniciado por jomaruro

¿Al mismo tiempo? Yo veo dos minutos de diferencia.

Si, pero cuando comencé a escribir aún no estaba el comentario de zerokilled.

angelfcm · #10 (**permalink**) 05/05/2011, 10:29

Hola aquí te explico que sucéde.
Debes tomar en cuenta que el doctype y el tipo de navegador modifica los estandares de estilos para cada elemento de HTML, por lo que aquí parece que las medidas son diferentes.
Las medidas comunes para cualquier elemento son:
Padding
Margin
Border
Ahora según tu archivo debes modificarlo de la siguiente manera:

Código HTML:

Ver originalEmail: <input type="text" name="email" style="width:179px; height:15px;border:1px solid #000;padding:0px" />

Básicamente lo que hizo el doctype fué aumentar un par de pixeles al padding y al border le subio 1px.

Resetear básicamente serpia agregar éste estilo al inicio de cualquier estilo:

Código CSS:

Ver original<style>
*{
margin:0px;
padding:0px;
border:0px;
outline:0px;
}
</style>

Esto sería algo básico para que las medidas sean más parecidas en los navegadores, pero hay un poco más para "resetear"

Saludos!

Tarzan · #11 (**permalink**) 06/05/2011, 05:29

Muchísimas gracias a todos!!

No tenía ni idea de esa opción de reseteo.. De hecho, yo veía en algunos ejemplos la asignación de 0px a los márgenes y al padding y no entendía para qué se hacía eso porque suponía que así debía de ser por defecto.

Voy a documentarme bien con los enlaces que me habéis pasado.

un saludo!!