Ver Tema

adrolmar · 2010-01-04 10:49 @492

¡Hola a todos!

Mi problema es que cuando alineo el contenido de las celdas de una tabla que uso a modo de menú funciona perfecto en Firefox y en Opera

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr height="15">
    <td  align="center" width="1" bgcolor="#ffffff">
    </td>
    <td  align="center" bgcolor="ff9933" width="80" onMouseOver="this.style.backgroundColor='#ffffff'"  onMouseOut="this.style.backgroundColor='#ff9933'" onClick="window.open('cgi-bin/vmail.cgi','cuerpo')"><div style="font-size: 10pt">BUZONES</div>
    </td>
 
   ....
   ....

pero en IE8 no respeta esas reglas y el texto sale donde quiere.

He estado mirando en http://www.w3schools.com/html/default.asp y parece que debería funcionar.

¿Alguna sugerencia?

explorer · 2010-01-04 10:55 @497

Si funciona en Firefox y Opera y sigue lo indicado por la documentación, es que está bien.

Yo no haría nada más.

Ahora bien, si quieres seguir perdiendo el tiempo... pues... se me ocurre que quizás, en lugar de <div>, tendrás que poner <span>.

(por decir algo)

kidd · 2010-01-07 15:36 @692

Hola adrolmar,

¿Podrías poner el código completo de uno de tus <tr>?

Saludos

adrolmar · 2010-01-08 06:00 @292

¡Buenas! He probado cambiando los 'div' por 'span' pero obtengo el mismo resultado

quizá alguna cosa que añadí provoca ese mal funcionamiento. Aquí el código de todas maneras:

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="bottom" align="center" height="15">
    <td valign="bottom" align="center" width="1" bgcolor="#ffffff">
    </td>
    <td valign="bottom" align="center" bgcolor="ff9933" width="80" onMouseOver="this.style.backgroundColor='#ffffff'"  onMouseOut="this.style.backgroundColor='#ff9933'" onClick="window.open('cgi-bin/vmail.cgi','cuerpo')"><div style="font-size: 10pt">BUZONES</div>
    </td>
    <td valign="bottom" align="center"  width="1" bgcolor="#ffffff">
    </td>
    <td valign="bottom" align="center" bgcolor="ff9933" width="80" onMouseOver="this.style.backgroundColor='#ffffff'"  onMouseOut="this.style.backgroundColor='#ff9933'" onClick="window.open('cdr/cdr.php?s=1','cuerpo')"><div style="font-size: 10pt">INFORMES</div>
    </td>
    <td valign="bottom" align="center"  width="1" bgcolor="#ffffff">
    </td>    
    <td valign="bottom" align="center" bgcolor="ff9933" width="80" onMouseOver="this.style.backgroundColor='#ffffff'"  onMouseOut="this.style.backgroundColor='#ff9933'" onClick="window.open('phonebook/book.php','cuerpo')"><div style="font-size: 10pt">AGENDA</div>
    </td> 
    <td valign="bottom" align="center" width="1" bgcolor="#ffffff">
    </td>
    <td valign="bottom" align="center" bgcolor="ff9933" width="80" onMouseOver="this.style.backgroundColor='#ffffff'"  onMouseOut="this.style.backgroundColor='#ff9933'" onClick="window.open('cuerpo.html','cuerpo')"><div style="font-size: 10pt">CONTACTAR</div>
    </td>
    <td valign="bottom" align="center" width="1" bgcolor="#ffffff">
    </td>    
</tr>
</table>

adrolmar · 2010-01-08 07:20 @347

Pues nada, funcionó como un tiro ¡bang! ¡gracias por la ayuda a todos!

Saludos.. ¡ah, y Feliz Año!

explorer · 2010-01-08 08:10 @382

La suma de los anchos de las celdas debe ser igual al ancho indicado en la fila o tabla. El problema que tenías es que estabas indicando un ancho relativo en la tabla (100%), mientras que en las celdas dabas un ancho fijo (80 pixels).

Una de las opciones es la indicada por kidd: colocar valores relativos en las celdas.

Otra opción es: poner anchos fijos en las celdas y no indicar ningún ancho en la tabla. O preocuparse de sumar todos los anchos fijos, en píxeles, y colocar esa suma como ancho de la tabla.

Lo mejor es usar un programa de edición de páginas web que incluya ayudas para la creación de tablas, ya que se ocupará de mantener sincronizados todos los tamaños.

explorer · 2010-01-08 10:16 @469

Yo no veo que las tablas que ha mostrado adrolmar se usen para la disposición de información.

Más bien, está mostrando información.

Lo que sí es cierto es que puede ahorrarse mucho código si usara estilos CSS.

explorer · 2010-01-08 11:35 @524

Tienes razón... me he fijado un poco más y es cierto: está usando tablas para mostrar un menú.

adrolmar... deberás aprender a usar las marcas <ul> ...<li> ... </li> ... </ul> con el estilo inline para crear menús

Ejemplo.

Lo bueno de esto es que la página se ve mejor cuando el navegador no tiene soporte para tablas.

Publicidad

Socializa