• HI All

    I hope someone can help. I visited a friend the other day to show them my website – http://www.3dfocus.co.uk and found most of the graphics I had on there were incorrectly rendered by Internet Explorer 8. In my research I understand that IE wont display PNG files with transparency so I started changing things to JPEGS but then realised it will take forever.

    It is my fault – I should have checked it in Internet Explorer with it being the most popular web browser out here.

    It is not just transparency – there is a horrible black line around most of my png images.

    I know it is a long shot but rather than go through all my images, is there any type of fix I could put into the website?

    Here is an example of what I mean – http://www.3dfocus.co.uk/2011/01/18/fujifilm-w3-review/

    If you view it in the latest Internet Explorer the images are jagged.

    I appreciate any help!

    Best regards

    Jonathan

Viewing 10 replies - 1 through 10 (of 10 total)
  • In my research I understand that IE wont display PNG files with transparency

    That’s only true of IE7 or earlier. Or IE8 in forced Compatibility mode.

    Try removing:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

    from the theme’s header.php template file.

    Thread Starter cashalerts

    (@cashalerts)

    Thank you Esmi

    I will give that a try!

    Jon

    Thread Starter cashalerts

    (@cashalerts)

    Hi Esmi

    Thank you for the advice. Unfortunately I still have the same problem. I am viewing the website with IE8 and still all the images have black outlines.

    Are you aware of any plugins that could help?

    Many thanks

    Jon

    That line is still in your header.php file.

    Thread Starter cashalerts

    (@cashalerts)

    Hi Esmi

    I put it back in afterwards but I have taken it out again.

    If you visit the site now it wont have that line in but the problem still appears.

    Thanks Esmi

    Jon

    You now need to add some conditional comment CSS targeted at IE8. Specifically try:

    .js_active #main img {
        visibility: visible;
    }

    @esmi – Just FYI, IE7 fully supported transparent PNG files. Only IE6 and earlier had issues with them.

    @cashalerts – Unfortunately, I couldn’t seem to get the images to load at all for me when using IE8 (they consistently seemed to time out for me – that’s probably just an issue with my Internet connection, though); but I did notice that your navigation menu at the top of the screen is breaking onto a second line in IE8.

    Just taking a stab in the dark, though, are you sure you don’t have any JavaScript or anything that’s manipulating the images? If so, try disabling that and see if the problem persists.

    Thread Starter cashalerts

    (@cashalerts)

    @esmi – thanks – Where would I insert that code? Shall I insert it where the previous line was? (in the Header.php file?)

    @curtiss – Thanks for your message. The images load okay but its the issue with the black lines. Also, the top slider is a mess on IE but my priority is getting the image problem sorted for now.

    I have to be honest with you and say I wouldn’t know about the Javascript issue or where to find out! But thanks for the point – I will email the theme provider to ask about Javascript. Cheers

    Just checked again in my 32-bit version of Internet Explorer (I use the 64-bit by default, which doesn’t have Flash enabled). The images did load properly in the 32-bit version, which indicates that Flash might be used somehow with your images.

    I also tested loading the page in the 32-bit version with JavaScript disabled, and noticed that the weird black/gray background near the bottom of the image (I’m assuming that’s what you’re referring to) does not appear when JavaScript is turned off; the picture looks just fine.

    Therefore, there must be some kind of JavaScript running that modifies the way the image is displayed in Internet Explorer.

    Good luck with it.

    Thread Starter cashalerts

    (@cashalerts)

    Hi Curtiss

    Thank you for researching that for me. It definitely gives me something to work with.

    Most appreciated!

    Jon

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Frustrating Image Black Outline in IE’ is closed to new replies.