Sprite not working (background not adjusting and link is non-existant?) - html

Question

This is so frustrating because at one point it was working and now it isn't. I have social networking buttons at the bottom of a site i am using. I am using a background image so when the user hovers over a button it changes from the black and white image to the color version. This was working before and i don't remember changing anything but now it doesn't work and it's really frustrating.
Here is my HTML
<!-- SOCIAL NETWORKING -->
<div class="sn">
<div class="fb">
</div>
<div class="tw">
</div>
<div class="in">
</div>
</div>
And my CSS
.footwrap {
width: 100%;
height: 100px;
background-color: #444;
}
.footer {
display: block;
width: 1100px;
margin: auto;
height: 100px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 1050px;
margin: auto;
height: 100px;
font-size: 10px;
margin-top: 20px;
text-align: center;
}
.sn {
width: 120px;
float: right;
margin-top: 40px;
margin-right: 0px;
display: inline-block;
}
.fb {
width: 20px;
height: 20px;
display: inline-block;
}
.fb a {
display: block;
width: 20px;
height: 20px;
background-image: url(images/snicons2.jpg);
background-position: 0px 0px;
}
.fb a:hover {
background-position: 0px 20px;
}
.tw {
width: 20px;
height: 20px;
display: inline-block;
padding-left: 10px;
}
.tw a {
display: block;
width: 20px;
height: 20px;
background-image: url(images/snicons2.jpg);
background-position: 40px 0px;
}
.tw a:hover {
background-position: 40px 20px;
}
.in {
width: 20px;
height: 20px;
display: inline-block;
padding-left: 10px;
}
.in a {
display: block;
width: 20px;
height: 20px;
background-image: url(images/snicons2.jpg);
background-position: 20px 0px;
}
.in a:hover {
background-position: 20px 20px;
}
I added in the .footwrap and .footer classes because they would apply to the social networking buttons although I believe they have no effect. But just in case I missed something...
ALSO!!! not only does the background not change on hover but it's like there isn't even a link there.

Answer 1

