Tweet Link and Facebook Like & Send Buttons Horizontal in Chrome, Safari, and Firefox, but not in Internet Explorer 8

Question

The code below echoes out a Twitter API tweet link and the Facebook Like and Send buttons. They function correctly.

I want them to display horizontally with the Tweet link on the left and the Facebook buttons on the right, and they do in Chrome, Firefox, and Safari. But in Internet Explorer 8, they're not quite horizontal. The order is still the same, but the Tweet link is submerged lower than the level of the Facebook buttons. Screenshots are below.

Chrome:

enter image description here

Internet Explorer 8:

enter image description here

How could I make them appear horizontally in IE 8 like they do in Chrome?

Thanks in advance,

John

The code:

 echo "<div class='commenttweet'>";

 echo "<a href='$url'>Tweet this</a>";

 echo "</div>";


 echo "<div class='commenttweet'>";

 echo "    ";

 echo "</div>"; 


echo '<table class="like">';
echo '<tr>';
echo '<td>';

echo '</td>';
echo '<td>';

echo '<div id="fb-root"></div>';
echo "<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
echo '</script>";

echo '</td>';

echo '</tr>';

echo '</table>';

echo '<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">';

echo '<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="true" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>';

The CSS:

.commenttweet { 
            float: left;
            margin-left:20px;
            margin-top:15px;
            color: #004993;
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 10px;
            font-weight: normal;
            height: 15px;
            padding-bottom: 2px;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;

}

.commenttweet a{ 
            margin-left:0px;
            margin-top:15px;
            color: #004284;
            width:150px;
            border:2px solid #004284;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size: 15px;
            font-weight: normal;
            height: 15px;
            padding-bottom: 2px;
            text-decoration:none;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;

}

.commenttweet a:hover{ 
            margin-left:0px;
            margin-top:15px;
            width:150px;
            background-color: #CAE1FF;
            color: #004284;
            border:2px solid #004284;
            font-family:Georgia, "Times New Roman", Times, serif;
            font-size: 15px;
            font-weight: normal;
            height: 15px;
            padding-bottom: 2px;
            text-decoration:none;
            padding-left: 5px;
            padding-right: 5px;
            padding-top: 2px;

}

table.like {
    float: left;
    margin-top: 5px;
    margin-left: 250px !important;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: #000000;
    width: 550px;
    table-layout: inherit;
    background-color: #FFFFFF;
    border: 2px #FFFFFF;
    border-collapse: collapse;
    border-spacing: 100px;
    padding-left: 200px !important;
    padding-bottom: 0px;
    text-decoration: none;
    vertical-align: text-bottom;    

}

table.like td {
   border: 0px solid #fff;  
   text-align: left; 
   height: 10px;
   width:100px;


}

bpeterson76 bpeterson76 · Accepted Answer · 2011-06-08T22:41:35

For starters, it's not a great idea to be laying out your elements with a table. Divs would be best for all of it.

IE can get a little squirrelly about floats, padding, and the like. That's why it always seems cleaner to "containerize" elements that belong together, such as this case where it all belongs on one line. I'm sure that there is a solution to this exact problem, but I'm not certain that it pays to go forward using a table.

I'd personally do a container div with two left-floated inner divs containing what you want. So, for example :

HTML
    <div class="container">
      <div class="floatleft">tweet button goes here</div>
      <div class="floatleft">facebook button here</div>
    </div>

CSS
    .floatleft {
       float: left;
    }

You can handle spacing via the inner div widths and/or margin/padding.

Consider a Jquery UI Button for your tweet link. It would be a better looking presentation and more like a familiar ui element than a link in a box.

Tweet Link and Facebook Like & Send Buttons Horizontal in Chrome, Safari, and Firefox, but not in Internet Explorer 8

2 Answers