CODEWITHSUNDEEP
jqueryimageinternet-explorer
Bren
Bren

Reputation: 51

IE image display problems

i'm working on a site at the moment: companhiadopijama.com.br/new and i'm having the weirdest issues with IE (7 & 8).. 6 i don't care so much about atm.

my PNG's are displaying with a partial black background on hover (in my menu) & my JPG's in the jquery roundabout are first showing up, then changing to white to black gradient.. i first had them as PNG's but had the same problem.

the code on the site is a bit messy, sorry still learning, but all the relative jquery is in init.js & css is in companhiadopijama.com.br/new/css/main.css

has anyone seen this before? any suggestions?

thanks in advance

b

Upvotes: 3

Views: 2360

Answers (5)

Dejan Cancarevic
Dejan Cancarevic

Reputation: 197

remove this from the script and that's it

.css('opacity', (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))

Upvotes: 2

Adriano Martino
Adriano Martino

Reputation: 11

I removed that line and it works perfectly with IE7,8,9. Still it doesn't work on IE6.

For pngfix I tried "supersleight" plugin that works beautifully in every IE besides in roundabout.

I'm using a small php function to serve to IE the script without opacity:

            if(usingIE())
                echo "<script src='".ROOT."_js/jquery.roundabout.js' type='text/javascript'></script>";
            else
                echo "<script src='".ROOT."_js/jquery.roundabout.min.js' type='text/javascript'></script>";


             echo "   




                <script>
                    $(document).ready(function() {
                        $('ul#teacherslist').roundabout({
                           minOpacity: 0.6, // invisible!
                           minScale: 0.3,
                           maxScale: 1,
                           shape: 'lazySusan',
                           duration: 600,
                           minZ:2000,
                           maxZ:2001,
                           btnNext: '#next',
                           btnPrev: '#previous'
                        });
                    });
                </script>

I still wonder why IE6 wants to give more troubles!

Upvotes: 1

Bren
Bren

Reputation: 51

it was a problem with IE handling em sizes.. i had to resize the image to 1.6% of the em size. all works now..

Upvotes: 0

bobince
bobince

Reputation: 536765

It's because you (via jQuery) are using the alpha-opacity filter for your fading effects. IE simply doesn't support transparent-PNG-plus-opacity: the alpha filter's opacity level overrides the per-pixel opacity levels, causing background pixels to lose their transparency.

With the AlphaImageLoader fix as for IE6 and the background set to white you can get a somewhat different effect, which is generally less offensive to the eye although still wrong (the less opaque of the pixel transparency and the alpha filter wins; they should of course properly be multiplied). An alternative would be to forego the fade in/out effects on IE.

Upvotes: 2

bertolami
bertolami

Reputation: 2936

I encountered a similar problem with transparency in my png images. Firefox and Safari could easily handle the transparent parts, but in IE these parts were just black. Assure that there are no transparent parts in your images.

Upvotes: 2

Related Questions