External CSS not being applied

Question

I try to use stack as a last resort to figuring out my coding problems but I can't find what is wrong with this stupid website. I am building the mobile site for a company right now and I am doing it through 2 separate style sheets so that when a user is on a device smaller than a specified resolution, it uses a different style sheet. I've done all of this no problem.

My problem is that some of the css styling in my external doc is not being applied to the respective elements in the HTML doc. More specifically, none of the ".fb a", ".tw a", and ".in a" are not being applied at all. When I apply them inline in the html document it works but I need it to be in the external style sheet. And I cannot figure out why this is happening. Since the background-image is not being applied, nothing shows up. What is weirder is that other elements of the footer display properly and when I change the styling, it is reflected on the site. Please help!!!

My HTML:

<!-- FOOTER -->  
<div class="footwrap">
<div class="footer">

        <!-- CONTACT -->
        <div class="text">
            <!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
        </div>

        <!-- SOCIAL NETWORKING -->
        <div class="sn">
            <a href="http://www.facebook.com/obliquedrive">
                <div class="fb">
                </div>
            </a>
            <a href="http://www.twitter.com/obliquedrive">
                <div class="tw">
                </div>
            </a>
            <a href="http://www.linkedin.com">
                <div class="in">
                </div>
            </a>
        </div>

</div>
</div>

And my CSS:

/*Footer*/
.footwrap {
    width: 100%;
    height: 175px;
    background-color: #444;
}
.footer {
    width: 90%;
    margin: auto;
    height: 175px;
    background-color: #444;
    position: relative;
    bottom: 0px;
}
.comm {
    width: 420px;
    margin: auto;
    height: 175px;
    font-size: 24px;
    margin-top: 20px;
    text-align: left;
    float: left;
}
.sn {
    width: 400px;
    float: right;
    margin-top: 30px;
    margin-right: 50px;
    display: block;

}
.fb {
    width: 75px;
    height: 75px;
    display: inline-block;
}
.fb a {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url(images/sniconsm.jpg) !important;
    background-position: 0px 0px !important;
}
.tw {
    width: 75px;
    height: 75px;
    display: inline-block;
    padding-left: 30px;
}
.tw a {
    display: block;
    width: 75px;
    height: 75px;
    background-image: url(images/sniconsm.jpg);
    background-position: 150px 0px;
}
.in {
    width: 75px;
    height: 75px;
    display: inline-block;
    padding-left: 30px;
}
.in a {
    display: block;
    width: 75px;
    height: 75px;
    background-image: url(images/sniconsm.jpg);
    background-position: 75px 0px;
}
.footer .text {
    position: relative;
    display: inline-block;
    margin-left: 50px;
    margin-top: 15px;
    float: left;
    line-height: 170%;
    color: #ffffff;
}

Also, here is the page live, with all of the code if it helps: http://thewolv.es/Oblique%20Drive/mobile

Please just ignore any other problems you see lol

Answer 1

Look a little more closely at your styles. You have .fb a, but the HTML markup is the other way around:

<a href="http://www.facebook.com/obliquedrive">
   <div class="fb"></div>
</a>

If you were trying to target the div, you should use a .fb. But really, you might not need those divs at all. Just change your A tag to something like:

<a href="http://www.facebook.com/obliquedrive" class="fb"></a>

Then use the CSS selector that is a.fb (no space between them).

Answer 2

Your A elements are not children of the divs, it's the other way around.. yet your CSS defines the A elements as children.