¿Cómo puedo colocar un elemento en la parte inferior de su contenedor en Firefox?

Tengo una celda de tabla, y quiero que una div dentro siempre esté en la esquina inferior izquierda. Lo siguiente funciona bien en IE y Safari, pero Firefox posiciona absolutamente el div en la página, no dentro de la celda (código basado en la solución de solución here). He probado tanto con y sin el DTD, que puso a Firefox en el modo Quirks y en el modo Estándares, y ninguno de los dos funcionó correctamente. Estoy atascado, ¿alguna idea?¿Cómo puedo colocar un elemento en la parte inferior de su contenedor en Firefox?

<!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" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; } 
     th, td { vertical-align: top; border:1px solid black; position:relative; } 
     th { width:100px; } 
     .manage { text-align:right; position:absolute; bottom:0; right:0; } 
     </style> 
    </head> 
    <body > 
    <table> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
     <tr> 
      <th>Some info about the following thing and this is actually going to span a few lines</th> 
      <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table> 
    </body> 
</html>

Fuente

2008-11-14 Chris Marasti-Georg

¿Has encontrado la manera de hacer esto? – Alex

@jitbit No tengo. –

Lamento escuchar eso ... Finalmente terminé agregando un nuevo " sin bordes" para contener el contenido inferior. – Alex

Vea si esto funciona para usted. No estoy seguro de la exactitud del problema, pero tiene algo que ver con el uso de td con el posicionamiento relativo. Envolví la mesa con la etiqueta div y lo posicioné relativamente y parece hacer lo que quieras.

<!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" xml:lang="en" lang="en"> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     table { width:500px; } 
     th, td { vertical-align: top; border:1px solid black; } 
     th { width:100px; } 
     div.body {position:relative; width:500px;} 
     .manage { text-align:right; position:absolute; bottom:0; right:0; display:block} 
     </style> 
    </head> 
    <body > 
    <div class="body"><table> 
     <tr> 
       <th>Some info about the following thing and this is actually going to span a few lines</th> 
       <td><p>A short blurb</p><div class="manage">Edit | Delete</div></td> 
     </tr> 
    </table></div> 
    </body> 
</html>

Fuente

2008-11-14 15:15:31

Desafortunadamente, este se rompe cuando agrego otra fila a la tabla que se ve igual. –

position: relative aparentemente no es compatible a nivel mundial para la etiqueta td. No pude encontrar fuentes definitivas por desgracia.

Es posible que desee colocar un bloque div en el td con el tamaño deseado y aplicar position: relative a eso en su lugar.

Fuente

2008-11-14 15:17:41 Lasar

Al probar esto, no puedo obtener el div para llenar el td. –

Esto puede sonar muy obvio, pero ¿ha intentado usar vertical-align: bottom; en .manage?

Fuente

2008-11-14 15:18:15 Powerlord

Según la W3C, position: relative no tiene ningún efecto sobre las células de la tabla:

"El efecto de 'posición: relative' en table-row-grupo, mesa-header-grupo, mesa -footer-group, table-row, table-column-group, table-column, table-cell, y table-caption elements no está definido. "

La solución es agregar un div de envoltura adicional a la celda de la tabla.

EDIT: Este div requiere un height:100% y position:relative; para establecerse.

<table> 
    <tr> 
     <td> 
      <div style="position:relative;height:100%;"> 
       Normal inline content. 
       <div class="manage">your absolute-positioned content</div> 
      </div> 
     </td> 
    </tr> 
</table>

Fuente

2008-11-14 15:20:48

Eso no lo empuja al fondo :( –

ejemplo de código editado ahora. Probé esto en Firefox 3 y funciona. –

En FF3, esto no me está presionando en la parte inferior. Http: //i36.tinypic. com/znqxpv.jpg –

tienen un DIV dentro del TD con ancho: 100% y alto: 100%, luego ajuste eso en la posición: relativa.

Fuente

2008-11-14 15:36:21 jishi

Esto no funciona - el div interno no se empuja hacia abajo. –

Derecha, posición: relative no tiene ningún efecto para los elementos de la tabla, y firefox aplica esta regla. La solución del div funciona, pero esto es un marcado terrible en mi opinión.

¿Es absolutamente necesario utilizar una tabla para mostrar este contenido? (¿O es relativo?)

Si no es así, ¿por qué no utiliza los elementos div y hace lo que quiere?

usar tablas para problemas de diseño es tan 1998 ...

Fuente

2008-11-14 15:36:57 alexmeia

Los datos que estoy mostrando son tabular. Una columna muestra c ontext para un comentario, la otra columna muestra el comentario en sí. ¿Por qué usar un elemento sin significado semántico cuando se proporciona uno semánticamente rico, que se ajusta a mi caso? –

Bien, pero una lista de definición (dl) en lugar de una tabla también puede ser una solución semántica. – alexmeia

No son realmente definiciones. ¿Hay alguna manera de asegurar que tanto dt como dd se mantengan a la misma altura que el contenido? –

Ponga una display:block sobre la mesa y ahora FF respeta la posición: relativa.

Fuente

2010-07-20 15:20:08 Wouter

+1 ¡Esto lo hace funcionar! – Frankie

En FF18, esto hace que la tabla no mantenga su ancho, y los elementos se colocan absolutamente en el elemento primario desplazado de la tabla (en este caso, la ventana) –

¿Cómo puedo colocar un elemento en la parte inferior de su contenedor en Firefox?

Respuesta

Cuestiones relacionadas