Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts

    CSS won't override

    so i'm adding a row of social media share buttons at the end of my blog posts, but the ul li code i've written won't override the default code.

    here is the class i've written in the stylesheet:

    * social media share links */

    #socmed {
    padding:0px 0px 50px 0px;
    background:none;
    }

    #socmed ul {
    background:none;
    }

    #socmed ul li a {
    float:left;
    margin:0px 0px 0px 0px;
    background:none;
    }


    here is what i've written in the html for the posts:

    <div id="socmed">
    <ul>
    <li><a href="http://www.facebook.com/sharer.php"<img src="*facebookimgurl*.png" alt="share on Facebook" height="25" width="25"></a></li>
    </ul>
    </div>


    here's what it won't override in the stylesheet:

    #content #colLeft ul li, #content #colLeft ol li {
    padding:5px 0 5px 25px;
    background:url(images/bullet_list.png) 0 8px no-repeat;
    }


    i can't get it to override the padding or the background image, however it's not showing the full background image, just a little sliver (screenshot attached). if i take the "a" out of the "#socmed ul li a {" line, it does show the whole image.

    any ideas??
    Attached Thumbnails Attached Thumbnails CSS won't override-screen-shot-2010-08-14-3.48.45-pm.jpg  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,783
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    Look at which element(s) get a padding/background and which element(s) you’re trying to remove the padding/background from. Do you see any difference?

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    if i understand you correctly, yes there is a difference. normal lists in a blog post look the way they should, but my social media links at the bottom of the post are still wonky if i keep the "a" in that line code (first screenshot) . if i take the "a" out, the full image appears and lining up and spacing are all correct (second screenshot).

    but i'm having fits trying to figure out how to get rid of the image and the spacing that it's pulling from the "#content #colLeft" div.
    Attached Thumbnails Attached Thumbnails CSS won't override-screen-shot-2010-08-14-5.24.53-pm.jpg   CSS won't override-screen-shot-2010-08-14-5.29.47-pm.jpg  

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,783
    Thanks
    6
    Thanked 1,022 Times in 995 Posts
    All you have to do is override the styles that are applied to the lis in
    Code:
    #content #colLeft ul li, #content #colLeft ol li {
    	padding:5px 0 5px 25px;
    	background:url(images/bullet_list.png) 0 8px no-repeat;
    }
    By writing something like:
    Code:
    #content #colLeft #socmed ul li {
    	margin:0;
    	background:none;
    }
    or:
    Code:
    #socmed ul li {
    	margin:0 !important;
    	background:none !important;
    }
    It has something to do with CSS specificity (that’s a nice search term ).

  • #5
    New Coder
    Join Date
    Aug 2010
    Posts
    10
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks for that. i ended up getting so frustrated that i stripped out the code that wouldn't override altogether, haha. but i'll put it back in with your suggested edits and see if that fixes things.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •