Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

CSS problem

Posted on 2013-05-14
22
Medium Priority
?
447 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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 2000 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

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.

Question has a verified solution.

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

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

688 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