CODEWITHSUNDEEP
jqueryhtmlcssfirefox
RGBK
RGBK

Reputation: 2048

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. 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

Upvotes: 2

Views: 1248

Answers (5)

Joshua Carmody
Joshua Carmody

Reputation: 13730

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.

Upvotes: 2

Philip Sheard
Philip Sheard

Reputation: 5815

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

Upvotes: 1

Sam
Sam

Reputation: 1243

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.

Upvotes: 0

Levi Morrison
Levi Morrison

Reputation: 19552

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)

Upvotes: 0

The Muffin Man
The Muffin Man

Reputation: 20004

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?

Upvotes: 0

Related Questions