CSS — Firefox giving completley different interpretation to Chrome/Safari

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. Usuall开发者_StackOverflowy 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

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.

You are using CSS for idealogical reasons. Any sensible person would use a table.

Why aren't you using a table for that? It's only bad to use tables to layout your web site structure. For your purposes that is exactly what was designed for.

It also looks like you're using inline style in your html. Why aren't you using a stylesheet and classes? I thought we cleared this all up in my answer to your last question?

Well... .tableMaker > .imgContainer > .thumbnail having a width of 100% is partly culprit, it seems to me. Switch them to a set value, not percents. (that style is in html, not css, fyi)

For some reason firefox is choking on the 100% value for your images, like here: <img width="100%" If you explicitly set this value it seems to work.