Picture mouse over effect does not work in IE

Hi from going mad about to set my head on fire York UK,

My problem:
On this page www.davidclick.com there is an image grid on the right. It behaves how i want it in Chrome. You click on a thumbnail you get an enlarged picture, great no problems.


The source of the problem:
Above is the source of the problem. line 329 of this css http://www.davidclick.com/styles/fluid-grid.css creates what i want but not in I.E. We get a big blank space in IE like this:

The solution? - So confused I really have tried all suggestions and I apologise for starting a new thread I just want to focus on the “get bigger picture when clicking on smaller picture” feature to work in IE as well as Chrome

Me and this baboon share the same mental state right now :wink:

Thank in advance,
David

I’m a bit slow today, but I can’t see how you are making the picture expand on click. Is it done with css or js? Because I don’t see it anywhere in the code.

@SamA74 I’m a bit slow too :slight_smile: Its CSS driven…

I thought it must be because I don’t see a script for it. But I thought you were using a target pseudo class to make it happen, which may explain why IE doesn’t like it, but I didn’t find it 'cos it’s not there.
Looks like you are using focus to do it instead

.picgrid ul li a:focus img {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	margin: auto;
	box-sizing: border-box;
	border: 8px solid #ff8000;
	width: 100%;
	height: auto;
	max-width: 500px;
}

There you are increasing the z-index from -1 to 1.
What happens if you leave the z-index at default in its default state, then in the focus state increase it to something more than 1?
The -1 is putting it behind the container element.

I’m not sure but since you’re using an anchor tag, might a:hover be more reliable in all browsers?

Hi Sam thanks for taking a look…

Ok not sure what the z index default value is but is this the code change you think i should try:

.picgrid ul li img {
	position: relative;
	display: block;
	border: 0;
	width: 100%;
	height: auto;
	z-index: 1;
}
.picgrid ul li a:focus img {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	bottom: auto;
	left: 0;
	margin: auto;
	box-sizing: border-box;
	border: 8px solid #ff8000;
	width: 100%;
	height: auto;
	max-width: 500px;

ok trying that now :slight_smile:

changing code to:

picgrid ul li a:hover img { position: absolute; z-index: 1; top: 0; right: 0; bottom: auto; left: 0; margin: auto; box-sizing: border-box; border: 8px solid #ff8000; width: 100%; height: auto; max-width: 500px; }

fraid that didn’t work its still vanished in IE :frowning:

I have to admit its game over, ive built al lightbox solution that doesnt work. Replacing it with this:http://masonry.desandro.com/

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.