WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Problem with featured image in IE (59 posts)

  1. Tasha
    Member
    Posted 7 months ago #

    Hi all, I have a problem with my featured images on the homepage. In IE it shows a thin line either next to or underneath the image on roll over. As if the masking is not covering the image completely. All other browsers seems to be ok.

    Any ideas what this could be please?

    http://www.granthamfarm.angelicdesign.co.uk/

    Thank you in advance!

  2. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Which image is the featured image and which version of IE are you experiencing the issue in?

  3. Tasha
    Member
    Posted 7 months ago #

    I am using IE 10. By featured images I mean the three circle images on the homepage.

    [Moderator Note: No bumping, thank you.]

  4. Tasha
    Member
    Posted 7 months ago #

    Has anyone got any idea about this problem please? I noticed it happens on this demo site too:

    http://demo.themesandco.com/

  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    I couldn't replicate the problem using IE10.

  6. rdellconsulting
    Member
    Posted 7 months ago #

    I'm not seeing anything wrong in IE 10.0.9200 either.

  7. Tasha
    Member
    Posted 7 months ago #

    I've looked at it with 2 different machines in IE 10 Windows 8. Happens in both.

  8. rdellconsulting
    Member
    Posted 7 months ago #

    I forgot to say I was using Win7. Know anyone who's NOT Win8?

  9. Tasha
    Member
    Posted 7 months ago #

    Right, two other people tested it for me and it looks like it is a Win8 problem. Any ideas what can be done to fix it? Work arounds? I don't even know where to start looking?

  10. rdellconsulting
    Member
    Posted 7 months ago #

    I don't have access to Win8 so can't help this time, sorry.

  11. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Is this what you see in the circle rollover animation http://snag.gy/ThAqS.jpg (over the first circle) ? Does the issue go away before the animation has started and after it has completed, does it only persist in the animation process?

  12. Tasha
    Member
    Posted 7 months ago #

    Yes that is what I am seeing. And yes it only persist in the animation process. You sound like you have an idea what it is and hopefully how to fix it :)

  13. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    In your "Custom CSS" part of the dashboard try entering this:

    .span1,
    .span2,
    .span3,
    .span4,
    .span5,
    .span6,
    .span7,
    .span8,
    .span9,
    .span10,
    .span11,
    .span12,
    img {
      transition-property: all;
    }
  14. Tasha
    Member
    Posted 7 months ago #

    Thanks you Andrew. I added it to my style.css in my child theme. Does that do the same thing? It didn't change anything?

  15. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    This will affect other browsers but can you add this and see if it helps:

    .thumb-wrapper {
     width: 271px;
     height: 252px;
     margin-top: -2px;
    }
  16. Tasha
    Member
    Posted 7 months ago #

    Hi Andrew, thanks for this.

    Good news is it works on the laptop.

    Bad news is it gives problems on my phone (Samsung Galaxy S2) It is showing the image in the top right corner (where it should be masked) and the images are not in the centre anymore. Can't test other devices right now but definitely not good on my phone.

  17. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    So did it resolve the issue in IE10? If so there needs to be some JavaScript added so that you can only apply this sort of styling to IE10.

  18. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Do you have functions.php file in your Child Theme?

  19. Tasha
    Member
    Posted 7 months ago #

    Oh right! Yes it did fix the issue in IE10.

  20. Tasha
    Member
    Posted 7 months ago #

    No I don't but I can add one?

  21. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Can you create a functions.php file in your Child Theme?

  22. Tasha
    Member
    Posted 7 months ago #

    ok done

  23. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Do you have an "inc" folder in your Child Theme? If not can you create one and then create another folder within that called, "js"?
    E.g:

    /myCustomizr/inc/js
  24. Tasha
    Member
    Posted 7 months ago #

    ok done

  25. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    In your "js" folder can you create a file called "ie.js"?

  26. Tasha
    Member
    Posted 7 months ago #

    ok done

  27. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    In your "ie.js" file add this:

    jQuery(document).ready(function(){
     setIEClass(10, jQuery);
    }
    
    function setIEClass($version, jQuery) {
     $=jQuery;
     if ($.browser.msie && $.browser.version == $version) {
      $("html").addClass("ie10");
     }
    }
  28. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 7 months ago #

    Which page does the issue occur in, the home page?

  29. Tasha
    Member
    Posted 7 months ago #

    ok done

  30. Tasha
    Member
    Posted 7 months ago #

    yes home page

Reply »

You must log in to post.

About this Theme

About this Topic