Problemas con tamaño de celda. ¿Problema del explorador?

UveEne · #1 (**permalink**) 29/05/2008, 13:16

Hola,

Recientemente he tenido un problema con la altura de una simple celda.
En ella hay unas imagenes de 22px de altura. La celda también tiene 22px de altura.

Estoy desesperado, no hago más que probar cosas y no lo consigo, sigue apareciendo la celda más grande por la parte de abajo.

Y no me atrevo a abrirlo con Internet Explorer, porque entonces me pondré a llorar. xD

Os dejo el código: (Uso dreamweaver)

Código HTML:

<td width="900" colspan="5" background="http://images.habbos.es/rebound/menu_up.png" height="10">
		<center><a href="http://www.habbos.es/">
		<img border="0" onMouseOver="javascript:this.src='http://images.habbos.es/rebound/menu/inicio_a.png'" onMouseOut="javascript:this.src='http://images.habbos.es/rebound/menu/inicio.png'" src="http://images.habbos.es/rebound/menu/inicio.png" width="81" height="22"></a>&nbsp;&nbsp;&nbsp;
		<a href="?s=noticias">
		<img border="0" onMouseOver="javascript:this.src='http://images.habbos.es/rebound/menu/noticias_a.png'" onMouseOut="javascript:this.src='http://images.habbos.es/rebound/menu/noticias.png'" src="http://images.habbos.es/rebound/menu/noticias.png" width="81" height="22"></a>&nbsp;&nbsp;&nbsp;
		<a href="?s=articulos">
		<img border="0" onMouseOver="javascript:this.src='http://images.habbos.es/rebound/menu/articulos_a.png'" onMouseOut="javascript:this.src='http://images.habbos.es/rebound/menu/articulos.png'" src="http://images.habbos.es/rebound/menu/articulos.png" width="81" height="22"></a>&nbsp;&nbsp;&nbsp;
		<a href="?s=guias">
		<img border="0" onMouseOver="javascript:this.src='http://images.habbos.es/rebound/menu/guias_a.png'" onMouseOut="javascript:this.src='http://images.habbos.es/rebound/menu/guias.png'" src="http://images.habbos.es/rebound/menu/guias.png" width="81" height="22"></a>&nbsp;&nbsp;&nbsp;
		<a href="?s=concursos">
		<img border="0" onMouseOver="javascript:this.src='http://images.habbos.es/rebound/menu/concursos_a.png'" onMouseOut="javascript:this.src='http://images.habbos.es/rebound/menu/concursos.png'" src="http://images.habbos.es/rebound/menu/concursos.png" width="81" height="22"></a>&nbsp;&nbsp;&nbsp;
		<a href="foro/">
		<img border="0" onMouseOver="javascript:this.src='http://images.habbos.es/rebound/menu/foro_a.png'" onMouseOut="javascript:this.src='http://images.habbos.es/rebound/menu/foro.png'" src="http://images.habbos.es/rebound/menu/foro.png" width="81" height="22"></a>
</center></td>

Gracias de antemano.

micayael · #2 (**permalink**) 29/05/2008, 13:38

Hola UveEne.

