Premium Theme Support › The Theme Foundry › Snap

Customised social media icons in footer not showing in all browsers.

  • Author
    Posts
  • #79848
    kerrymurrayphotography
    Member

    Hi there

    About a year ago I customised the Snap theme with the help of a designer friend and we created customised social media icons on the footer of the blog/site. I´ve just realised that these icons are not visible in all browsers and I´m not sure if this is something new or if it´s always been that way and I´ve been oblivious! Obviously I need to get this fixed but I´m not at all CSS fluent and need help with this.

    This is the CSS that is currently in place (I have the custom CSS upgrade)

    #social {
    float: left;
    max-width: 100%;
    margin-top: -10px;
    margin-left: 75px;
    }

    .icons li a {
    display: inline-block;
    opacity: 1;
    }

    .icons li a:hover {
    opacity: .5;
    }

    .icons li .twitter {
    background-position: 10px;
    background-image: url(‘http://kerryandluis.files.wordpress.com/2013/11/twitter.png’);
    width: 34px;
    height: 99px;
    }

    .icons li .facebook {
    background-position: 10px;
    background-image: url(‘http://kerryandluis.files.wordpress.com/2013/11/face.png’);
    width: 32px;
    height: 99px;
    }

    .icons li .pinterest {
    background-position: 10px;
    background-image: url(‘http://kerryandluis.files.wordpress.com/2013/11/pinterest.png’);
    width: 32px;
    height: 99px;
    }

    .icons li .rss {
    background-position: 10px;
    background-image: url(‘http://kerryandluis.files.wordpress.com/2013/11/rss.png’);
    width: 40px;
    height: 99px;
    }

    #footer {
    background: url(‘http://kerryandluis.files.wordpress.com/2013/11/00.png’) no-repeat scroll center 12px / contain rgba(0,0,0,0);
    border-top: medium none;
    margin-top:20px;
    }

    Any insight into this problem will be greatly appreciated! Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

    #79943
    kerrymurrayphotography
    Member
    Original poster

    Sorry! The blog I need help with isn´t the one mentioned above, it´s http://piteiraphotography.com, I checked the wrong box by mistake!

    #79952
    melissajohill
    Member

    Hi Kerry,

    Both your sites are really lovely!!

    I think you might need to upload the files to the site you’re using the icons on, rather than linking them from your other blog. You’d then need to change the URL for the icons of course. Could you try that and see if it works?

    #79963
    kerrymurrayphotography
    Member
    Original poster

    Yes! Thank you, it worked! Why would they be visible on some browsers and not on others, if the files are stored on a different blog? Just curious…

    Thanks so much for your help and for your kind words about the blogs!

    #79965
    melissajohill
    Member

    Hi Kerry,

    I’m not sure, but I’m guessing it was a browser cache you were seeing. Using Chrome Developer Tools I was able to see that it was a 403 Forbidden error that was preventing the images from being served up. :)

    It’s a pretty handy tool for seeing what’s wrong with your site. :)

    #79966
    kerrymurrayphotography
    Member
    Original poster

    Hi Melissa

    Thanks so much! I´m happy we managed to fix it and will bookmark Chrome Developer Tools for the future. :)

    #79977
    melissajohill
    Member

    If you have any other questions, we’re happy to help!

  • The topic ‘Customised social media icons in footer not showing in all browsers.’ is closed to new replies.