Foros del Web » Creando para Internet » CSS »

Espacio al final de imagenes XHTML

Estas en el tema de Espacio al final de imagenes XHTML en el foro de CSS en Foros del Web. Saludos a todos. Luego de leer un poco decidí pasar mis paginas a xhtml. Todo iba bien hasta que noté que justo debajo de las ...
  #1 (permalink)  
Antiguo 14/01/2011, 10:52
 
Fecha de Ingreso: diciembre-2009
Mensajes: 25
Antigüedad: 8 años
Puntos: 0
Pregunta Espacio al final de imagenes XHTML

Saludos a todos.


Luego de leer un poco decidí pasar mis paginas a xhtml. Todo iba bien hasta que noté que justo debajo de las imágenes (no se si en otros elementos también pasa) aparece un pequeño espacio en blanco como si tuvieran un padding-bottom.

He intentado todo y me doy cuenta que eso pasa cuando le agrego el atributo xmlns="http://www.w3.org/1999/xhtml" a la etiqueta <html>.

Aquí les dejo la prueba de los que les comento.

Pagina HTML:

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <img src="http://www.faerum.com/images/alt_banner_03.png" alt="">
        </div>
    </body>
</html> 
Se ve así [URL="http://www.faerum.com/prueba_html.php"]Prueba HTML[/URL]


Pagina con XHTML:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
        <title></title>
    </head>
    <body>
        <div style="border: 1px solid red;">
            <img src="http://www.faerum.com/images/alt_banner_03.png" alt=""></img>
        </div>
    </body>
</html> 

Se ve así [URL="http://www.faerum.com/prueba_xhtml.php"]Prueba XHTML[/URL]

Si alguien me puede ayudar a quitar ese molesto espacio se los agradecería de corazón.

Gracias por su atención.
  #2 (permalink)  
Antiguo 14/01/2011, 21:09
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Espacio al final de imagenes XHTML

POST REPETIDO: http://www.forosdelweb.com/f53/espac...-xhtml-876730/ favor no duplicar mensajes

en XHTML los tags sin cierre se cierran con [espacio en blanco]/>

<img src="http://www.faerum.com/images/alt_banner_03.png" alt="" />

ese espacio se debe a que cuando se usa (X)HTML en el modo estricto, se activa por defecto el modo estándar para toda la página, y ya no se utiliza el modo quirks, por lo que el espacio representa la cola de las letras (baseline) al tratarse img como elemento de linea (inline):

(por defecto img está en vertical-align: baseline)

tal como se explica en este tutorial: https://developer.mozilla.org/en/Ima...ysterious_Gaps, puede resolverse de varios modos, entre los más usuales:

display: block; para forzar a que img actue como elemento de bloque y no tenga en cuenta el baseline

vertical-align: bottom; para que no sea baseline y se acople al bottom, y por ende no se aplica el espacio (a excepción de que existan texto en la línea)

PD: en navegadores como firefox, el uso de DTD's (x)html trasitional que se rigen bajo modo estándar suelen relajar este aspecto como si fuese modo quirks, al menos en tag's como img.
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Última edición por maycolalvarez; 14/01/2011 a las 21:46
  #3 (permalink)  
Antiguo 15/01/2011, 10:04
 
Fecha de Ingreso: diciembre-2009
Mensajes: 25
Antigüedad: 8 años
Puntos: 0
De acuerdo Respuesta: Espacio al final de imagenes XHTML

OK Muchas gracias.

Discúlpenme por repetir el post, pero es que cuando envíe el formulario la pagina se quedó en blanco y le dí actualizar varias veces.

Le puse display: block; a las imágenes y a los object (para el flash) y me funcionó correctamente.

Ahora tengo una duda, utilicé el modo Strict para aprender a crear paginas bien formadas, pero ¿que ventajas obtengo realmente con esto?.

Gracias por la ayuda
  #4 (permalink)  
Antiguo 15/01/2011, 10:42
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 9 años, 4 meses
Puntos: 1530
Respuesta: Espacio al final de imagenes XHTML

básicamente el modo strict o estricto ofrece mayores compatibilidades entre navegadores, seguir el estándar propiamente dicho sobre el box model y las capas según el flujo como el problema que acabaste de presentar, ten en cuenta que al aplicar display: block; la img se convierte en elemento de bloque y escapa a las restricciones propias de elementos de flujo (inline) como el baseline, por ejemplo si añades texto, este se colocará debajo y no al lado de la imagen, también puedes usar float para ello
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...

Última edición por maycolalvarez; 15/01/2011 a las 14:43 Razón: ortografía
  #5 (permalink)  
Antiguo 15/01/2011, 12:34
 
Fecha de Ingreso: diciembre-2009
Mensajes: 25
Antigüedad: 8 años
Puntos: 0
Sonrisa Respuesta: Espacio al final de imagenes XHTML

OK lo tendré en cuenta.

También puedo usar vertical-align: bottom; o aplicar el display: block; unicamente donde lo necesite.

Ya mi problema y mis dudas están solucionados, gracias por el aporte.

Etiquetas: xhtml/css
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 11:08.