[CSS][PHP] Rozjechana strona IE, Mozilla źle Lubie to. Opcje

[GoldeNx3]

Witam! Mam problem, a mianowicie na Google Chrome strona wygląda idealnie, wszystko się dobrze wyświetla. Na Mozilli przycisk "Lubię to" jest bardzo przesunięty na prawo, na Internet Explorer strona jest rozjechana, dodaję zdjęcia i proszę o pomoc w naprawie:

Google Chrome:
http://fooh.pl/pokaz/2305194539.png

Mozilla:
http://fooh.pl/pokaz/3369522096.png (Lubie to)

Explorer:
http://fooh.pl/pokaz/3129334747.png


Oto kod HTML całej ramki od tekstu do lubie to:

[HTML] pobierz, plaintext 
<div id="kontener">
   <div class="img_title"><a href="#">Tytuł obrazka</a></div>
   <div class="shit">
	<a href="#"><img src="Link_Do_Obrazka" alt="Tytuł" title="Tytuł"/></a>
	<div class="fb_share" style="margin-bottom: 15px;">
	     <div class="fb-like" data-href="#" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
        </div>
        <div class="clear">
   </div>
</div>
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#kontener{
	text-align:left;
	margin:0 auto;
	width:700px;
	clear: left;
	position:relative;
	top:20px;
	background: #212121;
	border-top: 1px solid #1d1d1d;
	padding: 20px;
	font-size: 12px;
	border: #000 1px solid;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	box-shadow:0px 0px 15px #151515;
}
.shit {
	text-align:center;
	background-color: #282828;
	padding:10px;
	margin-top:10px;
	margin-bottom:20px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	position:relative;
	display:block;
}
.shit img {
	max-width: 670px;
}
.img_title {
	width:100%;
	text-align:left;
}
.img_title a {
	font-size:24px;
	color:#888877;
	font-weight:bold;
}
.fb_share {
	padding-top:8px;
	margin-left: 115px;
}
.clear {
        clear:both;
}
[HTML] pobierz, plaintext 

Bardzo proszę o pomoc, z góry dziękuję.

Ten post edytował GoldeNx3 18.04.2012, 12:22:30

[lukesh]

Czemu po prostu nie wyświetlisz .fb_share po środku? Ustawiając wysokość, szerokość i margin 0 auto?

[GoldeNx3]

Jak zrobię tak:

[HTML] pobierz, plaintext 
.fb_share {
	padding-top:8px;
	/*margin-left: 115px;*/
	margin: 0 auto;
}
[HTML] pobierz, plaintext 

To w sumie jest okej, ale na Google Chrome jest lekko w lewo przesunięte (Bo jeszcze licznik po prawej dojdzie jak ktoś kliknie), a na Mozilli jest całkiem w prawo ; /

[lukesh]

Nie wiem, czy to coś pomoże, ale dodaj jeszcze width i height.

[GoldeNx3]

Próbowałem, ale nic nie dało. Głównie chodzi mi o obrazki, by były na równi.

Bardzo proszę o pomoc, bardzo mi na tym zależy. ;(

[ethann]

Skorzystaj z narzędzia które nazywa się Firebug. Ciekawy dodatek do Firefoxa, na pewno Ci pomoże .
Poza tym nasuwa się pytanie jaką budowę ma styl .fb-like, najprawdopodobniej on jest winowajcą.

Ten post edytował ethann 19.04.2012, 13:31:46