0

I have the following code example: http://jsfiddle.net/RZUnh/3/

Here's the markup for those not wanting to go to the fiddle-link.

<table border="1">
    <tr>
        <td>
            <img src="http://static.tumblr.com/xicugzn/8YDm6eu1c/aviarios-del-caribe-sloth-sanctuary.10968.large_slideshow.jpg" height="150" />
            <div class="child">Overlay</div>
        </td>
        <td>
            <img src="https://leerburg.com/Photos/bamboostick874.gif" height="250" />
            <div class="child">Overlay</div>
        </td>
    </tr>
    <tr>
        <td>Text</td>
        <td>Text</td>
    </tr>
</table>

And here's the CSS.

td {
    min-height:70px;
    position:relative;
}

.child {
    background-color: rgba(255, 0, 0, .5);
    position: absolute;
    right:0px;
    bottom: 5px;
}

In Chrome, IE 10 and Safari, it produces the following layout: enter image description here

However, in Firefox, the result is entirely different (notice how the "overlay" is outside the actual table): enter image description here

I've fiddled with this issue for more than 3 hours now, and nobody at our development department knows what might be the issue.

I did some research on the subject and figured out that relative positioning inside a TD is a bad thing. I tried following the suggestions and making a div container inside of it with a relative layout, but instead the layout ended up like this (in Firefox):

enter image description here

What can I do to solve this problem?

Community
  • 1
  • 1
Mathias Lykkegaard Lorenzen
  • 15,031
  • 23
  • 100
  • 187
  • If you make the div relative inside, you should make it width/height 100% – Brad M Mar 21 '13 at 14:26
  • I tried that Brad. It won't work. You can try modifying the fiddle yourself. – Mathias Lykkegaard Lorenzen Mar 21 '13 at 14:27
  • 1
    Is there any reason you need to use a table for this layout, because as you've seenduring your research, the spec says `The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.` Firefox has acted like this for a long time and the solution of using an inner div wrapper etc. won't work as you won't be able to make it fill the height of the td. – tw16 Mar 21 '13 at 14:39
  • I need to use a table because this will create a grid that must look the same in all browsers including IE8+. – Mathias Lykkegaard Lorenzen Mar 21 '13 at 14:57

1 Answers1

1

DEMO

Added a wrapper div inside the td:

<div class="wrapper">
  <img />
  <div class="child">Overlay</div>
</div>

You might need to hardcode the height of the tallest image in css

table {
    position:relative;
}
div.wrapper {
    height:100%;
    min-height:255px; /* height of tallest image (250px) + .child bottom value (5px) */
    position:relative;
}
div.child {
    background-color: rgba(255, 0, 0, .5);
    position: absolute;
    right:0px;
    bottom: 5px;
}
kei
  • 20,157
  • 2
  • 35
  • 62
  • That's really nice. Unfortunately, I can't measure the height of the tallest image on beforehand. Is there a way to set the wrapper's height to 100%? – Mathias Lykkegaard Lorenzen Mar 21 '13 at 14:59
  • 1
    You could set the `max-height` of the `img` to some arbitrary height: `div.wrapper img {max-height:300px}` Or you could use javascript... – kei Mar 21 '13 at 15:03