Jak w tytule. Konflikt dwóch zlepków styli powoduje rozjechanie się strony. Na dole screeny, część zlepka i kawalek kodu jquery, który może wywoływać po częsci efekt znikania komenatrzy oznaczyonych tagiem h2.
Jak przywrócić komentarze i sprawić by to wszystko wyglądało jak na drugim screenie?


Dobrze:


Podam część kodu i oba style.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <script type="text/javascript" src="jquery.js"></script> 
  6. <script type="text/javascript"> 
  7. $(document).ready(function() {
  8. 	$("#container p").not("#container li:first").slideUp("slow");
  9. 	$("#container h2 img").click(function() {
  10. 		$("#container p:visible").slideUp("slow");
  11. 		$(this).parent("#container h2").next("#container p").slideDown("slow");
  12. 	});
  13. });
  14. </script> 
  15. </head> 
  16.  
  17. <body> 
  18. <div id="container"> 
  19. 	<ul class="ulowyklas">
  20. 		<li><h2><img class="ulowyklas" src="obrazki/informacje.png" /></h2>
  21. 		<p> 
  22. 		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nunc dolor, pellentesque nec, hendrerit ut, vehicula eget, arcu. Nullam porttitor tortor eget magna varius varius. Nunc at nisl. Nullam vulputate tincidunt enim. Mauris condimentum arcu. Nulla est pede, ullamcorper eget, venenatis at, dictum a, ipsum. Integer dolor. Phasellus aliquam fermentum arcu. Phasellus nec ipsum a tortor vehicula eleifend. Nam porttitor nulla.
  23. 		</p> 
  24. 		</li> 
  25. 		<li><h2><img class="ulowyklas" src="obrazki/kontakt.png" /></h2>
  26. 		<p> 
  27. 		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nunc dolor, pellentesque nec, hendrerit ut, vehicula eget, arcu. Nullam porttitor tortor eget magna varius varius. Nunc at nisl. Nullam vulputate tincidunt enim. Mauris condimentum arcu. Nulla est pede, ullamcorper eget, venenatis at, dictum a, ipsum. Integer dolor. Phasellus aliquam fermentum arcu. Phasellus nec ipsum a tortor vehicula eleifend. Nam porttitor nulla.
  28. 		</p> 
  29. 		</li> 
  30. 		<li><h2><img class="ulowyklas" src="obrazki/kadra.png" /></h2>
  31. 		<p> 
  32. 		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nunc dolor, pellentesque nec, hendrerit ut, vehicula eget, arcu. Nullam porttitor tortor eget magna varius varius. Nunc at nisl. Nullam vulputate tincidunt enim. Mauris condimentum arcu. Nulla est pede, ullamcorper eget, venenatis at, dictum a, ipsum. Integer dolor. Phasellus aliquam fermentum arcu. Phasellus nec ipsum a tortor vehicula eleifend. Nam porttitor nulla.
  33. 		</p> 
  34. 		</li> 
  35. 		<li><h2><img class="ulowyklas" src="obrazki/historia.png" /></h2>
  36. 		<p> 
  37. 		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse nunc dolor, pellentesque nec, hendrerit ut, vehicula eget, arcu. Nullam porttitor tortor eget magna varius varius. Nunc at nisl. Nullam vulputate tincidunt enim. Mauris condimentum arcu. Nulla est pede, ullamcorper eget, venenatis at, dictum a, ipsum. Integer dolor. Phasellus aliquam fermentum arcu. Phasellus nec ipsum a tortor vehicula eleifend. Nam porttitor nulla.
  38. 		</p> 
  39. 		</li> 
  40. 	</ul> 
  41. </div> 
  42. </body> 
  43. </html> 
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. * {
  2. margin : 0;
  3. padding : 0;
  4. }
  5. html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input {
  6. margin : 0;
  7. padding : 0;
  8. }
  9.  
  10. body {
  11. background : #f7f7f7;
  12. font-size : 12px;
  13. font-family : Tahoma, Arial, Helvetica, sans-serif;
  14. color : #333;
  15. text-align : left;
  16. }
  17. h1, h2, h3, h4, h5, h6 {
  18. font-family : Georgia, "Times New Roman", Times, serif;
  19. font-weight : bold;
  20. }
  21. h1 {
  22. font-size : 24px;
  23. line-height : 30px;
  24. }
  25. h2 {
  26. font-size : 20px;
  27. line-height : 26px;
  28. }
  29. h3 {
  30. font-size : 16px;
  31. line-height : 24px;
  32. }
  33. h4 {
  34. font-size : 14px;
  35. line-height : 20px;
  36. }
  37. h5 {
  38. font-size : 14px;
  39. line-height : 20px;
  40. }
  41. h6 {
  42. font-size : 14px;
  43. line-height : 20px;
  44. }
  45. small {
  46. font-size : 10px;
  47. line-height : 16px;
  48. }
  49. dl {
  50. font-size : 12px;
  51. }
  52. #header {
  53. z-index : 1;
  54. position : relative;
  55. margin : 30px auto 0;
  56. height : 60px;
  57. }
  58. #header h1 {
  59. float : left;
  60. padding : 0 0 0 10px;
  61. font-size : 28px;
  62. font-family : Georgia, "Times New Roman", Times, serif;
  63. }
  64. #header h1 a {
  65. color : #222;
  66. line-height : 30px;
  67. }
  68. #header h2 {
  69. float : left;
  70. height : 20px;
  71. overflow : hidden;
  72. line-height : 18px;
  73. padding : 10px 0 0 20px;
  74. color : #222;
  75. font-size : 12px;
  76. font-weight : normal;
  77. }
  78. #rss {
  79. position : absolute;
  80. bottom : -10px;
  81. right : 120px;
  82. }
  83. .entry ul, .entry ol {
  84. margin : 0 30px 18px;
  85. }
  86. .entry li {
  87. line-height : 18px;
  88. }
  89. .entry hr {
  90. display : block;
  91. }
  92. .entry p {
  93. line-height : 18px;
  94. margin : 0 0 18px 0;
  95. }
  96. .entry h1, .entry h2, .entry h3, .entry h4, .entry h5, .entry h6 {
  97. margin : 0 0 18px 0;
  98. color : #555;
  99. }
  100. .entry {
  101. font-size : 13px;
  102. overflow : hidden;
  103. padding : 0 10px;
  104. }
  105. .entry a {
  106. color : #333;
  107. text-decoration : underline;
  108. }
  109. .entry a:hover {
  110. color : #4a630f;
  111. text-decoration : none;
  112. }
  113. .entry img {
  114. background : #fff;
  115. border : 1px solid #ddd;
  116. padding : 5px;
  117. }
  118. .entry table {
  119. background : #fff;
  120. border : 1px solid #ccc;
  121. border-width : 2px;
  122. border-collapse : collapse;
  123. margin : 5px 0 10px;
  124. }
  125. .entry th, .entry td {
  126. border : 1px solid #ccc;
  127. padding : 3px 10px;
  128. text-align : left;
  129. vertical-align : top;
  130. }
  131. .entry .entry tr.even td {
  132. background : #f7f7f7;
  133. }
  134. .entry th {
  135. background : #edeff0;
  136. }
  137. .entry blockquote {
  138. color : #555;
  139. padding : 10px;
  140. margin : 0 0 20px;
  141. border : 1px solid #ddd;
  142. background : #eee;
  143. }
  144. .entry code {
  145. background : #333;
  146. color : #ddd;
  147. }
  148. .entry pre {
  149. font-size : 12px;
  150. width : 95%;
  151. line-height : 16px;
  152. overflow : auto;
  153. font-family : "Courier New", FixedSys;
  154. color : #555;
  155. background : #fafafa;
  156. border-top : 1px solid #ccc;
  157. border-bottom : 1px solid #ccc;
  158. border-left : 15px solid #ccc;
  159. border-right : 1px solid #ccc;
  160. padding : 0 5px 16px;
  161. margin : 0 0 20px;
  162. }
  163.  
  164. .entry p.read-more a, .entry p a.more-link {
  165. display : inline;
  166. font-weight : bold;
  167. color : #4a630f;
  168. text-decoration : none;
  169. background-position : 0% -20px;
  170. }
  171. .entry p a.more-link {
  172. display : block;
  173. margin-top : 18px;
  174. }
  175. .entry p.read-more a:hover, .entry p a.more-link:hover {
  176. color : #999;
  177. }
