Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Problem w IE8/9 explorer
Forum PHP.pl > Forum > Po stronie przeglądarki
axweb
Wykonuję właśnie szablon allegro . Dotąd wydawało mi się że dość dobrze znam css jak i html. Ale tu pojawił się problem jak zwykle w tym nieszczescnym IE.

Na chrome, opera, safari i firefox wyswietla sie wszystko idealnie tak jak chciałem.

Tutaj kod:
  1. <style type="text/css">
  2. .wh.center {
  3. background-color: #1d1d1d;100%;
  4. height: auto;
  5. }
  6. .wh {
  7. width: 1024px;
  8. }
  9. .bg {
  10. background-image: url("http://allegro.axweb.pl/klient/hgt/sprite.jpg");
  11. }
  12. html, body {
  13.  
  14. padding: 0px;
  15. margin: 0px;
  16. }
  17.  
  18. ul, ul li {
  19. display: block;
  20. list-style: none;
  21. margin: 0;
  22. padding: 0;
  23. }
  24.  
  25. ul li {
  26. display: inline;
  27. white-space: nowrap;
  28. float: left;
  29. }
  30. ul a:link, ul a:visited {
  31. text-decoration: none;
  32. display: block;
  33. background: #a85a00 repeat-x center;
  34. color: #fff;
  35. height: 15px;
  36. padding: 23px 20px;
  37. margin-left: 6px;
  38. font-size: 15px;
  39. font-family: Arial;
  40. }
  41. ul a:hover {
  42. background-color: #904e01;
  43. }
  44. .wh.c1 {
  45. height: 34px;
  46. }
  47.  
  48. .bg.logo1 {
  49. height: 34px;
  50. width: 92px;
  51. position: relative;
  52. left: 70px;
  53. }
  54.  
  55. .wh.c3 {
  56. height: 60px;
  57. }
  58. .bg.logo2 {
  59. float: left;
  60. height: 34px;
  61. width: 135px;
  62. position: relative;
  63. left: 90px;
  64. background-position: -95px -0px;
  65. margin-right: 170px;
  66. }
  67. .wh.bg.banner {
  68. height: 275px;
  69. background-repeat: no-repeat;
  70. background-position: -0px -34px;
  71. }
  72.  
  73. .wh.c4 {
  74. height: 60px;
  75. }
  76. .c4a {
  77. padding: 20px 20px;
  78. background: #a85a00;
  79. margin-left: 70px;
  80. height: 20px;
  81. width: 80px;
  82. color: #fff;
  83. font-size: 15px;
  84. font-family: Arial;
  85. }
  86. .c5 {
  87. height: 710px;
  88. width: 954px;
  89. margin-left: 70px;
  90. }
  91. .box1 {
  92. background-color: #fff;
  93. width: 710px;
  94. float: left;
  95. }
  96. .box2 {
  97. background-color: #fff;
  98. width: 200px;
  99. float: left;
  100. margin-left: 20px;
  101. }
  102. .box1a {
  103. background-color: #e6e6e6;
  104. width: 710px;
  105. height: 35px;
  106. }
  107. .box1b {
  108. text-decoration: none;
  109. background-color: #a85a00;
  110. width: 285px;
  111. height: 25px;
  112. padding-top: 10px;
  113. padding-left: 65px;
  114. color: silver;
  115. font-size: 12px;
  116. font-family: tahoma;
  117. }
  118. .box1c {
  119. background-color: #1d1d1d;
  120. width: 100px;
  121. height: 35px;
  122. }
  123. .c5a {
  124. width: 710px;
  125. height: 35px;
  126. }
  127.  
  128.  
  129. <div class="wh center">
  130. <div class="wh c1"></div>
  131. <div class="wh c1">
  132. <div class="bg logo1"></div>
  133. </div>
  134. <div class="wh c3">
  135. <div class="bg logo2"></div>
  136. <ul>
  137. <li>
  138. <a href="http://allegro.pl/my_page.php?uid=24647778">O nas</a>
  139. </li>
  140. <li>
  141. <a href="http://allegro.pl/listing/user.php?us_id=24647778">Nasze aukcje</a>
  142. </li>
  143. <li>
  144. <a href="http://allegro.pl/show_user.php?uid=24647778">Komentarze</a>
  145. </li>
  146. <li>
  147. <a href="http://allegro.pl/SendMailToUser.php?userId=24647778">Zadaj pytanie</a>
  148. </li>
  149. <li>
  150. <a href="http://allegro.pl/myaccount/favourites/favourites_sellers.php/addNew/?userId=24647778">Dodaj do ulubionych</a>
  151. </li>
  152. </ul>
  153. </div>
  154. <div class="wh bg banner"></div>
  155. <div class="wh c1"></div>
  156. <div class="wh c4">
  157. <div class="c4a">
  158. Opis aukcji
  159. </div>
  160. </div>
  161. <div class="c5">
  162. <div class="box1">
  163. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
  164. <div class="c5a">
  165. <div class="box1a"></div>
  166. <div class="box1b">
  167. Wszelkie prawa zastrzezone axweb
  168. </div>
  169. <div class="box1c"></div>
  170. </div>
  171. </div>
  172. <div class="box2">
  173. aaa
  174. </div>
  175. </div>
  176. </div>


A tutaj ew linki z kodem (podswietlenie skladni) http://wklej.to/XQE1y

ps: jeżeli temat założyłem nie zgodnie z zasadami to proszę o pouczenie a nie od razu kasowanie postu smile.gif

Pozdrawiam.
404
Wątpię żeby komuś chciało się zgadywać co Ci się źle wyświetla wink.gif Pokaż chociaż jak to powinno wyglądać. Co do IE to pamiętaj, że rządzi się on własnymi prawami i raczej nie obędzie się bez dodatkowego pliku CSS, który nadpisze klika stylów, aby strona wyświetlała się poprawnie pod tą przeglądarką.
axweb
ohhh przepraszam tongue.gif zapomniałem dać link ^^

Tutaj jak powinno wygladać

http://allegro.axweb.pl/klient/hgt/index.html

404 (fajny nick tongue.gif) . Po prostu jeszcze nie miałem takiej sytuacji. Nie wiem iż to nie chodzi o dziedziczenie w IE odnosnie wlasciowosci width . Musze to spr...
viking
Na początek mógłbyś się zdecydować czy chcesz tam display: inline czy float:left (co daje display: block). Jak float to dla wszystkich.
axweb
Wiekszosc problemow spowodowana byla modelem pudełkowym o którym zapomniałem ;] paddingi wszystko psuły. Ale teraz wszystko działa ok i nawet udało się znacznie skrócić kod.
Link po poprawkach:
http://allegro.axweb.pl/klient/hgt/index.html

Pozdrawiam i dzieki za pomoc smile.gif)
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.