html - Text at bottom of image for Firefox less 30 -

html - Text at bottom of image for Firefox less 30 -

i have image , @ bottom want display text. if text more 1 line text should expand top.

<style> .image-wrapper td{ position: relative; } .image-wrapper td div { bottom: 0; font-size: 12px; line-height: 12px; maring: 0 12px; position: absolute; } .image-wrapper td div.left { text-align: left } .image-wrapper td div.right { text-align: right; } .image-wrapper td div.light { color: #fff; } .image-wrapper td div.dark { color: #ddd; } </style> <table class="image-wrapper"> <tr> <td> <img src="img/path/to/img.png"> <div class="">text @ bottom</div> </td> </tr> </table>

the result looks this:

chrome, ie 11, firefox >= 30: correct display image firefox < 30: wrong display

what have alter create looking correctly firedox < 30? possible css or have utilize javascript?

greetings sören

you problem boils downwards html/css not supporting positioning within table cells.

many modern browsers seem have added support, older browsers ie (and perhaps firefox < 30, not sure) don't back upwards it. can seek , wrap div in div, , give wrapper position of relative set positioning context, 1 time again works sometimes. here's article on hack: http://css-tricks.com/absolutely-position-element-within-a-table-cell/.

i'd suggest ditching table , using div-based layout instead.

html css firefox position