Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] IE źle wyświetla
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kaznodzieja
Witam!

Proszę o pomoc z poprawieniu arkusza CSS dla IE. Stronę http://magistra.pl/ testuje po Operą 10 i FF 3.5 i wszystko jest w porządku, natomiast jak zwykle IE coś nie pasuje. Stworzyłem oddzielny css dla IE ale pomimo kilku godzin prób ciągle nie uzyskałem efektu jaki widać w Operze i FF.

  1. body { 
  2. background : #f5fbfc none repeat scroll 0% 0%;
  3. background-attachment : fixed;
  4. color : #666666;
  5. font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
  6. font-size : 11px;
  7. }
  8. a, a:visited {
  9. color : #0055ff;
  10. text-decoration : none;
  11. }
  12. a:hover, a:active {
  13. color : #ff6600;
  14. text-decoration : none;
  15. }
  16. a img {
  17. border : 0;
  18. }
  19. .ttt {
  20. color : #666666;
  21. }
  22. #recomended {
  23. background : #ffffff none repeat scroll 0% 0%;
  24. border : 1px solid #c0d0e0;
  25. margin-bottom : 20px;
  26. margin-left : 10px;
  27. padding : 10px;
  28. }
  29. #recomended h3 {
  30. background : transparent url(grafika/box_title_bg.gif) no-repeat scroll left top;
  31. color : #d8790e;
  32. display : inline;
  33. float : left;
  34. font-size : 13px;
  35. font-weight : bold;
  36. height : 20px;
  37. margin-top : -10px;
  38. padding : 1px 0 0 0;
  39. position : relative;
  40. text-align : center;
  41. width : 190px;
  42. border : 0 none;
  43. clear : right;
  44. line-height : normal;
  45. margin : 0;
  46. right : -1px;
  47. top : -1.6em;
  48. }
  49. #recomended p {
  50. font-size : 11px;
  51. }
  52. #recomended2 {
  53. background : #ffffff none repeat scroll 0% 0%;
  54. border : 1px solid #c0d0e0;
  55. margin-bottom : 20px;
  56. margin-left : 10px;
  57. padding : 10px;
  58. }
  59. #recomended2 h3 {
  60. background : transparent url(grafika/box_title_bg.gif) no-repeat scroll left top;
  61. color : #d8790e;
  62. display : inline;
  63. float : left;
  64. font-size : 13px;
  65. font-weight : bold;
  66. height : 20px;
  67. margin-top : -10px;
  68. padding : 1px 0 0 0;
  69. position : relative;
  70. text-align : center;
  71. width : 190px;
  72. border : 0 none;
  73. clear : right;
  74. line-height : normal;
  75. margin : 0;
  76. right : -1px;
  77. top : -1.6em;
  78. }
  79. #recomended2 p {
  80. font-size : 11px;
  81. }
  82. #cialo {
  83. background-color : #ffffff;
  84. width : 87%;
  85. height : 100%;
  86. display : table;
  87. }
  88. #naglowek {
  89. background : #f5fbfc url(grafika/logo.jpg) no-repeat scroll center top;
  90. height : 132px;
  91. width : 80%;
  92. display : table-row;
  93. }
  94. #naglowek h1, h2, h3 {
  95. font-family : Georgia, "Times New Roman", Times, serif;
  96. font-weight : normal;
  97. color : #ffffff;
  98. }
  99. #naglowek h1 {
  100. padding : 10px 0 0 50px;
  101. letter-spacing : -1px;
  102. font-size : 2.6em;
  103. }
  104. #naglowek h2 {
  105. margin : -5px 0 0 50px;
  106. font-size : 1.8em;
  107. }
  108. #srodek {
  109. background : #f5fbfc none repeat scroll 0% 0%;
  110. display : table-row;
  111. height : 100%;
  112. width : 100%;
  113. top : 20px;
  114. text-align : left;
  115. }
  116. #menu {
  117. display : table-cell;
  118. height : 100%;
  119. float : left;
  120. text-align : left;
  121. vertical-align : top;
  122. margin : 10px;
  123. padding : 10px;
  124. }
  125. #menu2 {
  126. background : #f5fbfc none repeat scroll 0% 0%;
  127. display : table-cell;
  128. height : 100%;
  129. float : right;
  130. text-align : left;
  131. vertical-align : top;
  132. margin : 10px;
  133. padding : 10px;
  134. }
  135. #strona {
  136. background : #f5fbfc none repeat scroll 0% 0%;
  137. display : table-cell;
  138. font-size : 12px;
  139. vertical-align : top;
  140. padding : 5px 5px 15px 5px;
  141. text-align : left;
  142. margin : 20px;
  143. }
  144. div.stopka {
  145. background : #f5fbfc none repeat scroll 0% 0%;
  146. display : table-row;
  147. vertical-align : middle;
  148. height : 20px;
  149. width : 100%;
  150. text-align : center;
  151. font-size : smaller;
  152. border : 1px solid #000000;
  153. }
  154. .navigacja h1 {
  155. display : block;
  156. background-image : url("grafika/menu.jpg");
  157. background-repeat : repeat-x;
  158. font-size : 12px;
  159. color : #ffffff;
  160. font-weight : bold;
  161. width : 150px;
  162. height : 25px;
  163. padding : 5px 0 5px 5px;
  164. border : 0 solid #ccc;
  165. left : 10px;
  166. }
  167. .navigacja2 {
  168. background : #ffffff none repeat scroll 0% 0%;
  169. border : 1px solid #c0d0e0;
  170. margin-bottom : 20px;
  171. margin-left : 10px;
  172. padding : 10px;
  173. width : 190px;
  174. }
  175. .navigacja2 h3 {
  176. background : transparent url(grafika/box_title_bg.gif) no-repeat scroll left top;
  177. color : #d8790e;
  178. display : inline;
  179. float : left;
  180. font-size : 13px;
  181. font-weight : bold;
  182. height : 20px;
  183. margin-top : -10px;
  184. padding : 1px 0 0 0;
  185. position : relative;
  186. text-align : center;
  187. width : 190px;
  188. border : 0 none;
  189. clear : right;
  190. line-height : normal;
  191. margin : 0;
  192. right : -1px;
  193. top : -1.6em;
  194. }
  195. .navigacja3 {
  196. background : #ffffff none repeat scroll 0% 0%;
  197. border : 1px solid #c0d0e0;
  198. margin-bottom : 20px;
  199. margin-left : 10px;
  200. padding : 10px;
  201. width : 190px;
  202. }
  203. .navigacja3 h3 {
  204. background : transparent url(grafika/box_title_bg.gif) no-repeat scroll left top;
  205. color : #d8790e;
  206. display : inline;
  207. float : left;
  208. font-size : 13px;
  209. font-weight : bold;
  210. height : 20px;
  211. margin-top : -10px;
  212. padding : 1px 0 0 0;
  213. position : relative;
  214. text-align : center;
  215. width : 190px;
  216. border : 0 none;
  217. clear : right;
  218. line-height : normal;
  219. margin : 0;
  220. right : -1px;
  221. top : -1.6em;
  222. }
  223. .obrazek {
  224. float : left;
  225. margin : 5px 5px 5px 5px;
  226. padding : 3px 3px 3px 3px;
  227. border : 1px solid #c0d0e0;
  228. }
  229. .trnaglowek {
  230. border-collapse : 1px collapse;
  231. text-align : center;
  232. }
  233. table.center {
  234. margin-left : auto;
  235. margin-right : auto;
  236. }
  237. .naglowektable {
  238. background-image : url('grafika/menu_strip_bg.jpg');
  239. text-align : center;
  240. font-weight : bold;
  241. }
  242. .parzysty {
  243. background : #f5fbfc;
  244. text-align : center;
  245. }
  246. .nieparzysty {
  247. text-align : center;
  248. }
  249. .male {
  250. font-size : 9px;
  251. }
  252. h4 {
  253. text-align : center;
  254. }
  255.  


