Image in table cell doesn't scale down: using ie8/7

Question

Can anyone help me troubleshoot my website?

http://www.andrewstonyer.co.uk/test/

My problem:

On IE8/7 if you click on a thumbnail (only 'Pulse' and 'Time Within The Hour' are wired in right now) an overlay appears with detail of that piece.

What should happen, and does in Gecko/Webkit, is that the overlay contains a table with a heading, a scaled, centered image, and a nav menu. There is a toggle for text, which pushes up the image cell and makes the image smaller, keeping proportion. I know the overlay looks like ass right now- those are just placeholder colours :)

On IE, the image doesn't fit perfectly in the table cell, which means that everything is pushed down outside the window. I can't see the nav menu. It appears to render the image at actual pixel size (in the CSS, the img class element is set to 100% height).

The text cell is toggled with jquery, when toggled on in IE, it doesn't appear to 'squeeze' the above cell, which is what I want to happen.

Could any experts help?

Regards, Jon

Answer 1

Adding width:100% to the ov-image class in your CSS fixes this. I guess the other browsers honor display:block even for image scaling, but on IE, you have to declare the width for it to scale.

Additionally remove height:100% from the same class.