CSS problem

I have a css problem that is driving me mad

HTML:

<div id="social-bar-holder" class="group">    
	<div id="hp-social-bar">
        <a id="twitter-icon" class="pngfix" title="Twitter" href="http://twitter.com/share?url=http://blog.mywebsite.com/home-slider/2013/05/13/getting-away-all-hiking/&amp;text=Getting+away+from+it+all%3A+hiking">Tweet this</a>
        <a id="facebook-icon" class="pngfix" title="Facebook" href="http://facebook.com/share.php?u=http://blog.mywebsite.com/home-slider/2013/05/13/getting-away-all-hiking/&amp;amp;t=Getting+away+from+it+all%3A+hiking">Like</a>
	    <a id ="pinterest-icon" class="pngfix" href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fblog.mywebsite.com%2Fhome-slider%2F2013%2F05%2F13%2Fgetting-away-all-hiking%2F&media=http://blog.mywebsite.com/wp-content/uploads/2013/05/HPBlog_BrianS_Hike_2013_4_30_Media.jpg&description=Getting away from it all: hiking" style="margin-top:10px;">Pin It</a>
	    <a id="plusone-icon" class="pngfix" title="PlusOne" href="https://plusone.google.com/_/+1/confirm?hl=en&url=http://blog.mywebsite.com/home-slider/2013/05/13/getting-away-all-hiking/">Google +1</a>
		<a id="email-icon" class="pngfix" title="Email" href="mailto:?subject=Getting away from it all: hiking&amp;body=Hi.%0A%0aI wanted to share this link with you:%0A%0Ahttp://blog.mywebsite.com/home-slider/2013/05/13/getting-away-all-hiking/">Email</a>
    </div>
</div>

Open in new window


CSS:

#social-bar-holder { 
	border-bottom:1px solid #d1d1bd;
	border-top:1px solid #d1d1bd;
	float:left; 
	margin:20px 0;
	min-height:30px; 
	padding:0; 
	width:100%; 
	}
#hp-social-bar { height: 30px; width:530px; position: relative; z-index: 1000; }
#hp-social-bar a { display:inline-block; float:left; font-family:Arial, Helvetica, sans-serif;font-size:14px; overflow: hidden; height: 26px; width: 70px; border:none;margin-left:25px; padding-left:25px; padding-top:4px; }
#hp-social-bar #twitter-icon   { background: url(images/sb-twitter-small.jpg) no-repeat 0 4px transparent !important; }
#hp-social-bar #facebook-icon  { background: url(images/sb-facebook-small.jpg) no-repeat 0 4px transparent !important;}
#hp-social-bar #plusone-icon  { background:url(images/sb-google-small.jpg) no-repeat 0 4px transparent !important; }
#hp-social-bar #pinterest-icon {width:20px;height:26px;padding-right:30px;}
#hp-social-bar #email-icon     { background: url(images/sb-email-small.jpg) no-repeat 0 4px transparent !important; }
#hp-social-bar #tooltip { display:none; }

Open in new window


The problem is the way the pinit button renders. No matter what I do, I cannot add 10 pixels of padding to the top of the button. I've added it to the css, i've added it inline, and nothing renders. Any idea what I am doing wrong?

See it live > http://tinyurl.com/bogfchw
Screen-Shot-2013-05-14-at-8.33.5.png
lvollmerAsked:
Who is Participating?
 
Kyle HamiltonConnect With a Mentor Data ScientistCommented:
This is the generated HTML rom your site. I am wrapping each anchor in a div, then applying margins to the pinterest anchor

<div id="hp-social-bar">
<div class="social-anchor-wrapper">
   <a id="twitter-icon" class="pngfix" title="Twitter" href="http://twitter.com/share?url=http://blog.houseparty.com/home-slider/2013/05/13/getting-away-all-hiking/&amp;text=Getting+away+from+it+all%3A+hiking">Tweet this</a>
</div>       
<div class="social-anchor-wrapper">
   <a id="facebook-icon" class="pngfix" title="Facebook" href="http://facebook.com/share.php?u=http://blog.houseparty.com/home-slider/2013/05/13/getting-away-all-hiking/&amp;amp;t=Getting+away+from+it+all%3A+hiking">Like</a>
