Solved

CSS problem

Posted on 2013-05-14
22
438 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
ID: 39165253
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
ID: 39165259
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
ID: 39165278
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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39165283
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
ID: 39165294
The css I was talking about is in your style.css so nothing to do with js.
0
 

Author Comment

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

Expert Comment

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

Expert Comment

by:Kyle Hamilton
ID: 39165328
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
ID: 39165341
kozaiwaniec - do you have an example? not sure I am 100% following
0
 

Author Comment

by:lvollmer
ID: 39165345
Gary - I reuploaded the changes you suggested
0
 
LVL 58

Expert Comment

by:Gary
ID: 39165361
That looks fine, you just need to adjust the left/right margins
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 39165368
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
ID: 39165396
Perfect! thanks!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 39165397
:)
0
 
LVL 58

Expert Comment

by:Gary
ID: 39165414
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
ID: 39165544
Gary, he couldn't adjust the CSS. It was being generated with !important attributes
0
 
LVL 58

Expert Comment

by:Gary
ID: 39165573
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
ID: 39165613
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
ID: 39165632
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
ID: 39165650
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
ID: 39165683
It wasn't centered in my browser either
0
 
LVL 58

Expert Comment

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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

803 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