броблема с <div> css inline-table в разных броузерах.

djforce · April 5, 2012

Привет, ребят я тут новенький так что не кидайте помидорами))

Есть блог. работаю в гугл хром. есть некая конструкция кнопок Like в дивах. В css написано display: inline-table; в хроме все ок, 5 дивов располагаются в строчку. Открываю мозиллу или ИЕ, так там последний див сползает ниже, т.е. не на сл строку а просто ниже располагается. различные комбинации перепробовал, ни чего не помогает... подскажите что не так плз..

вот хром

вот мозилла

вот сама структура:


<div class="socialbutton">
<div class="likebutt">
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?49"></script>
<script type="text/javascript">
  VK.init({apiId: 1973020, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Like block will be -->
<div id="vk_like"></div>
<script type="text/javascript">
VK.Widgets.Like("vk_like", {type: "vertical", height: 20});
</script>
</div>

<div class="likebutt">
<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>
</div>

<div class="likebutt">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ru_RU/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<html xmlns:fb="http://ogp.me/ns/fb#">
<fb:like send="false" layout="box_count" width="96" show_faces="true" font="tahoma"></fb:like>
</div>

<div class="likebutt">
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ru" data-count="vertical">Твитнуть</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div class="rssbutt">
<noindex><div id="rssentry" style="border:none;  width: 100%; height: 100%;
background-image:url(http://sysrtfm.ru/wp-content/uploads/2011/stories/rss60.png);
background-repeat:no-repeat; background-position:left">
<form style="border:0px solid #ccc;padding:3px;text-align:right;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=sysrtfm', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">Подпишитесь на обновления:<br><p><input name="email" type="text" style="width:170px" value="Введите свой e-mail" class="subscribe_textieldpost" onfocus="if (this.value == 'Введите Ваш e-mail') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Введите свой e-mail';}" /></p><input type="hidden" value="sysrtfm" name="uri"/><input type="hidden" name="loc" value="ru_RU"/><input type="submit" value="Подписаться!" /></form>
</div></noindex>
</div>
</div>

Извиняюсь за то что так много, но как есть, могу без содержимого привести. Вот css для этих дивов:


.likebutt { 
        padding: 2px; 
       display: inline-table;

   }
.rssbutt { 
        width: 240px;
        padding: 2px; 
        display: inline-table;

   }

Вот... игрался с css но ни чего не получается...

SelenIT · April 5, 2012

vertical-align: top/bottom не поможет?

djforce · April 5, 2012

vertical-align: top/bottom не поможет?

Класс!!!! Спасибо! Все так как нужно сделалось))

Жалко плюсануть не могу так как только зарегился..

Edited April 5, 2012 by djforce

djforce · April 9, 2012

vertical-align: top/bottom не поможет?

А еще можете подсказать... у меня почему то в IE та картинка что в первом посту отображается вертикально, т.е. все лайки расположены вертикально... а в остальных горизонтально...

vertical-align: top/bottom не поможет?
А еще можете подсказать... у меня почему то в IE та картинка что в первом посту отображается вертикально, т.е. все лайки расположены вертикально... а в остальных горизонтально...

Т.е. IE9 почему то не понимает

.likebutt {
display: inline-table;}

Ни кто не сталкивался?

Sign In

броблема с <div> css inline-table в разных броузерах.

Question

djforce

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

SelenIT

Link to comment

Share on other sites

djforce

Link to comment

Share on other sites

djforce

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information