Problem with page in Firefox

They have: 1 posts

Joined: Oct 2011

Hi everyone. I have designed this thumbnail page, and it loads fine in Chrome and Safari, but not in Firefox. I have tried many different ways in the CSS but cannot get it to work.

Any ideas?
[problem only in Firefox]

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Okay, the images are set to 25% height of a 100% height containing div. I'm not sure why that works in Chrome. It seems to be ignoring the 100% height on the div and applying the 25% height on the image relative to the browser window.

My guess is that Firefox (and Opera, by the way), doesn't understand what it's supposed to be appllying that height relative to. So it's ignoring it (?). I imagine this effect just wouldn't work if the browser doesn't have a concept of percentage heights.

Is the JavaScript just applying the fade effect? It's not affecting the heights of anything, right? I wonder if there would be a way to get Firefox to calculate the height using JavaScript instead.

I hope that helps a bit!

DavidIpswich's picture

He has: 117 posts

Joined: Aug 2009

If you set images to 25% height then the browser has to constantly work out the size of the image, and this makes it much slower to load.

If you set the image to a fixed size, then your website loads a lot quicker as it leaves the correct space for it as it forms the page.

Even if the difference in speed cannot be seen by the naked eye, it can still be seen by Google. Page loading speed is now one of the things that Google tests to determine where it places your site in the Google search results.

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.