Geek Answers Handbook

CSS Inheritance How to Stop It?

I am new to CSS and I know what the problem is that I am facing, but I cannot figure out how to stop it.

I have an element with idof footerand another element inside it with a class socialmedia. I use sprite to handle multimedia icons. The problem I am experiencing is that #footer ul lipadding ( padding: 9px 0px 9px 13px) is inherited .socialmedia.

I tried adding .socialmedia ul li {margin: 0px; padding: 0px;}to stop it, and also added !Important, but the filling still seems to pass.

I want to remove the left 13px add-on from the social media icons so that they are not so spaced. Can someone please tell me what I am doing wrong?

I created JFiddle if you want to see it here: http://jsfiddle.net/2Nv59/3/

HTML:

<div id="footer">
        <ul>
    <li><a href="#">Home</a></li>
            <li><a href="#">Company Overview</a></li>
            <li><a href="#">Our Services</a></li>
            <li><a href="#">Registration</a></li>
            <li><a href="#">News & Blog</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>

        <div class="FooterAddress"><strong>ABC Comp</strong><br>555 My Street.<br>Boonton, CA 07005<br>1 (800) 555-1111<br><br>

          <div class="socialmedia">
            <ul>
                <li><a href="http://facebook.com" title="Be our friend" target="_blank" class="facebook"></a></li>
                <li><a href="http://www.linkedin.com" title="Let connect" target="_blank" class="linked"></a></li>
                <li><a href="http://www.twitter.com" title="Follow us!" target="_blank" class="twitter"></a></li>
            </ul>
          </div>

       </div>


    </div>

CSS

/* Footer */

#footer {background-color: #3B3014; height: 150px; margin-top: 10px;}
#footer ul {padding: 0px; margin: 0px;}
#footer ul li{display: inline-block; padding: 9px 0px 9px 13px;}
#footer ul li a {text-decoration: none; color: #fff; font-weight: bold;font-size: 11px;}
#footer ul li a:hover {text-decoration: none; color: #FF6600; font-weight: bold;}
.FooterAddress {float: right; color: #FFC50B; font-size: 11px; margin-right: 13px; margin-top:-20px; text-align:right;}
.developedby {float: left; color: #fff; font-size: 11px; margin-left: 13px; margin-top: 94px;}
.developedby a {color: #FFC50B; text-decoration:none;}
.developedby a:hover {color: #CCC;cursor:hand;}

/* Soecial Media Sprites */
.nopadding {padding: 0px;float: right; color: #fff; background: #000;}
.socialmedia ul li {margin: 0px; padding: 0px;}
.socialmedia ul li a {display: block; width: 26px; height: 27px; background: url(../images/socialmedia_sprite_sm.png) no-repeat; padding: 0px;}
.socialmedia ul li:last-child {margin-right: 0;}

.socialmedia a.facebook {background-position: -27px -27px;}
.socialmedia a.facebook:hover {background-position: -27px 0;}
.socialmedia a.linked {background-position: -52px -27px;}
.socialmedia a.linked:hover {background-position: -52px 0;}
.socialmedia a.twitter {background-position: left bottom;}
.socialmedia a.twitter:hover {background-position: left top;}
+4
source share
3 answers

Just check.

Edit:

.socialmedia ul li {margin: 0px; padding: 0px;}

to

#footer .socialmedia ul li {margin: 0px; padding: 0px;}

JsFiddle example

You had the right idea, but the rule is #footer ul limore specific, so CSS overrides your other rule. You can learn more about CSS specificity at https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

+5
source

try adding #footer .socialmedia ul li {margin: 0px; padding: 0px;} to override CSS rules in children your css selector should be more specific than the one you are trying to override.

+3
source

ID , CSS, , , , #footer ul li.

Although the answers provided will already help solve your problem, it might be better to change the original selector to be more specific, since you don't seem to want any of its styles to apply to social media <li>s. For example:

HTML

<div id="footer">
    <ul class="navigation">
        <li><a href="#">Home</a></li>
        ....

CSS

#footer .navigation li{display: inline-block; padding: 9px 0px 9px 13px;}
+1
source

More articles:


All Articles