Social Buttons Won't Center in Safari and Chrome (IE and FF fine)

HTML & CSS
1

I have a vertical bar that has most of the social buttons in it centered. The div layer starts like:

<div style=" background:url(/images/socialfloat.png) center top; padding:16px 0px 0px 0px; text-align: center; margin:0 auto;">

I checked it out in IE7, IE8, and FireFox 3.x and all have the buttons (which most are loaded by javascript) centered perfectly.

But then I checked Safari and was surprised to see the options aligned right. Chrome did the same thing. Sigh.

I don’t really get it. Any help appreciated.

Cheers
Ryan

2

We won’t be able to get it either without a link or some code :slight_smile:

Preferably a link so we can access the image too.

3

Hey Rayzur,

It’s a development page, and I didn’t want any SEs picking it up, so I DM’d you the link.

I can also just post the code here if you like.

Thanks
Ryan

4

Here is the code too:


<div style="position:relative; width:0px; height:0px; float:left; text-align:center;">
<div style="position:absolute; width:66px; left:-84px; text-align:center;">
<div style=" background:url(/images/socialfloat.png) center top; padding:16px 0px 0px 0px; text-align: center; margin:0 auto;">
<center>
<script type="text/javascript">  
tweetmeme_source = 'site'; 
</script><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
<br />
<br />
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> 
<br />
<br />
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
<br />
<a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a>
<script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script>
<br /><br />
<a class="DiggThisButton DiggMedium"></a>

</center>
<div style=" background:url(/images/socialfloat.png) center bottom; height:28px;"></div>
</div>
</div></div>

Thanks
Ryan

5

Hi,
Those scripts are injecting a lot of css into those buttons and the only way you may be able to override them is by using the !important declaration in your css.

It may not be of much help but I was able to get the “tweet” and “stumbleupon” buttons centered in chrome and safari by nesting them in a span set as display;block with auto margins.

I also removed that <center> tag you were using.

For what it’s worth here is a standalone test case with the inline styles moved to some css selectors.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<style type="text/css">

body {
    background: #fff;
    font-size:8pt;
}
#ad-wrap {
    position:relative;
    float:left;
}
#ad-inner{
    position:absolute;
    width:66px;
    left:0;/*left:-84px*/
}
#ad-padder {
    background:url(http://www.traileraddict.com/images/socialfloat.png) center top;
    padding:16px 0px 0px 0px;
    text-align:center;
}

#ad-padder span {
    display:block;
    margin:auto;
}

#ad-bottom {
    height:28px;
    background:url(http://www.traileraddict.com/images/socialfloat.png) center bottom;
}
</style>
</head>
<body>

<div id="ad-wrap"> 
    <div id="ad-inner"> 
        <div id="ad-padder"> 
            <script type="text/javascript">  
            tweetmeme_source = 'traileraddict'; 
            </script>
            <span>
                <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
            </span>    
            <br />
            <br />
            <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>
            <script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"></script>
            <br />
            <br />
            <span>
                <script type="text/javascript" src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
            </span>           
            <br />            
            <a title="Post on Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a> 
            <script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script> 
            
            <a class="DiggThisButton DiggMedium"></a> 
            
            <div id="ad-bottom"></div> 
        </div> 
    </div>
</div> 

</body>
</html>
6

Thanks for the help.

I ended up having to handle it piecemeal. I took out all center aligns and then all browsers at least agreed on where the buttons should all be placed when not center.

Then I nested each button in span, with each one getting a certain left-padding to make it center.

A bit more code, but at least it looks right in all the browsers now.

Any drawbacks to this?

Ryan

7

You probably handled it the best way for what you had to work with. :slight_smile:

I could not find a one size fits all workaround due to all the scripts styling the buttons differently.

8

Thanks dude.

Your help is much appreciated. I’ve only begun verifying design look in Safari and Chrome (normally just FF, IE7 and IE8), and I’m surprised to find extra cross-browser issues. (sigh)

Much appreciated!
Ryan