[HTML] pobierz, plaintext


i ostatni:
[HTML] pobierz, plaintext 
  1. #container {
  2. width : 630px;
  3. margin : 0 auto;
  4. font : 11px tahoma, verdana, sans-seriff;
  5. color : #908673;
  6. line-height : 15px;
  7. margin : 0;
  8. padding : 0;
  9. border : 0;
  10. list-style : none;
  11. }
  12.  
  13. #container div {
  14. width : 630px;
  15. margin : 0 auto;
  16. font : 11px tahoma, verdana, sans-seriff;
  17. color : #908673;
  18. line-height : 15px;
  19. margin : 0;
  20. padding : 0;
  21. border : 0;
  22. list-style : none;
  23. }
  24.  
  25. ul.ulowyklas {
  26. list-style : none;
  27. margin : 0;
  28. padding : 0;
  29. border : 0;
  30. }
  31.  
  32. #container li p {
  33. padding : 4px;
  34. margin : 0;
  35. border : 0;
  36. }
  37.  
  38. img.ulowyklas {
  39. border : 0;
  40. padding : 0px;
  41. }
[HTML] pobierz, plaintext


Style się kłócą, mimo klas i id, dalej to samo. jak z tego wybrnac?
Cały ten kod jest w divie z klasą entry jak widać.
Jak sobie z tym poradzić?

@edit
zrobione. milion prob na stylach i sie udało.