Altura de 100% en Internet Explorer

Haggen · #1 (**permalink**) 24/05/2006, 14:02

Hola chicos.. tengo un problemilla con IE, yo normalmente uso Firefox pero cuando diseño trato de que se vean exactamente iguales en todos los navegadores.

Bueno, con IE estoy teniendo un problema que yo creo que es altura de tabla al 100%, mientras con FF se ve perfecta, IE parece no importanle ese "100%" en la altura y hace lo que quiere...

Aqui dejo dos imagenes de muestra:

FIREFOX - http://www.animerate.net/ff.gif
Internet Explorer - http://www.animerate.net/ie.gif

Como pueden ver el problema es la tabla del menu textual (Inicio | CD's | DVD's | Accesorios | Instrumentos Musicales, etc etc) en FF va hasta abajo y se coloca perfecto pero en IE le vale un comino que le de de 100% a la altura.. hehe

Aqui les dejo el codigo pa que lo vean...

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Music Box :: CD's, DVD's, Instrumentos Musicales, Escuela de M&uacute;sica, Estudio de Grabaci&oacute;n</title>
<!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link href="../estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="760" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2"><img src="../imgs/header.jpg" width="760" height="120"></td>
  </tr>
  <tr>
    <td width="150" valign="top" bgcolor="#56100C"><table width="150" border="0" cellpadding="0" cellspacing="0" bgcolor="#56100C">
      <tr>
        <td colspan="2"><img src="../imgs/menu_productos.gif" width="150" height="27"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">CD's</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">DVD's</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">Accesorios</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">Instrumentos</a></td>
      </tr>
      <tr>
        <td colspan="2"><img src="../imgs/menu_informacion.gif" width="150" height="26"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">&iquest;Quienes Somos? </a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">Promociones</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">Cursos</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">Eventos</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr>
        <td width="13"><img src="../imgs/menu_esq.gif" width="13" height="22"></td>
        <td width="137" class="menu"><a href="#">Contacto</a></td>
      </tr>
      <tr align="right" bgcolor="#56100C">
        <td colspan="2"><img src="../imgs/menusep.gif" width="137" height="2"></td>
      </tr>
      <tr bgcolor="#56100C">
        <td colspan="2"><br>
            <table width="150" height="111" border="0" cellpadding="0" cellspacing="0" background="../imgs/mailinglist.jpg">
              <tr>
                <td width="150" height="111"><table width="100%" height="111"  border="0" cellpadding="0" cellspacing="0">
                    <tr>
                      <td height="45">&nbsp;</td>
                    </tr>
                    <tr>
                      <td align="center"><input name="textfield" type="text" size="15"></td>
                    </tr>
                    <tr>
                      <td align="center"><input type="submit" name="Submit" value="Enviar"></td>
                    </tr>
                </table></td>
              </tr>
          </table></td>
      </tr>
    </table></td>
    <td rowspan="3" valign="top" background="../imgs/bgcontenido.gif"><table width="609" height="100%"  border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="610" valign="top"><table width="609" height="201"  border="0" cellpadding="0" cellspacing="0" background="../imgs/principal.jpg">
            <tr>
              <td width="334" height="36">&nbsp;</td>
              <td width="276" height="37"><table width="276" height="36"  border="0" cellpadding="4" cellspacing="0">
                  <tr>
                    <td width="100">&nbsp;</td>
                    <td width="100"><input name="textfield" type="text" size="15"></td>
                    <td width="76"><input type="submit" name="Submit" value="[Buscar]"></td>
                  </tr>
              </table></td>
            </tr>
            <tr>
              <td height="164" colspan="2">&nbsp;</td>
            </tr>
        </table></td>
      </tr>
      <tr>
        <td height="100%" valign="top"><table width="575"  border="0" align="center" cellpadding="4" cellspacing="1">
          <tr>
            <td valign="top" bgcolor="#EEECEC"><br>
                <!-- TemplateBeginEditable name="Contenido" --><!-- TemplateEndEditable --></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td height="100%" valign="bottom"><table width="100%"  border="0" cellpadding="0" cellspacing="0" class="tabla100">
          <tr>
            <td height="100%" valign="bottom"><table width="610"  border="0" cellpadding="0" cellspacing="0" background="../imgs/bottom4.gif">
              <tr>
                <td width="610" height="100%" valign="bottom"><table width="610" height="96"  border="0" cellpadding="0" cellspacing="0" background="../imgs/bgcontenido2.gif">
                    <tr>
                      <td width="26"><img src="../imgs/bottom3.gif" width="26" height="96"></td>
                      <td width="583" valign="bottom"><table width="100%" height="48"  border="0" cellpadding="0" cellspacing="0">
                          <tr>
                            <td align="center" class="menubottom"><a href="#">Inicio</a> | <a href="#">CD's</a> | <a href="#">DVD's</a> | <a href="#">Accesorios</a> | <a href="#">Instrumentos Musicales</a><br>
                                <a href="#">&iquest;Quienes Somos?</a> | <a href="#">Promociones</a> | <a href="#">Cursos</a> | <a href="#">Eventos</a> | <a href="#">Contacto</a></td>
                          </tr>
                      </table></td>
                    </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td align="center" valign="top" bgcolor="#56100C"><img src="../imgs/banner.jpg" width="140" height="400"></td>
  </tr>
  <tr>
    <td align="center" valign="bottom" bgcolor="#56100C"><br>
    <img src="../imgs/bottom.jpg" width="150" height="225"></td>
  </tr>
  <tr>
    <td valign="top"><img src="../imgs/bottom2.jpg" width="150" height="50"></td>
    <td valign="top" background="../imgs/bgbottom.gif"><img src="../imgs/bottom5.gif" width="26" height="12">
      <table width="100%"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="right"><img src="../imgs/url.gif" width="428" height="41" hspace="6" vspace="0" align="absbottom"></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Llevo ya buen rato con esto.. y es una cosa no puedo con ella :(

Cualquier ayuda se agredecera...
Gracias

baccxus · #2 (**permalink**) 24/05/2006, 14:16

Hola, intenté ver donde estaba el problema, pero con tanto código html, me pierdo, el diseño me parece fenómeno, pero no te has planteado nunca usar CSS?, sería más rápida la carga y menos engorroso buscar un problemilla como el que tienes.

Saludos

Haggen · #3 (**permalink**) 24/05/2006, 14:19

Si bueno.. de hecho estoy usando CSS, pero muy basicamente (para dar formato a texto, colores, tamaños etc etc..) No sabria como hacer para manda pa' abajo esa maldta tabla del menu :(

Please help!

Javier F. · #4 (**permalink**) 25/05/2006, 01:07

Con tablas no he diseñado nunca, pero prueba a darle un style="magin:0px" en esas celdas. Ojalá se te solucione.

pmj11195 · #5 (**permalink**) 27/05/2006, 03:21

Quítale la primera línea (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN") al código html. Creo que ese es el problema.