krzysztof_kf
hmm pod ie 7 jest okej jeżeli chodzi pod starszą wersję ie bym sprawę bagatelizował bo starą przeglądarkę nikt nie używa exclamation.gif! nie ma sensu ...
Gryf
@krzysztof_kf dziwne u mnie na ie tester pod ie 7 to wygląda tak!
co do problemu to aby coś poukładać przy pomocy float pierw należy określić szerokość obiektu!
poza tym jak to jest do #menu2 dajesz float ale do #strona już nie?
kaznodzieja
Przyznam się szczerze że CSS to moja dobra. Gryf  u mnie wygląda tak samo jak u Ciebie. Może mi dokładnie powiedzieć co gdzie zmienić, i co to za tester IE jest?
krzysztof_kf
Cytat(Gryf @ 14.02.2010, 20:56:07 ) *
@krzysztof_kf dziwne u mnie na ie tester pod ie 7 to wygląda tak!
co do problemu to aby coś poukładać przy pomocy float pierw należy określić szerokość obiektu!
poza tym jak to jest do #menu2 dajesz float ale do #strona już nie?



eee ? może wyczyść cookie bo u mnie jest ok ;/ podaj jaką przeglądarka ie masz wersja stara czy nowa po pod nową jest wszystko OK exclamation.gif!niedawno co formatowałem kompa ;/
Gryf
ieTester aplikacja pozwalająca zobaczyć stronę pod różnymi wersjami ie ;] Link!
już ci prędzej pisałem nadaj szerokości - width dla elementów o ID - #menu2 oraz #strona
mogą to być px lub % oraz do #strona dodaj float'a do lewej ;]
ja bym jeszcze wywalił tą namiastkę tabelek -> display : table-cell; <- nie wiem po co to dali do specyfikacji xP

add..
@krzysztof_kf jeśli chodzi o ie8 to tak wszystko jest OK! ale pod testerem szaleje! i analizując kod powinno szaleć ;]
krzysztof_kf
chyba się nie dogadamy panie autorze pod jaką wersję ie źle wyświetla questionmark.gif?

kaznodzieja
Gryf Dodałem width i float oraz wywaliłem wszystkie display A menu boczne nie chce się podnieść do góry 




krzysztof_kf Używam IE 7

krzysztof_kf
napierw daj jakąś szerokość dla

Kod
#strona {
  width:
  float: left;

dodaj do klasy

Kod
.navigacja 2 {
   float: left;



ja rozumiem a dla żadnej klasy itp nie podałeś szerokości

// moment zobacze po przez testera
kaznodzieja
nie pomogło Rozumiem że ty używasz IE 8
krzysztof_kf
co to jest ?
Kod
.navigacja2 a, a:visited {
/*  right : 10px; ok
kaznodzieja
to jest śmieć Całe style .navigacja2 a, a:visited są zakomentowane. Dodatkowo to są style dla innych przeglądarek nie IE. Style dla IE są w pliku style-ie.css
krzysztof_kf
dodaj do pliku css ie

Kod
}
#strona {
        width: 760px;
        float: left;
}
kaznodzieja
miałem wpisane 70% i zmieniłem na 69% Dzięki za ostatnią podpowiedz i pomoc
krzysztof_kf
nie ma problemu dalej nie wnikałem jest ok aczkolwiek prawa strona nie ma chyba marginesu ze względu inne położenie niż lewa strona
060156
Sprobuj dodac na koncu,moze pomoze
<div style="clear:both"></div>
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.