View Full Version : Image showing in DW but not in Browser (IE/FireFox/Chrome)

08-05-2012, 10:11 PM
Good evening all i hope your all well,

I am in need of a little help, i have added a social media sprite to the header of a website the images are showing up correctly in dreamweaver and everything is working within dreamweaver live view as it should (snap shot below)

Dreamweaver snap-shot (icons are shown)


Server side the images fail to load i have been wracking my brain as to why this issue is happening (files are uploaded) but i am stuck hopefully someone is able to offer advice on why the images are showing in dreamweaver but not showing when uploaded to a server or viewed in a browser

Website has been temp uploaded HERE (

the sprite that was used is located HERE (http://brandonsetter.com/demos/super-massive-css-sprite-social-icon-set/)

html for section

<!-- ========= START EDIT LOGO/HEAD ========= !-->

<div class="logo">
<div class="headicons">
<ul class="socialicons color">

<li><a href="https://www.facebook.com/BlueChipSupport" class="facebook" target="_blank">facebook</a></li>
<li><a href="https://twitter.com/BlueChipNews" class="twitter" target="_blank">twitter</a></li>


<!-- ======= END EDIT LOGO/HEAD ======= !-->

css for section

.logo {
padding:0px 0px 0px 0px;
height: 100px;
background-repeat: no-repeat;
width: 814px;
background-image: url(../images/bluechip_head_logo2.jpg);
.headicons {
margin: 18px 18px 0px 0px;

ul.socialicons {
list-style-type: none;
ul.socialicons li {
list-style-type: none;
display: inline;
float: left;
padding: 0 5px 0 0;
margin: 0px 0 0 0;
ul.color li a {
background-image: url(/images/supermassivecsspriteicons2.png);
background-repeat: no-repeat;
background-position: 0 0;
ul.bw li a {
background: url('/images/supermassivecsspriteicons.png') no-repeat 0 0;
ul.socialicons li a {
text-indent: -9999px;
width: 32px;
height: 33px;
display: block;
overflow: hidden;
margin: 2px;
ul.socialicons li a.facebook {
background-position: 0 -73px;
ul.socialicons li a.facebook:hover {
background-position: -38px -73px;
ul.socialicons li a.twitter {
background-position: 0 -109px;
ul.socialicons li a.twitter:hover {
background-position: -38px -109px;

08-05-2012, 10:35 PM
ul.color li a {
background-image: url('../images/supermassivecsspriteicons2.png');
background-repeat: no-repeat;
background-position: 0 0;
ul.bw li a {
background: url('../images/supermassivecsspriteicons.png') no-repeat 0 0;

Strange that it works in DW - but that's DW for you?!

08-05-2012, 10:41 PM
You have this link as your background-image: /images/supermassivecsspriteicons2.png and that file is not found on the server. I'd double-check...


08-05-2012, 10:43 PM
omg .. i cant belive i missed that one! i am actualy anoyed with myself AndrewGSW thank you very much for the fast reply if you were close to me i would buy you a beer :) grealy appericated

../ added and all is working :)


08-05-2012, 11:25 PM
No problem :thumbsup:

But you shouldn't delete your original post as it may be of use, or interest, to others. Clicking 'Thank User..' and RESOLVED is sufficient :)

08-05-2012, 11:51 PM
yea i got a warning for doing this as well it was a simple mistake i ment to just put in the "ISSUE RESOLVED" and place a thankyou for andrew but i accidently removed the content

Post has not been amended and content is back

Sorry for the mistake