Question

I am trying to make a photo gallery: http://lovingearthphotography.com/cal.html
I am modifying an example I found on the web which uses a table to view Thumbnails.
I wanted to overlay the thumbnails with some text (the day of the month the photo was taken).
While this works fine for most browsers the text is not being displayed in the correct position in firefox. If you go to the link above you will see the number nine to the top left of the table, instead of text in the top left of each cell ).

The table is generated in JS with:

getCurrentThumbTable: function(){
    var thumbTable = new Element("table");
    var thumbTableBody = new Element("TBODY");

    thumbTable.setProperty('id', 'imagoCurrentThumbTable');
    var counter = this.lastThumbImageIndex;
    for (i = 0; i < this.thumbnailRows; i++) {
        var tr = new Element("tr");
        for (j = 0; j < this.thumbnailColumns; j++) {
            var td = new Element("td");
            td.style.position = "relative";
            if (this.getThumbImage(counter) != null) {
                td.appendChild(this.getThumbImage(counter));
                //var text = new Element("div");
                //text.addClass( "thumbOverlay" );
                var text = document.createElement('div');
                text.style.position = "absolute";
                text.style.fontSize = "24px";
                text.style.left = "5px";
                text.style.top = "5px";
                text.style.color = "#f5f5f5";
                text.style.backgroundColor = "rgba(69,69,69,0.8)";

                text.innerHTML = this.images[counter].getImageDay();

                td.appendChild(text);
                counter++;
                this.lastThumbsOnCurrentPage++;
                if (this.images.length > this.thumbsPerPage) {
                    ElementHelper.show('imagoMenuNextLink');
                }
            }
            else {
                ElementHelper.hide('imagoMenuNextLink');
            }
            tr.appendChild(td);
        }
        thumbTableBody.appendChild(tr);
    }
    thumbTable.appendChild(thumbTableBody);
    this.lastThumbImageIndex = counter;
    return thumbTable;
},

Which produces at runtime:

<table id="imagoCurrentThumbTable">
    <tbody>
        <tr>
            <td style="position: relative;">
                <img src="Pics/thu/001.jpg" class="imago_thumbImg imago_selectedThumb" alt="Running" id="id_001.jpg">
                <div style="position: absolute; font-size: 24px; left: 5px; top: 5px; color: rgb(245, 245, 245); background-color: rgba(69, 69, 69, 0.8);">1</div>
            </td>
            ….
            <td style="position: relative;">
                <img src="Pics/thu/002.jpg" class="imago_thumbImg" alt="abcd" id="id_002.jpg">
                <div style="position: absolute; font-size: 24px; left: 5px; top: 5px; color: rgb(245, 245, 245); background-color: rgba(69, 69, 69, 0.8);">2</div>
            </td>
        </tr>
    </tbody>
</table>

Does anyone have any idea why this does not work in FF?

Thanks

KK

Answer 1

Had a very similar problem just the other day.

Found this absolutely-position-element-within-a-table-cell with a google search from a site I’ve use quite a lot.

You need to put a container div within the table cell position: relative so that the absolute position items can be aligned to it.

Hope that helps