jQuery working as expected in IE8 but not in Chrome... need someone to look over my code...

Question

Hey,

I have recently been updating a site so that it looks nearly as good in IE8 as it does in Chrome. I have managed to get the corners applied correctly, but if you take a look at http://clarkeyboy.zxq.net/test_longcatalogueitems.htm you will notice that the catalogue rows appear as expected in IE8 but not in Chrome. In Chrome they appear to go on forever.

Could somebody please take a look at the jQuery / css in the above page and tell me where they think I am going wrong? I am sorry that I wasnt able to shorten the CSS files - they are generally quite huge but all the styles (or at least most) are needed in that page, to demonstrate the problem.

I have also noticed some weird behaviour on localhost which I appear to be unable to reproduce on the above page. It appears that some of the time the page displays perfectly in Chrome, sometimes the catalogue rows appear slightly shorter and sometimes they go off the page. I dont get why this is.

Any help would be greatly appreciated.

Regards,

Richard

PS if anyone has any tips on how I could improve my code but still achieve the same effect then please say so.

I am particularly interested in any hints on how I could achieve the jQuery stuff that I am doing with the catalogue rows without JavaScript. I basically have an image of unknown size (the width and height of the img tags are put in by looking at the image on serverside and scaling it down if it is bigger than the maximum thumbnail size) and I would like to get the description to span the full height and up to 20px away from the image.

Answer 1

You're setting properties based on the widths of images in the document, and you're doing it on document-ready.

The document ready pseudo-event fires some time after the HTML DOM has been populated; it does not guarantee all the images are loaded. On Chrome and other browsers that support the HTML5 DOMContentLoaded event, the document-ready callback will typically occur sooner than on other browsers, meaning more chance the images haven't loaded yet.

If you want to call a function when everything in the page, including images, is ready, you should be using the load event ($(window).load(function() { ... });). Although I don't really know why you're messing around with scripted layout here as I don't immediately see anything on that page that couldn't be done with simple CSS.