IE image display issues

Question

Now I am working on the site: companhiadopijama.com.br/new , and I am having the strangest problems with IE (7 and 8) .. 6 I don’t care much about atma anyway.

my PNG is displayed with a partial black background on hover (in my menu), and my jquery in the jquery roundabout appears first and then changes to white to a black gradient. At first I used them as PNG, but had the same problem.

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

Has anyone seen this before? any suggestions?

early

b

Answer 1

I ran into a similar transparency issue in my png images. Firefox and Safari could easily handle transparent parts, but in IE these parts were just black. Make sure there are no transparent parts in your images.

Answer 2

This is because you (through jQuery) use an alpha opacity filter for your fade effects. IE just doesn't support transparency PNG-plus-opacity: alpha filter opacity level overrides opacity levels per pixel, causing background pixels to lose their transparency.

AlphaImageLoader, IE6, , , , , , , ( - ; , , ). Fade in/out IE.

Answer 3

script

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

Answer 4

IE7,8,9. IE6.

pngfix "" , IE, , .

php IE script :

            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>

, IE6 !

Answer 5

it was a problem with IE handling em sizes. I had to resize the image to 1.6% of the em size. everything is working now.