Yo estoy teniendo el mismo problema y achique un poco el código para tratar de dar algún aporte a buscar alguna solución. De hecho esto pasa solo si la extensión es .xhtml ya que con .html funciona sin problemas. Al agregar una imágen dentro pasa esto según estoy probando ya que si tengo un div vacío con ancho y alto funciona super bien (por cierto. Uso tu imagen para la prueba http://images.habbos.es/rebound/menu/inicio.png)

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=UTF-8"/>
<title>prueba</title>
</head>

<body>
<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td><img border="0" src="http://images.habbos.es/rebound/menu/inicio.png" width="81" height="22" /></td>
  </tr>
</table>
</body>
</html>

Código HTML:

<td><div style="height:65px; width:100px; background-color:#CCCCCC;"></div></td>

UveEne · #3 (**permalink**) 29/05/2008, 13:50

Todo esto lo estoy haciendo en un archivo .php, aunque no debería dar problemas.

micayael · #4 (**permalink**) 29/05/2008, 13:52

También tienes la etique html así?

<html xmlns="http://www.w3.org/1999/xhtml">

UveEne · #5 (**permalink**) 29/05/2008, 13:56

La verdad es que no, voy a poner la etiqueta a ver que pasa.

Esque estaba comparando codigos.

Muchas gracias micayael.

_________

No me funciona eso...

micayael · #6 (**permalink**) 29/05/2008, 14:14

La verdad es que yo tengo esa etiqueta <html xmlns="http://www.w3.org/1999/xhtml"> que la tengo que poner si o si porque o sino no me reconoce que la pagina es xhtml. voy a probar yo con extensión php. La verdad es que con extensión .html no me da ese problema así que me imaginaba que era por el .xhtml.

Seguiré probando y te cuento si encuentro algo

micayael · #7 (**permalink**) 29/05/2008, 15:23

Hola.

Solucioné sacando la imagen de la celda y agregué al TD un style="" y por css puse como fondo la imagen. Logicamente le dejé al TD el height y el width.

<td style="background-image:url(logo.jpg)" height="62" width="211"></td>

Pruebalo a ver si te sirve. En mi caso leí por ahí que el xhtml separa la estructura del diseño lo que puede ser el problema.

Saludos

UveEne · #8 (**permalink**) 29/05/2008, 15:43

Nada...
La imagen sigue haciendo que en la celda haya más altura de la indicada.

Micayael, muchísimas gracias por la ayuda, aunque no haya surtido efecto.

Yo voy a seguir probando cosas a ver que pasa.
Si encuentro la solución lo postearé aquí, por si a alguien más le pasa.

Mikmoro · #9 (**permalink**) 29/05/2008, 15:55

No sé cuál será tu problema, pero si muestras el código completo o un enlace intentaré echarte una mano.

Mira este ejemplo:

http://www.araudi.net/forosdelweb/uveene.html

Es un código muy simple, para que se vea cómo encaja perfectamente.

Mikel.

UveEne · #10 (**permalink**) 29/05/2008, 15:57

http://www.habbos.es/indexAA.php

Estamos desarrollando una nueva versión y ahi me he quedado yo, en el menú.
xD
Nunca me habia pasado tal cosa.

Fijate como la celda naranja de arriba (la del menú) sobresale por debajo, aunque yo diga que debe de tener 22px y las imagenes que hay tienen 22px. Todo debería de ser correcto.

Mikmoro · #11 (**permalink**) 29/05/2008, 16:05

¿Y no será que en el td en realidad dice que tiene 24px?

<td style="background-image: url(http://images.habbos.es/rebound/men

p.png);" colspan="5" height="24" valign="middle" width="900">

Mikel.

UveEne · #12 (**permalink**) 29/05/2008, 16:12

Ay no, disculpa, que he puesto 22.

No, esque como al principio era 22 me he quedado con esa cifra.

Es 24 de alto y las imagenes tienen 22.

Mikmoro · #13 (**permalink**) 29/05/2008, 16:14

Cita:

Iniciado por UveEne

Ay no, disculpa, que he puesto 22.

No, esque como al principio era 22 me he quedado con esa cifra.

Es 24 de alto y las imagenes tienen 22.

No entiendo. ¿Y te preguntas por qué queda un espacio debajo? Me has desconcertado con esta última respuesta. Quizá no he entendido el problema.

Mikel.

UveEne · #14 (**permalink**) 29/05/2008, 16:22

Ayy, creo que me estoy explicando un poco mal.

Al poner altura 22px pasa lo mismo. Entonces he puesto 24px y he intentado centrarlo verticalmente y no me dejaba.

