Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][PHP] Rozjechana strona IE, Mozilla źle Lubie to.
Forum PHP.pl > Forum > Przedszkole
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:

  1. <div id="kontener">
  2. <div class="img_title"><a href="#">Tytuł obrazka</a></div>
  3. <div class="shit">
  4. <a href="#"><img src="Link_Do_Obrazka" alt="Tytuł" title="Tytuł"/></a>
  5. <div class="fb_share" style="margin-bottom: 15px;">
  6. <div class="fb-like" data-href="#" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>
  7. </div>
  8. <div class="clear">
  9. </div>
  10. </div>


CSS:

  1. #kontener{
  2. text-align:left;
  3. margin:0 auto;
  4. width:700px;
  5. clear: left;
  6. position:relative;
  7. top:20px;
  8. background: #212121;
  9. border-top: 1px solid #1d1d1d;
  10. padding: 20px;
  11. font-size: 12px;
  12. border: #000 1px solid;
  13. -webkit-border-radius: 6px;
  14. -moz-border-radius: 6px;
  15. border-radius: 6px;
  16. box-shadow:0px 0px 15px #151515;
  17. }
  18. .shit {
  19. text-align:center;
  20. background-color: #282828;
  21. padding:10px;
  22. margin-top:10px;
  23. margin-bottom:20px;
  24. -webkit-border-radius: 8px;
  25. -moz-border-radius: 8px;
  26. border-radius: 8px;
  27. position:relative;
  28. display:block;
  29. }
  30. .shit img {
  31. max-width: 670px;
  32. }
  33. .img_title {
  34. width:100%;
  35. text-align:left;
  36. }
  37. .img_title a {
  38. font-size:24px;
  39. color:#888877;
  40. font-weight:bold;
  41. }
  42. .fb_share {
  43. padding-top:8px;
  44. margin-left: 115px;
  45. }
  46. .clear {
  47. clear:both;
  48. }


Bardzo proszę o pomoc, z góry dziękuję.
lukesh
Czemu po prostu nie wyświetlisz .fb_share po środku? Ustawiając wysokość, szerokość i margin 0 auto?
GoldeNx3
Jak zrobię tak:

  1. .fb_share {
  2. padding-top:8px;
  3. /*margin-left: 115px;*/
  4. margin: 0 auto;
  5. }


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 wink.gif.
Poza tym nasuwa się pytanie jaką budowę ma styl .fb-like, najprawdopodobniej on jest winowajcą.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.