In my personal website, I use sprites to show the contact icons (ie. skype, email, etc).

Recently I needed to add a new icon in the sprite therefore I have made a new one (sprite) and uploaded it to my FTP folder.

Everything works great on localhost but it does not work in my hosted website.

As you can see, locahost picture has got the LinkedIn icon, which I wanted to add, but on the hosted website it's not there.

CSS code:

.contact-aboutme, .contact-email, .contact-github, .contact-linkedin, .contact-skype, .contact-stackoverflow, .contact-twitter{
    background: url(../img/contacts-sprite.png) no-repeat;
}

.contact-aboutme{
    background-position: 0 0;
    width: 32px;
    height: 32px;
}

.contact-email{
    background-position: -34px 0;
    width: 32px;
    height: 32px;
}

.contact-github{
    background-position: -68px 0;
    width: 32px;
    height: 32px;
}

.contact-linkedin{
    background-position: -136px 0;
    width: 32px;
    height: 32px;
}

.contact-skype{
    background-position: -170px 0;
    width: 32px;
    height: 32px;
}

.contact-stackoverflow{
    background-position: -102px 0;
    width: 32px;
    height: 32px;
}

.contact-twitter{
    background-position: -204px 0;
    width: 32px;
    height: 32px;
}

.htaccess:

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # Don’t compress
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary

    #Dealing with proxy servers
    <IfModule mod_headers.c>
        Header append Vary User-Agent
    </IfModule>
</IfModule>

Where's what I tried to do:

  1. Changing/deleting the file name - the image remained there.
  2. Downloaded the file from the FTP to my computer just to make sure I didn't fail at uploading it - it was correct.
  3. Deleted the browser cache - it didn't work.
  4. Tried refreshing both with F5 and CTRL+F5 - it didn't work.

I have no idea why this is happening.

I tried waiting as well like an hour or two, maybe it was a temporary issue but it didn't work.

有帮助吗?

解决方案

Apparently it was browser issue with Firefox because it works with Google Chrome.

I thought about a cache problem immediatly when I saw it, even before trying Google Chrome, and I indeed deleted the cache of the browser, however the problem wasn't fixed.

There's really no other option except that it's a Firefox issue.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top