Foros del Web » Creando para Internet » HTML »

Doctype

Estas en el tema de Doctype en el foro de HTML en Foros del Web. 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> ...
  #1 (permalink)  
Antiguo 04/05/2011, 12:07
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Doctype

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
  #2 (permalink)  
Antiguo 04/05/2011, 12:16
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Doctype

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 04/05/2011, 13:25
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Doctype

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?
  #4 (permalink)  
Antiguo 04/05/2011, 13:31
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Doctype

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.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 04/05/2011, 14:06
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Doctype

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!!
  #6 (permalink)  
Antiguo 04/05/2011, 14:51
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Doctype

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
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 04/05/2011, 14:53
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 7 años, 2 meses
Puntos: 59
Cita:
Iniciado por Tarzan Ver Mensaje
¿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

__________________
01011111 01000001 01100100 01110010 01101001 01100001 01101110 01011111
  #8 (permalink)  
Antiguo 05/05/2011, 03:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Doctype

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_ Ver Mensaje
zerokilled, respondimos al mismo tiempo
¿Al mismo tiempo? Yo veo dos minutos de diferencia.

Saludos.

  #9 (permalink)  
Antiguo 05/05/2011, 10:17
 
Fecha de Ingreso: septiembre-2010
Mensajes: 525
Antigüedad: 7 años, 2 meses
Puntos: 59
Cita:
Iniciado por jomaruro Ver Mensaje
¿Al mismo tiempo? Yo veo dos minutos de diferencia.
Si, pero cuando comencé a escribir aún no estaba el comentario de zerokilled.

__________________
01011111 01000001 01100100 01110010 01101001 01100001 01101110 01011111
  #10 (permalink)  
Antiguo 05/05/2011, 11:29
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 6 años, 7 meses
Puntos: 236
Respuesta: Doctype

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 original
  1. Email: <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
  1. <style>
  2. *{
  3. margin:0px;
  4. padding:0px;
  5. border:0px;
  6. outline:0px;
  7. }
  8. </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!

Última edición por angelfcm; 05/05/2011 a las 11:37
  #11 (permalink)  
Antiguo 06/05/2011, 06:29
 
Fecha de Ingreso: noviembre-2005
Ubicación: Alicante (España)
Mensajes: 242
Antigüedad: 12 años
Puntos: 1
Respuesta: Doctype

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

Etiquetas: doctype
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 07:38.