Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS]Dopasowanie do przeglądarki
Otto
post
Post #1





Grupa: Zarejestrowani
Postów: 144
Pomógł: 7
Dołączył: 22.03.2010

Ostrzeżenie: (0%)
-----


Witam mam taki problem mianowicie od wczoraj układam szablon na divach i gdy już go ułożyłem okazało okazało sie że mozilla czyta kod całkiem inaczej niż opera (IMG:style_emoticons/default/tongue.gif) Niby oczywiste ale każdemu może się zdarzyć (IMG:style_emoticons/default/haha.gif) No to zaczołem od nowa pisać pod opere i mozille i natrafiłem na taki problem z którym nie mogę sobie poradzić:

Na operze wygląda tak jak ma wyglądać:

http://img87.imageshack.us/img87/3254/operauw.jpg

a tu widok z mozilli (chodzi mi o drugi news)

http://img96.imageshack.us/img96/4498/mozzila.jpg

Nie wiem czemu tak się dzieje choć drugi news ma taki sam kod jak pierwszy co widać działa w operze

Oto kod css newsów:

  1. #blok23 {
  2. background-image: url(Obrazki/pociete_23.jpg);
  3. width: 680px;
  4. height: 6px;
  5.  
  6. }
  7.  
  8. #blok25 {
  9. background-image: url(Obrazki/pociete_25.jpg);
  10. width: 12px;
  11. height: 53px;
  12. float: left;
  13. }
  14.  
  15. #avatar {
  16. width: 50px;
  17. height: 50px;
  18. float: left;
  19. }
  20.  
  21. #blok27 {
  22. background-color: #1d1d1d;
  23. width: 438px;
  24. height: 17px;
  25. font-family: Arial;
  26. font-size: 16px;
  27. color: #818181;
  28. padding-top: 8px;
  29. padding-left: 6px;
  30. }
  31.  
  32. #blok27 a {
  33. color: #818181;
  34. text-decoration: none;
  35. }
  36.  
  37. #blok27 a:hover {
  38. color: #c00000;
  39. text-decoration: none;
  40. }
  41.  
  42. #blok34 {
  43. background-color: #1d1d1d;
  44. width: 423px;
  45. height: 18px;
  46. font-family: Arial;
  47. font-size: 12px;
  48. color: #4a4a4a;
  49. padding-top: 6px;
  50. padding-left: 21px;
  51. }
  52.  
  53. #blok34 a {
  54. color: #4a4a4a;
  55. text-decoration: none;
  56. }
  57.  
  58. #blok34 a:hover {
  59. color: #c00000;
  60. text-decoration: none;
  61. }
  62.  
  63. #blok28 {
  64. background-image: url(Obrazki/pociete_28.jpg);
  65. width: 38px;
  66. height: 50px;
  67. float: left;
  68. }
  69.  
  70. #news_head_3 {
  71. float: left;
  72. }
  73.  
  74. #news_head_4 {
  75. float: left;
  76.  
  77. }
  78.  
  79. #komentarze {
  80. background-image: url(Obrazki/komentarze.jpg);
  81. width: 120px;
  82. height: 19px;
  83. font-family: Arial;
  84. font-size: 12px;
  85. color: #818181;
  86. padding-top: 5px;
  87. padding-left: 10px;
  88.  
  89. }
  90.  
  91. #komentarze a {
  92. color: #818181;
  93. text-decoration: none;
  94. }
  95.  
  96. #komentarze a:hover {
  97. color: #c00000;
  98. text-decoration: none;
  99. }
  100.  
  101. #blok33 {
  102. background-image: url(Obrazki/pociete_33.jpg);
  103. width: 130px;
  104. height: 2px;
  105.  
  106. }
  107.  
  108. #czytaj {
  109. background-image: url(Obrazki/czytaj.jpg);
  110. width: 120px;
  111. height: 20px;
  112. font-family: Arial;
  113. font-size: 12px;
  114. color: #818181;
  115. padding-top: 4px;
  116. padding-left: 10px;
  117.  
  118. }
  119.  
  120. #czytaj a {
  121. color: #818181;
  122. text-decoration: none;
  123. }
  124.  
  125. #czytaj a:hover {
  126. color: #c00000;
  127. text-decoration: none;
  128. }
  129.  
  130. #blok30 {
  131. background-image: url(Obrazki/pociete_30.jpg);
  132. width: 6px;
  133. height: 50px;
  134. float: left;
  135. }
  136.  
  137. #blok36 {
  138. background-image: url(Obrazki/pociete_36.jpg);
  139. width: 668px;
  140. height: 3px;
  141. float: left;
  142. }
  143.  
  144. #news_body {
  145. background-color: #141414;
  146. width: 675px;
  147. font-family: Arial;
  148. font-size: 12px;
  149. color: #818181;
  150. padding-left: 5px;
  151. }
  152.  
  153. #news_body a {
  154. color: #818181;
  155. font-weight: bold;
  156. text-decoration: none;
  157. }
  158.  
  159. #news_body a:hover {
  160. color: #c00000;
  161. font-weight: bold;
  162. text-decoration: none;
  163. }
  164.  
  165. #news_end {
  166. background-image: url(Obrazki/news_end.jpg);
  167. width: 680px;
  168. height: 15px;
  169. float: left;
  170. }
  171.  
  172. #news {
  173. margin-left: 247px;
  174. }


A tu kod strony:

  1. <div id="news">
  2. <div id="news_head">
  3. <div id="blok23"></div>
  4. <div id="blok25"></div>
  5. <div id="news_head_1">
  6. <div id="news_head_2">
  7. <div id="avatar"><a href="#"><img border="0" src="obrazki/avatar.jpg"></a></div>
  8. <div id="news_head_3">
  9. <div id="blok27"><a href="#">Tytuł wiadomości</a></div>
  10. <div id="blok34">Napisał <a href="#">Otto</a> dnia 02 Kwietnia 2010 w kategorii Portal</div>
  11. </div>
  12. <div id="blok28"></div>
  13. <div id="news_head_4">
  14.  
  15. <div id="komentarze"><a href="#">Komentarze: 23</a></div>
  16. <div id="blok33"></div>
  17. <div id="czytaj"><a href="#">Czytaj dalej...</a></div>
  18. </div>
  19. <div id="blok30"></div>
  20. </div>
  21. <div id="blok36"></div>
  22. </div>
  23. </div>
  24. <div id="news_body">TREŚĆ</div>
  25. <div id="news_end"></div>
  26.  
  27. </div>
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 22.08.2025 - 12:32