</div>
<div class="social-anchor-wrapper pinterest">
   <a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fblog.houseparty.com%2Fhome-slider%2F2013%2F05%2F13%2Fgetting-away-all-hiking%2F&amp;media=http://blog.houseparty.com/wp-content/uploads/2013/05/HPBlog_BrianS_Hike_2013_4_30_Media.jpg&amp;description=Getting%20away%20from%20it%20all:%20hiking" class="PIN_1368547958180_pin_it_button PIN_1368547958180_pin_it_button_inline PIN_1368547958180_pin_it_none" target="_blank" data-pin-log="button_pinit" data-pin-config="none"><span class="PIN_1368547958180_hidden" id="PIN_1368547958180_pin_count_0"><i></i></span></a>
</div>
<div class="social-anchor-wrapper">
   <a id="plusone-icon" class="pngfix" title="PlusOne" href="https://plusone.google.com/_/+1/confirm?hl=en&amp;url=http://blog.houseparty.com/home-slider/2013/05/13/getting-away-all-hiking/">Google +1</a>
</div>
<div class="social-anchor-wrapper">
<a id="email-icon" class="pngfix" title="Email" href="mailto:?subject=Getting away from it all: hiking&amp;body=Hi.%0A%0aI wanted to share this House Party link with you:%0A%0Ahttp://blog.houseparty.com/home-slider/2013/05/13/getting-away-all-hiking/">Email</a>
</div>

</div>

Open in new window

style

.social-anchor-wrapper{
   float:left;
   display:inline-block;
}
.social-anchor-wrapper.pinterest{
   margin:5px 0 -5px 0;
}

Open in new window

0
 
Kyle HamiltonData ScientistCommented:
a.PIN_1368546337779_pin_it_button {
background-image: url(http://passets.pinterest.com/images/pidgets/bps1.png)!important;
background-repeat: none!important;
background-size: 40px 60px!important;
height: 20px!important;
margin: 5px 0 0;
padding: 0!important;
vertical-align: baseline!important;
text-decoration: none!important;
width: 40px!important;
background-position: 0 -20px;
}

Open in new window


Stop using !important.
0
 
GaryCommented:
Remove the float and height from
#hp-social-bar a

You will then have to adjust the margins for the pin it element.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
lvollmerAuthor Commented:
the javascript creates that CSS - it's hosted by pinterest. even if I add it to my CSS and make my own changes, it is overwritten by pinterests version
0
 
COBOLdinosaurCommented:
It looks to me like the styling is being generated inline and using important; so I'm no sure you can override it unless you are going to wait until the script to generate is runs and then run another script to re-write the element with different inline styling.

I don't know why anyone would give a site that much control of rendering.  

Cd&
0
 
GaryCommented:
The css I was talking about is in your style.css so nothing to do with js.
0
 
lvollmerAuthor Commented:
Gary - i gave that a shot but there is still no effect on the pinit button
0
 
GaryCommented:
Can you upload the changes so I can see.
0
 
Kyle HamiltonData ScientistCommented:
You can wrap the social anchors in divs with the following style:

float: left;
display: inline-block;

then for the pintrest div wrapper, add margins:

margin: 5px 0 -5px 0;
0
 
lvollmerAuthor Commented:
kozaiwaniec - do you have an example? not sure I am 100% following
0
 
lvollmerAuthor Commented:
Gary - I reuploaded the changes you suggested
0
 
GaryCommented:
That looks fine, you just need to adjust the left/right margins
0
 
lvollmerAuthor Commented:
Perfect! thanks!
0
 
Kyle HamiltonData ScientistCommented:
:)
0
 
GaryCommented:
Weird, adding loads of extra code instead of removing two lines of css and adjusting the width or margin by 1px.
0
 
Kyle HamiltonData ScientistCommented:
Gary, he couldn't adjust the CSS. It was being generated with !important attributes
0
 
GaryCommented:
The css adjustment worked, he uploaded the new css and the pinit was centered, all that was needed was a 1px adjustment on either the width or margin to get everything on the same line.
0
 
lvollmerAuthor Commented:
The issue wasn't getting everything on the same line, it was that I couldn't add a margin or padding to the top or bottom of the button.
0
 
GaryCommented:
Removing the two lines of css as I detailed above allowed the padding to apply - when you uploaded that small change I could see the centered pinit button. The only other change you needed was a small adjustment on either the width and margin of 1px.
0
 
lvollmerAuthor Commented:
I am sorry, Gary. I didn't see the change, even after I killed my cache a few times. I don't doubt you are right.
0
 
Kyle HamiltonData ScientistCommented:
It wasn't centered in my browser either
0
 
GaryCommented:
Was in mine, doesn't matter anyway, you have it working.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.