0

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">
        <a href="http://www.facebook.com/obliquedrive"></a>
    </div>
    <div class="tw">
        <a href="http://www.twitter.com/obliquedrive"></a>
    </div>
    <div class="in">
        <a href="http://www.linkedin.com"></a>
    </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.

Kuba hasn't forgotten Monica
  • 95,931
  • 16
  • 151
  • 313
Danielle Marie
  • 15
  • 5
  • Try pointing at your background image in your a:hover's also: (background-image: url(...)), and don't just give them the position. –  Oct 17 '13 at 19:07
  • how about you post the full URL to the sprite so I can test it?? – Accelerator Oct 17 '13 at 19:16
  • Sorry. Here is the link to my sprite: http://thewolv.es/Website/images/snIcons2.jpg As one commenter mentioned, targeting the background image in the hover made no difference. – Danielle Marie Oct 17 '13 at 19:31

3 Answers3

1
  1. don't use display:block/inline/inline-block
  2. combine the background and position into one line, it's better
  3. use margin, not padding.
  4. add full url into the hover images
  5. add height and width into the hover images
  6. add the image to the div, not the a
  7. use negative numbers, not positive numbers.
  8. 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)

Accelerator
  • 338
  • 1
  • 4
  • 15
  • ok there are some problems, wait a minute and I will fix them. – Accelerator Oct 17 '13 at 19:32
  • oh yeah, i forgot to add that you have to use negative not positive numbers. – Accelerator Oct 17 '13 at 19:36
  • also if you wanted them next to each other, just add `float:left;` to each of the divs, like this: http://jsbin.com/UviHozE/1/ – Accelerator Oct 17 '13 at 19:43
  • It's still not working for me. Try going to the actual online site and see if it works for you? Because I copied and pasted your css but it's still not working. You also said to attribute the image to the link instead of the div so I removed the class from the div and gave it to the link and still nothing. Here's the site: http://www.thewolv.es/Website/index.html – Danielle Marie Oct 17 '13 at 20:15
  • You never added in the code. The code is missing from your site. Add the code in my answer and it works. – Accelerator Oct 17 '13 at 20:27
  • I did add the code. Is that the problem you think? I'm using Dreamweaver CS5.5 to push everything up. – Danielle Marie Oct 17 '13 at 20:36
  • There have been other problems while using dreamweaver and when I post the code on here people say it works just fine for them. – Danielle Marie Oct 17 '13 at 20:36
  • Don't use dreamweaver. Anyway, I updated your entire style.css. Added to my answer. I cloned your site is jsbin and it is fully working. See here: http://jsbin.com/OTeMuX/1 – Accelerator Oct 17 '13 at 20:45
  • 1
    Ahh! So many !important notations! haha but it works perfectly with them so thank you so much!! I guess they were inheriting styles that they shouldn't. Thank you thank you thank you! – Danielle Marie Oct 17 '13 at 21:39
  • Yay glad we finally got this working. :) You could probably remove most of the `!important`; I mainly added those for the jsbin example since I cloned your whole site for the example and there were several stylesheets. – Accelerator Oct 17 '13 at 21:39
  • Cool did you invent Oblique Drive? Looks cool. I tried reading the about page but didn't really understand what it does. – Accelerator Oct 17 '13 at 21:46
0

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

Praveen B
  • 207
  • 1
  • 6
  • what is the url of the page? Use the complete URL when specifying backround image 'background-image: url(http://thewolv.es/Website/images/snIcons2.jpg);' or make sure the url hierarchy is correct. – Praveen B Oct 17 '13 at 19:35
  • what is the url of the page? is it not available for public – Praveen B Oct 17 '13 at 19:40
0

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">
        <a href="http://www.facebook.com/obliquedrive"></a>
    </div>
    <div class="tw">
        <a href="http://www.twitter.com/obliquedrive"></a>
    </div>
    <div class="in">
        <a href="http://www.linkedin.com"></a>
    </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.

usernolongerregistered
  • 390
  • 1
  • 4
  • 19