Question

Hi
I’m really at a loss as to why Firefox is rendering my page so wrong

Link to problem page (not live yet)

In Chrome and Safari, it works as it should. Plus, the HTML validates, no jquery errors.
Usually FF is not that far off. However, yes, the contrcution of the framework is pretty complex. I’m nesting a lot of divs, and utilising the

display:table

and

display:table-cell

properties. Sizes of images are all based on parents too. It’s basically a super fluid centred layout with the added bonus of the image size being fluid too (i’m trying something new here, so maybe it serves me right)

I’m guessing and hoping that there is probably just one, stupid thing that Firefox does not interpret in the same way. Hoping someone might shed some light for me. Much appreciated

Answer 1

I experimented with your code a bit, and it seems like Firefox doesn’t support position: relative in combination with display: table-cell or display: table. Therefore, your positioning context wasn’t getting reset, and the absolutely-positioned images were being scaled relative to the width of the window, instead of the width of their container. I changed this…

<div class="imgContainer">
    <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div>
    <!-- Snip -->
</div>

…to this…

<div class="imgContainer">
    <div style="position: relative;">
        <div class="thumbnail"><img width="100%" height="auto" alt="image" src="images/2.png"></div>
        <!-- Snip -->
    </div>
</div>

…and it started looking a lot more like the Chrome version. Basically you need an intermediate div with position: relative in-between your table-cell and your absolutely positioned thumbnails to reset the positioning context. This is the cause of the giant images, at least.

EDIT:

Here, I fixed it for you. Be sure to remove the <BASE> tag in the header if you use this source file.