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
 
Start new topic
Odpowiedzi
Otto
post
Post #2





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

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


Kiedyś coś tam było (IMG:style_emoticons/default/tongue.gif) P

Co do kodu to wiem że jest strasznie chaotyczny ale to jest mój pierwszy raz bez żadnego większego kursu. Da rade to jakoś naprawić bez tracenia kolejnej połowy dnia?
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: 5.10.2025 - 23:03