Solved

CSS problem

Posted on 2013-05-14
22
445 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Create CentOS 7 Newton Packstack Running Keystone

A bug was filed against RDO for the installation of Keystone v3. This guide is designed to walk you through the configuration for using Keystone v3 with Packstack. You will accomplish this using various repos and the Answers file.

 
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

636 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