Solved

CSS problem

Posted on 2013-05-14
22
432 Views
Last Modified: 2013-05-14
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
0
Comment
Question by:lvollmer
  • 8
  • 7
  • 6
  • +1
22 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Remove the float and height from
#hp-social-bar a

You will then have to adjust the margins for the pin it element.
0
 

Author Comment

by:lvollmer
Comment Utility
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
The css I was talking about is in your style.css so nothing to do with js.
0
 

Author Comment

by:lvollmer
Comment Utility
Gary - i gave that a shot but there is still no effect on the pinit button
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Can you upload the changes so I can see.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
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
 

Author Comment

by:lvollmer
Comment Utility
kozaiwaniec - do you have an example? not sure I am 100% following
0
 

Author Comment

by:lvollmer
Comment Utility
Gary - I reuploaded the changes you suggested
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
That looks fine, you just need to adjust the left/right margins
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
Comment Utility
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
 

Author Closing Comment

by:lvollmer
Comment Utility
Perfect! thanks!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
:)
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Weird, adding loads of extra code instead of removing two lines of css and adjusting the width or margin by 1px.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
Gary, he couldn't adjust the CSS. It was being generated with !important attributes
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:lvollmer
Comment Utility
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
 
LVL 58

Expert Comment

by:Gary
Comment Utility
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
 

Author Comment

by:lvollmer
Comment Utility
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
It wasn't centered in my browser either
0
 
LVL 58

Expert Comment

by:Gary
Comment Utility
Was in mine, doesn't matter anyway, you have it working.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now