Unable to view css background-image on links - html

Question

Hi guys i hope some one could help me with my problem
When i open my web page on local computer everything works just fine i can see the images, but as soon as i upload my web page to a server i dont see the images.
All file locations are correct, all file names are correct, i've checked the file permissions, css file linked properly, images set relativly to css file.
i've JSFiddled the code and it works fine: http://jsfiddle.net/ySm2x/
But it just won't show up in my web site - heres a link to my web site, the images should show under the "Coming Soon" text : http://www.voskitag.com
What can be the problem?
Here are example HTML&CSS codes i used:
HTML CODE:
<div class="social" height="40">
<a class="example" href="#" target="_blank">Example</a>
</div>
CSS Code:
.social {
text-align: center;
height: 40px;
width: auto;
}
.example {
display: inline-block;
width: 40px;
height: 40px;
background-image: url(image/url/relative/to/css/file);
text-indent: -99999px;
}
.example:hover {
background-position: 0 -40px;
}

Answer 1

The css you have attached is correct, so it seems the image paths are not correct (or also a permission problem). May be you must check again that those paths are correct. Firebug shows that they are problems (404 not found) with those images:
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/instagram.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/twitter.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/youtube.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/vimeo.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/googleplus.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/tumblr.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/flickr.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.voskitag.com/icons/pinterest.png
Are you sure that the paths to the images are correct?

Answer 2

I dont know how to solve your problem. But if i try to get your pictures like this
http://www.voskitag.com/icons/googleplus.png
I get the following error (maybe this helps):
[www.voskitag.com] [Mon Oct 14 22:30:52 2013] [error] [client 92.106.149.238] Premature end of script headers: f403.php
Error 500: Script Execution Failure
Description: The server encountered an internal error or misconfiguration and was unable to complete your request.
Most common reasons for returning this error message are:
• File Upload Mode
When you upload Perl, CGI scripts via FTP you should use always ASCII mode. If you get "Error 500: Script Execution Failure" you should check whether your FTP client uses ASCII mode when uploading your scripts, because if it uses BINARY mode to upload your scripts they won't work on the server. The problem caused by wrong upload mode is associated with the way different operating systems handle the "end of line" character. Unix system uses a "line-feed" (LF), Windows uses a "carriage-return" (CR) and "line-feed" (LF) pair. That's why it is very important that you set the uploading mode to ASCII.
• File Permissions
When you upload scripts via FTP the file permissions are set by default to 755. If you get "Error 500: Script Execution Failure" you should check whether your scripts have 755 permissions. Otherwise your scripts have lower level of permissions and does not support execution upon request. The octal representation of the 755 permission is equal to the following textual format: -rwxr-xr-x
Most FTP clients support the CHMOD command which is used for setting file permissions. In case you have set improper permissions to your scripts, use your FTP client and set "Read, Write, Execute" permissions for the owner, "Read, Execute" permissions for the group and everyone else.
• Script Errors
This is the third well known reason for getting "Error 500: Script Execution Failure" upon execution of your scripts. Check your scripts for any obvious syntax or programming errors to make sure your code is not broken.
Remember: When you get a "Error 500: Script Execution Failure", you should always check for any file uploading problems (ASCII/BINARY) and the executable permission settings. Once those are checked and verified, it looks like there is a syntax error or some other problem in the script.

Answer 3

Ok i found out what happened... For some reason when you use 'icons' folder in the root server folder it calls for problem, it leads to some weird icons list and it blocks you from using your own images, i've changed its name and walla everything works as it should of work.