Хитрый CSS макет внешних кнопок (как в Facebook и Google Plusone)

Question

Как лучше всего разместить / расположить кнопки Google + 1 и Facebook Like, чтобы они аккуратно совмещались?

В настоящее время первая «вещь» в моем теле - это заголовок, появляющийся поверх всех страниц (слегка измененный после входа в систему): (добавлены разрывы строк для удобства чтения):

<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="left">
      &nbsp;
      <g:plusone size="small" href="https://www.apebroker.com/">
      </g:plusone>
      <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.apebroker.com%2Findex.php&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
      &nbsp;
    </td>
    <td align="left"></td><td align="right">It's more fun after you
      <a href="https://www.apebroker.com/loginform.php">login</a>&nbsp;
    </td>
  </tr>
</table>

Моя проблема в том, что это похоже на дерьмо. Я знаю, что страницы не должны выглядеть одинаково в любом браузере, но приемлемое безобразие имеет свои пределы. Кнопка Google приятно «вертикально центрирована», в то время как фейсбук выглядит как верхняя часть страницы, 0px вниз. Смотрите этот пример:

Я попытался добавить padding:2px; к стилю в iframe на Facebook, и, конечно, он немного упал, но также и кнопка Google, и весь заголовок вырос, опуская вниз <hr>.

Я, очевидно, мало что знаю о фреймах iframe, но я до сих пор справлялся самостоятельно.

В моей глобальной таблице стилей у меня есть (среди прочего) это:

body {
 margin:0px;
 padding:0px; 
 background-color:#e0e0b0; 
 color:#302010;
 font-family:"Trebuchet MS",Helvetica,Sans-serif; 
 font-size:100%;
}

И я не хочу это менять, поскольку это каскадно относится ко всем видам вещей, которые я не хочу нарушать. Если вы хотите проверить полную таблицу стилей и исходный код HTML, пример страницы можно найти здесь .

Заранее благодарим за любые подсказки / предложения!

Answer 1

Как насчет плюс одна кнопка, и ее ширина?

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>

Answer 2

Я нашел исправление для этого, используя инкапсуляцию обоих fb: like и g: plus по отдельности, а затем установив стиль обоих в style = "vertical-align: top;". Смотрите пример на http://www.clonearmycustoms.com/

Answer 3

Проблема заключается в том, что ячейки таблицы сами изменяют размер в зависимости от размера шрифта, хотя в таблице нет текста.

«Правильный» ответ - не использовать таблицы для разметки.

Однако, если вы явно установите:

 <td align="left" style="font-size: 1px">

, тогда ваша жизнь станет немного лучше, поскольку вы сможете явно контролировать высоту каждой из ячеек и позиционировать объекты.В настоящий момент, несмотря на то, что вы «просите» высоту 21px, вы получаете 26px.

После этого кнопка FB будет хорошо выглядеть, и вам нужно будет перемещать кнопку +1 вокруг.

Но реальный ответ - не использовать таблицы:

http://www.w3.org/2002/03/csslayout-howto

http://www.hotdesign.com/seybold/

и другие ...