don't use display:block/inline/inline-block
combine the background and position into one line, it's better
use margin, not padding.
add full url into the hover images
add height and width into the hover images
add the image to the div, not the a
use negative numbers, not positive numbers.
make sure the image at http://yoursite.com/images/snicons2.jpg - if not, then update the URL accordingly.
I can't test to see if it's working because you need to post the full URL to the sprite.
But here is my suggested solution:
Thanks for giving the full URL to the image. Here is the solution:
.footwrap {
width: 100%;
height: 100px;
background-color: #444;
}
.footer {
display: block;
width: 1100px;
margin: auto;
height: 100px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 1050px;
margin: auto;
height: 100px;
font-size: 10px;
margin-top: 20px;
text-align: center;
}
.sn {
width: 120px;
float: right;
margin-top: 40px;
margin-right: 0px;
}
.fb {
margin-left: 10px;
float: left;
width: 20px;
height: 20px;
background: url(http://thewolv.es/Website/images/snIcons2.jpg) 0px 0px no-repeat;
}
.fb:hover {
width: 20px;
height: 20px;
background: url(http://thewolv.es/Website/images/snicons2.jpg) 0px -20px no-repeat;
}
.tw {
margin-left: 10px;
float: left;
width: 20px;
height: 20px;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px 0px no-repeat;
}
.tw:hover {
width: 20px;
height: 20px;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px -20px no-repeat;
}
.in {
margin-left: 10px;
float: left;
width: 20px;
height: 20px;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px 0px no-repeat;
}
.in:hover {
width: 20px;
height: 20px;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px -20px no-repeat;
}
In jsbin:
Displayed vertically:
http://jsbin.com/EburEdu/1/
Displayed horizontally:
http://jsbin.com/UviHozE/1/
FOR YOU - REPLACEMENT STYLE.CSS FOR YOUR SITE:
(because you said it's not working, I updated your entire style.css stylesheet. The code above works perfectly, I just needed to make some other changes for your specific site that won't affect other people looking for a solution):
html {
height: 100%;
border: none;
}
body {
margin: 0;
padding: 0;
min-width: 1100px;
height: 100%;
overflow: scroll;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FAFAFA), color-stop(1, #DDDDDD));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FAFAFA 0%, #DDDDDD 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #FAFAFA 0%, #DDDDDD 100%);
background-attachment: fixed;
}
h1 {
color: #ED1C24;
font-weight: 700;
font-size: 38px;
line-height: 110%;
letter-spacing: -0.02em;
margin-top: 60px;
}
h2 {
color: #222222;
font-weight: 400;
font-size: 16px;
line-height: 70%;
margin-top: -12px;
}
.color {
color: #ED1C24;
}
.subtext a {
text-decoration: none;
color: #FFFFFF;
}
/*Header*/
#mobilenav {
display: none;
}
.header {
width: 100%;
height: 75px;
position: fixed;
display: block;
top: 0px;
z-index: 1000;
background-color: #Fff;
-webkit-box-shadow: 0px 1px 5px 0px #9a9a9a;
-moz-box-shadow: 0px 1px 5px 0px #9a9a9a;
box-shadow: 0px 1px 5px 0px #9a9a9a;
}
.headwrap {
width: 1050px;
margin: auto;
margin-top: 13px;
min-width: 1100px;
}
.nav {
width: 750px;
float: right;
color: #000;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
margin-top: 8px;
margin-right: 20px;
display: inline-block;
}
.nav ul {
list-style: none;
float: right;
}
.nav li {
float: left;
padding-left: 20px;
}
.nav li a {
color: #000;
padding-left: 40px;
text-decoration: none;
}
.nav li a:hover {
text-decoration: underline;
}
.nav li a:visited {
}
/*Content*/
.pagewrap {
display: block;
width: 1100px;
margin: auto;
margin-top: 0px;
position: relative;
padding-bottom: 50px;
}
.content p {
color: #222222;
line-height: 140%;
font-weight: 300;
font-size: 24px;
margin-top: -18px;
font-family: 'Roboto', sans-serif;
}
.intro {
text-align: left;
width: 1050px;
margin: auto;
font-family: 'Oswald', sans-serif;
font-weight: 700;
}
.intro h1 {
font-size: 32px;
}
.intro p {
font-size: 20px;
}
.slider-wrapper {
padding-top: 150px;
}
section {
width: 650px;
margin-left: 50px;
}
.one {
margin-top: 150px;
}
section h1 {
padding-top: 75px;
font-size: 45px;
font-weight: 300;
}
hr {
width: 300px;
height: 1px;
background-color: #000;
border: none;
}
.one p, .two p {
font-size: 12px;
text-align: left;
vertical-align: top;
}
.two {
margin-top: -60px;
}
article {
padding-top: 15px;
font-size: 12px;
font-weight: 400;
margin: 30px;
width: 604px;
font-family: helvetica, sans-serif;
}
.panel {
width: 300px;
margin-top: 50px;
margin-left: 33px;
float: left;
height: 150px;
background-color: #fafafa;
border-bottom-width: 35px;
border-bottom-style: solid;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
color: #000;
font-weight: normal;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 150%;
letter-spacing: normal;
}
.panel h1 {
font-size: 14px;
color: #DD282E;
font-weight: bold;
padding-top: 0px;
margin-top: 0px;
line-height: 150%;
height: 21px;
}
.panel .text {
padding: 10px;
height: 104px;
}
.panel-wrapper {
height: 150px;
width: 966px;
margin: auto;
font-size: 1em;
}
.panel .subtext {
margin-top: 35px;
text-align: right;
padding-right: 10px;
color: #ffffff;
vertical-align: center;
font-size: 1em;
}
.button, .button2 {
float: right;
}
#controls {
float: right;
margin-top: -60px;
}
#slider {
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
article h1 {
font-size: 26px;
color: #DD282E;
font-weight: bold;
padding-top: 0px;
margin-top: 0px;
line-height: 150%;
}
/*Sidebar*/
#sidebar {
width: 220px;
float: right;
margin-right: 88px;
margin-top: 150px;
color: #222222;
line-height: 140%;
font-weight: 400;
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
#sidenav {
height: 100px;
width: 200px;
background-color: #FFFFFF;
padding: 10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#sidenav li {
list-style: inside;
}
#links {
width: 200px;
margin-top: 30px;
background-color: #FFFFFF;
padding: 10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#documents {
width: 200px;
margin-top: 30px;
background-color: #FFFFFF;
padding: 10px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
#news {
width: 330px;
background-color: #FFFFFF;
padding: 10px;
margin: auto;
margin-top: 0px;
}
#news p {
margin-top: 0px;
}
#sidebar ul {
list-style: none;
margin-left: -25px;
}
#sidebar li {
font-size: 12px;
font-weight: 400;
text-align: left;
}
#sidebar a, #sidebar a:visited {
text-decoration: none;
color: #39F;
}
#sidebar a:hover, #sidbar a:active {
text-decoration: underline;
color: #36F;
}
/*Footer*/
.footwrap {
width: 100% !important;
height: 100px !important;
background-color: #444 !important;
}
.footer {
display: block !important;
width: 1100px !important;
margin: 30px auto !important;
height: 100px !important;
background-color: #444 !important;
position: relative !important;
bottom: 0px !important;
font: 14px arial !important;
color: #fff !important;
padding: 20px !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.comm {
width: 1050px !important;
margin: auto !important;
height: 100px !important;
font-size: 10px !important;
margin-top: 20px !important;
text-align: center !important;
}
.sn {
width: 120px !important;
float: right !important;
margin-top: -100px !important;
margin-right: 0px !important;
}
.fb {
margin-left: 10px !important;
float: left !important;
width: 20px !important;
height: 20px !important;
background: url(http://thewolv.es/Website/images/snIcons2.jpg) 0px 0px no-repeat !important;
}
.fb:hover {
width: 20px !important;
height: 20px !important;
background: url(http://thewolv.es/Website/images/snicons2.jpg) 0px -20px no-repeat !important;
}
.tw {
margin-left: 10px !important;
float: left !important;
width: 20px !important;
height: 20px !important;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px 0px no-repeat !important;
}
.tw:hover {
width: 20px !important;
height: 20px !important;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -40px -20px no-repeat !important;
}
.in {
margin-left: 10px !important;
float: left !important;
width: 20px !important;
height: 20px !important;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px 0px no-repeat !important;
}
.in:hover {
width: 20px !important;
height: 20px !important;
background: url(http://thewolv.es/Website/images/snicons2.jpg) -20px -20px no-repeat !important;
}
(Your website fully cloned in jsbin with the fully working sprites: http://jsbin.com/OTeMuX/1)

Answer 2

I dont think setting background image on hover helps.
Is the image accessible in the first place.
Can you check that by going the image URL.
If your page URL is http://your.domain/abc/def.html
Then the image should be at http://your.domain/abc/images/snicons2.jpg

Answer 3

I modified your code because I, like the rest of SO, didn't have the image to work with. But this works fine.
CSS
.footwrap {
width: 100%;
height: 100px;
background-color: #444;
}
.footer {
display: block;
width: 1100px;
margin: auto;
height: 100px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 1050px;
margin: auto;
height: 100px;
font-size: 10px;
margin-top: 20px;
text-align: center;
}
.sn {
width: 120px;
float: right;
margin-top: 40px;
margin-right: 0px;
display: inline-block;
}
.fb {
width: 20px;
height: 20px;
display: inline-block;
}
.fb a {
display: block;
width: 20px;
height: 20px;
background-image: url(fbo.jpg);
background-position: 0px 0px;
}
.fb a:hover {
background-position: 0px 20px;
background-image: url(fbi.jpg);\\haha, fbi...
}
.tw {
width: 20px;
height: 20px;
display: inline-block;
padding-left: 10px;
}
.tw a {
display: block;
width: 20px;
height: 20px;
background-image: url(two.jpg);
background-position: 40px 0px;
}
.tw a:hover {
background-position: 40px 20px;
background-image: url(twi.jpg);
}
.in {
width: 20px;
height: 20px;
display: inline-block;
padding-left: 10px;
}
.in a {
display: block;
width: 20px;
height: 20px;
background-image: url(ino.jpg);
background-position: 20px 0px;
}
.in a:hover {
background-position: 20px 20px;
background-image: url(ini.jpg);
}
HTML
<body>
<div class="sn">
<div class="fb">
</div>
<div class="tw">
</div>
<div class="in">
</div>
</div>
</body>
EDIT I didn't explain why... You should act as though the anchors are what you are modifying and that the divs are just containers for those anchors. Your a:hover had just background positioning. Unless that's what you were going for. In that case, ignore me.