WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. Tasha
    Member
    Posted 1 year 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
    Forum moderator
    Posted 1 year ago #

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

  3. Tasha
    Member
    Posted 1 year 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 1 year 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
    Forum moderator
    Posted 1 year ago #

    I couldn't replicate the problem using IE10.

  6. rdellconsulting
    Member
    Posted 1 year ago #

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

  7. Tasha
    Member
    Posted 1 year ago #

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

  8. rdellconsulting
    Member
    Posted 1 year ago #

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

  9. Tasha
    Member
    Posted 1 year 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 1 year ago #

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

  11. Andrew
    Forum moderator
    Posted 1 year 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 1 year 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
    Forum moderator
    Posted 1 year 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 1 year 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
    Forum moderator
    Posted 1 year 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 1 year 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
    Forum moderator
    Posted 1 year 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
    Forum moderator
    Posted 1 year ago #

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

  19. Tasha
    Member
    Posted 1 year ago #

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

  20. Tasha
    Member
    Posted 1 year ago #

    No I don't but I can add one?

  21. Andrew
    Forum moderator
    Posted 1 year ago #

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

  22. Tasha
    Member
    Posted 1 year ago #

    ok done

  23. Andrew
    Forum moderator
    Posted 1 year 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 1 year ago #

    ok done

  25. Andrew
    Forum moderator
    Posted 1 year ago #

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

  26. Tasha
    Member
    Posted 1 year ago #

    ok done

  27. Andrew
    Forum moderator
    Posted 1 year 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
    Forum moderator
    Posted 1 year ago #

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

  29. Tasha
    Member
    Posted 1 year ago #

    ok done

  30. Tasha
    Member
    Posted 1 year ago #

    yes home page

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic