Link to home
Create AccountLog in
Avatar of Larry Vollmer
Larry Vollmer

asked on

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
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

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.
Avatar of Gary
Remove the float and height from
#hp-social-bar a

You will then have to adjust the margins for the pin it element.
Avatar of Larry Vollmer
Larry Vollmer

ASKER

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
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&
The css I was talking about is in your style.css so nothing to do with js.
Gary - i gave that a shot but there is still no effect on the pinit button
Can you upload the changes so I can see.
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;
kozaiwaniec - do you have an example? not sure I am 100% following
Gary - I reuploaded the changes you suggested
That looks fine, you just need to adjust the left/right margins
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Perfect! thanks!
Weird, adding loads of extra code instead of removing two lines of css and adjusting the width or margin by 1px.
Gary, he couldn't adjust the CSS. It was being generated with !important attributes
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.
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.
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.
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.
It wasn't centered in my browser either
Was in mine, doesn't matter anyway, you have it working.