Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disappearing images in IE8 jQuery Cycle

http://www.lunatestsite.co.uk/products/lifestation

Cannot for the life of me fix this. Only in IE8 so far. I had the same issue on the homepage cycle, but managed to fix by declaring width, height and background: none !important on the img's in question.

I thought it might be a png issue, but the same happens with jpgs:

http://www.lunatestsite.co.uk/test-disappearing-jpgs

Same result: often a flicker of the first of the two images in the slideshow, then disappears.

Any ideas at all appreciated.

SOLVED: My original fix worked for this in the end too : adding the background: none important!, and declaring the width / height. It didn't work on the additional templates because I was using a class instead of id for ul#product-images.

The shame, it burns! Sorry for wasting anyone's time.

body.home #front-slider #front-slides .slide{
background:none !important;
width: 980px;
height: 389px;
}

body.home #front-slider #front-slides .slide .slide-image img{
    background:none !important;
    width: 629px;
    height: 345px;
}

body.page-template-page-product-view-php ul#product-images .slide, body.page-template-page-product-view-wide-php ul#product-images .slide{
    background:none !important;
    width: 970px;
    height: 300px;
}
like image 977
luke Avatar asked Apr 17 '12 18:04

luke


2 Answers

I was having this issue also and I traced it back to the CSS rule

img {
  max-width: 100%;
}

Once I removed the above rule (I didn't need it in this case) the images stopped disappearing.

like image 172
Astrotim Avatar answered Oct 18 '22 08:10

Astrotim


If you want to keep the

max-width: 100%;

then also add

width: auto;

OR remove the explicit width and height attributes from the HTML

OR put the image in a non-floated container

OR assign the container a specific width.

There is a pretty good article on this bug here:

http://www.456bereastreet.com/archive/201202/using_max-width_on_images_can_make_them_disappear_in_ie8/

like image 2
Rich Cloutier Avatar answered Oct 18 '22 10:10

Rich Cloutier