IE8 table images outside of cells when loading

Question

As part of a webpage, I have a photo gallery made using a table with 6 rows and 3 columns. With IE8 the images are hanging vertically outside of their cells and overlapping the cell below until the page loads fully or occasionally until the page is refreshed (or passing the cursor over the image will relocate the image). All other browsers and versions of IE are fine.

Whilst the loaded (or refreshed) page is okay, it looks fairly poor as the page loads. The only solution I have found is to make each row a new table.

The code validates. I have removed javascript from the page and tried eliminating html and css step by step but there does not seem to be one determining issue. I am coming to the conclusion that the browser or its performance may be the issue? I suspect the problem may be worse or exacerbated when there are other demands on my systems resources.

I would appreciate any suggestions.

Answer 1

Here is a screenshot displaying the problem. It happens randomly and goes away if I refresh the page, but only in IE8. IE7 and all other browsers are fine. http://imgur.com/n19oA