Question

I’m working on a website with simple jquery effects, like show, hide…

http://emilione.altervista.org/works.html

This page works well with IE8, FF3.6 and Chrome 5, but there are some problems with IE7.

How to reproduce the problem:

-click on “x” thumb -> the content relative to the thumb is shown
-click on the same thumb -> content disappear
-click on “y” thumb -> content “x” and “y” appear together overlying (“x” image with “x” text and “y” image with “y” text)

Error preview: yfrog.com/ngproblemaxj (with http://)

If it’s not clear, I want to show 1 image with corresponding text individually.
In linked screenshot you can see two images, one above the other!

With IE8 developer tools (IE7 browser mode) css diplay property seems to be set correctly but I notice the presence of “jQuery1281468352670”, “sizcache” and “sizset” attributes in html view.

I’m not able to find a solution and I hope for your help especially for “Preview()” function in “works.js” file.

Thanks

(Sorry for my poor english)

Answer 1

Currently, it looks like you have .desc set as such:

.desc {
    width: 50px;
    height: 30px;
}

However, this is not enough to contain the content, so browsers have to guess. Modern browsers will guess correctly, IE7 will not. Try the following instead:

.desc {
    width: 100%;
    height: auto; /* Or just leave the height out entirely */
}

As far as my testing goes, this should solve your IE7 issues, and have no effect on more modern browsers.

Update

As for the jQuery show/hide issue, my best guess is as follows. And it is a guess.

I think you should try reversing the lines

$("#works").hide();
$("div","#works").hide();

It’s possible that, in the second line, IE (6 for me, 7 for you), looks at the divs in #works, and since #works is already hidden, interprets them as hidden as well, and so doesn’t bother to set their display values. Then, when you click another item, #works is shown again, with the old item still visible.

This is pure speculation, as I haven’t been able to duplicate the bug under simpler circumstance, but it’s my best guess.