...

View Full Version : CSS won't override



cozart
08-14-2010, 08:51 PM
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??

VIPStephan
08-14-2010, 10:15 PM
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?

cozart
08-14-2010, 10:33 PM
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.

VIPStephan
08-15-2010, 06:44 PM
All you have to do is override the styles that are applied to the lis in

#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:


#content #colLeft #socmed ul li {
margin:0;
background:none;
}

or:


#socmed ul li {
margin:0 !important;
background:none !important;
}

It has something to do with CSS specificity (that’s a nice search term ;)).

cozart
08-17-2010, 02:20 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum