Espacio sin sentido bajo imagen

fabioalma · #1 (**permalink**) 14/12/2008, 17:35

Hola buenos dias;

estoy haciendo un diseño pero me encuentro con el siguiente problema;

he puesto en una fila de una única celda una imagen pero resulta que al abrirlo en firefox y opera (IE no he probado pq uso linux) se me crea un pequeño espacio que no entiendo porque esta ahi, y deseo eliminarlo. NO tnego ningun salto de linea BR ni altos (height=tal) definidos de ningún tipo.

Para que veais de que hablo os adjunto esta imagen: (quitar xxx, no me dejaba porque dice que es para prevenir SPAM)

httpxxx://www.freeimagehosting.net/image.php?0be0775d7b.png

Veis ese pequeño espacio blanco debajo de la imagen de abajo? Quiero que no este ahi...

Y este es el código HTML:

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>

<TITLE> :: Beauty Bay 2009 :: Massage & Beauty :: Canary Islands :: </TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css" />
</HEAD>
<BODY>
<table class="overall" align="center" width="950" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="350"><img src="topleft.gif" width="350" height="74" border="0" alt=""></td>
<td width="600">


<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle"><font size="-1"> | home | about us | therapists | treatments | water shiatsu | shop | contact |</font></TD>
</tr>
</table>


</td>
</tr>
</table></td>
</tr>

<tr>
<td>
<img src="spa1.jpg" width="950" height="227" border="0" alt="">
</td>
</tr>
</table>

</BODY>

</HTML>

Muchas gracias!!

Dnielf · #2 (**permalink**) 14/12/2008, 18:35

Hola Fabio, acabo de estudiar esto de las tablas , he experimentado con tu código y la solución que encontré (para Iexplorer) es meter la última imagen dentro de una tabla:

Código HTML:

<table cellpadding="0" cellspacing="0">
<tr><td><img src="spal.jpg" width="950" height="227" border="0" alt=""></td></tr></table>

Sin embargo para otros navegadores ( no te das cuenta pero a todas las imágenes les sale ese espacio blanco) el problema sigue :

http://img258.imageshack.us/img258/3192/problemaxm2.jpg

Saludos, yo también quiero la solución.

Dnielf · #3 (**permalink**) 14/12/2008, 19:37

Encontré la solución, aunque con otras etiquetas (copia el cuerpo):

Código HTML:

<BODY>
<table class="overall" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td><img src="topleft.gif" alt="topleft"></td><!--Fin de tabla superior izquierda-->
<td><table border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                    <td align="center" valign="middle"><font size="-1"> | home | about us | therapists | treatments | water shiatsu | shop | contact |</font></TD>
                    </tr>
          </table>
</td>
</tr>
<!--Fin de parte superior-->
<tr><td colspan="2"><img src="spal.jpg" alt="spal"></td></tr>
</table></body>

Espero que esa sea

fabioalma · #4 (**permalink**) 15/12/2008, 08:32

que va, ninguno me funciona... el primero no me interesa pq quiero que se vea en todos los navegadoras... y el segundo me hace desaparecer la imagen???

puff.

alguien mas?

matiasnicolas · #5 (**permalink**) 15/12/2008, 09:25

me parece que es hora de usar etiquetas div y no tablas, siempre hay problemas con las tablas y los diferentes navegadores.

aparte el diseño con talbas se considera bastante viejo

saludos!

Dnielf · #6 (**permalink**) 15/12/2008, 15:27

a mí si me funcionó lo segundo, además aparece en todos los navegadores.

alguien nos ayuda?

willyfc · #7 (**permalink**) 15/12/2008, 16:01

y si lo haces de esta manera:

Código HTML:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#cabecera{ width:950px; height:auto; display:table; background-color:#999999; margin:0 auto;}
#menu{ float:right; margin:3% 7% 0 0}
#contenedor{ width:950px; height:auto; margin:0 auto;background-color:#CCC}
</style>
</head>

<body>
<div id="cabecera">
	<img src="topleft.gif" width="350" height="74" border="0" alt="" style="float:left">
	<div id="menu">| home | about us | therapists | treatments | water shiatsu | shop | contact |</div>
</div>
<div id="contenedor">
<img src="spa1.jpg" width="950" height="227" border="0" alt="">
</div>
</body>
</html>