Creo que me he explicado mal desde el principio. ;-(

Mikmoro · #15 (**permalink**) 29/05/2008, 16:25

No te preocupes, la cosa es intentar entender qué te está ocurriendo. Veremos si se ve alguna otra cosa rara.

Mikel.

Mikmoro · #16 (**permalink**) 29/05/2008, 16:34

Yo no veo ninguna otra cosa rara. La imagen de fondo que usas en el td tiene 24px de altura, por eso a tu td le has puesto 24px, para que se vea completa. Luego tus botones tienen 22px de altura, y por eso se ven de forma que dejan un espacio debajo de exactamente 2px. Es lo lógico, lo que debería suceder.

Este es realmente el problema, estoy prácticamente seguro.

Por otro lado, si quieres alinear los botones tendrás que poner al td align="middle".

Mikel.

UveEne · #17 (**permalink**) 30/05/2008, 06:28

Vale. Está claro que yo de noche no funciono.

Mirad, al principio tenía la celda con 22px de alto con las imagenes dentro con 22px de alto también.

Sobresalía por debajo un trozo, así que dije: Le doy más alto (24px) y alineo las imagenes vertialmente.

PUES NADA, pasaba lo mismo pero la celda tenía 24px y las imagenes no se centraban verticalmente con valign="middle".

Seguro que es cualquier tontería, como siempre, pero no me doy cuenta.

micayael · #18 (**permalink**) 30/05/2008, 10:19

Hola de nuevo.

Si pruebas algo así? Creo que se podría reducir más el código con css pero ando un poco atareado. Decime si te funciona y veo como ayudar

Código HTML:

<table>
<tr>
<td width="900" colspan="5" background="http://images.habbos.es/rebound/menu_up.png" height="10">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td>
            <a href="http://www.habbos.es/">
                <div style="height:22px; width:81px; background-image:url(http://images.habbos.es/rebound/menu/inicio_a.png)"></div>
            </a>
        </td>
        <td>
            <a href="http://www.habbos.es/">
                <div style="height:22px; width:81px; background-image:url(http://images.habbos.es/rebound/menu/inicio_a.png)"></div>
            </a>
        </td>
        <td>
            <a href="http://www.habbos.es/">
                <div style="height:22px; width:81px; background-image:url(http://images.habbos.es/rebound/menu/inicio_a.png)"></div>
            </a>
        </td>
      </tr>
    </table>		
</td>
</tr>
</table>

Mikmoro · #19 (**permalink**) 30/05/2008, 10:32

Cita:

Iniciado por UveEne

Vale. Está claro que yo de noche no funciono.

Mirad, al principio tenía la celda con 22px de alto con las imagenes dentro con 22px de alto también.

Sobresalía por debajo un trozo, así que dije: Le doy más alto (24px) y alineo las imagenes vertialmente.

PUES NADA, pasaba lo mismo pero la celda tenía 24px y las imagenes no se centraban verticalmente con valign="middle".

Seguro que es cualquier tontería, como siempre, pero no me doy cuenta.

Yo diría que el problema podría estar en los tres espacios de relleno ( ) que usas al final de cada vínculo. Deberás comprobar el tamaño de letra que usas en la celda. Para probar, quita los espacios y a ver qué ocurre.

Mikel.

UveEne · #20 (**permalink**) 01/06/2008, 23:50

Cita:

Iniciado por Mikmoro

Yo diría que el problema podría estar en los tres espacios de relleno ( ) que usas al final de cada vínculo. Deberás comprobar el tamaño de letra que usas en la celda. Para probar, quita los espacios y a ver qué ocurre.

Mikel.

¡MUCHAS GRACIAS!

Y yo sin darme cuenta de que el problema era semejante tontería.

Algo tan simple...

Y otra cosa. Esque ahora no se qué usar para los espacios.

Mikmoro · #21 (**permalink**) 02/06/2008, 01:43

Cita:

Iniciado por UveEne

¡MUCHAS GRACIAS!

Y yo sin darme cuenta de que el problema era semejante tontería.

Algo tan simple...

Y otra cosa. Esque ahora no se qué usar para los espacios.

Deberías usar margn-left o margin-right.

Mikel.

UveEne · #22 (**permalink**) 02/06/2008, 08:19

Muchas gracias a los dos por la ayuda.

Ya he conseguido hacer que el menú superior se vea como toca.

Yo ya me imaginaba que era por cualquier tontería, pero no había caído en los espacios y el tamaño de la letra. La verdad es que es un poco chapucero hacer las separaciones con espacios. xD

Todo solucionado.