Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z typem relative - IE
Forum PHP.pl > Forum > Przedszkole
Niedowiarek
4.06.2011, 19:42:57
Witam, właśnie skończyłem pozycjonować moją stronkę, i zauważyłem że position: relative; nie działa w IE :/ (pozycje div'ów poszły się jeb*ć)

Oto strona: Link


Kod:

[CSS] pobierz, plaintext 
  1. body {
  2. font-size: 14;
  3. font-family: segoe print;
  4. background: #61BC3A;
  5. }
  6.  
  7.  
  8. #wrapper {
  9. margin: 0 auto;
  10. }
  11.  
  12. /* Początek nagłówka */
  13.  
  14. #header-wrapper {
  15. width: 100%;
  16. margin: 0; padding: 0;
  17. }
  18.  
  19. #header {
  20. position: relative;
  21. margin: 0 auto;
  22. background: url(header2.png) no-repeat center;
  23. height: 180px;
  24. padding: 0;
  25. overflow: hidden;
  26. }
  27.  
  28. #header-logo {
  29. position: relative; top: 15px; right: 320px;
  30. background: url(head_logo.png) no-repeat center;
  31. height: 150px;
  32. }
  33.  
  34. /* Początek linków */
  35.  
  36. /* Nawigator */
  37.  
  38. #nav {
  39. position: relative; left: 207px; top: 6px;
  40. width: 850px;
  41. }
  42.  
  43. #activ-home {
  44. width: 110px;
  45. height: 50px;
  46. display: inline;
  47. float: left;
  48. background: url(active.png) no-repeat center;
  49. position: relative; bottom: 20px;
  50. }
  51.  
  52. a:link, a:visited { 
  53. text-decoration: none;
  54. color: black;
  55. }
  56.  
  57. a:hover {
  58. color: white;
  59. }
  60.  
  61. a.activ:hover {
  62. color: black;
  63. }
  64.  
  65. /* Nagłówki */
  66.  
  67. h1.logo {
  68. position: relative; bottom: 90px; left: 300px;
  69. font-size: 45;
  70. font-family: times new roman;
  71. color: white;
  72. float: left;
  73. }
  74.  
  75. /* Wykazy */
  76.  
  77. .topmenu ul, li {
  78. font-size: 20;
  79. font-family: times new roman;
  80. list-style-type: none;
  81. display: inline;
  82. color: black;
  83. position: relative; bottom: 13px; right: 82px;
  84. margin: 0px 40px 0px 0px;
  85. padding: 0px;
  86. text-transform: uppercase;
  87. } 
  88.  
  89.  
  90. /* Texty */
  91.  
  92. #text {
  93. display: inblock;
  94. margin: 0 auto;
  95. background: white;
  96. width: 850px;
  97. height: 1000px;
  98. padding: 0;
  99. }
  100.  
  101.  
  102. #left-block {
  103. display: inblock;
  104. background: #c0ffa4;
  105. float: left;
  106. width: 500px;
  107. height: 900px;
  108. position: relative; top: 30px; left: 40px;
  109. overflow: hidden;
  110. }
  111.  
  112. #right-block {
  113. display: inblock;
  114. background: #c0ffa4;
  115. float: left;
  116. width: 250px;
  117. height: 900px;
  118. position: relative; top: 30px; left: 60px;
  119. }
  120.  
  121. /* Stopka */
  122.  
  123. #footer {
  124. display: inblock;
  125. margin: 0 auto;
  126. position: relative;
  127. background: url(header2.png);
  128. width: 850px;
  129. height: 20px;
  130. text-align: right;
  131. font-size: 10;
  132. font-weight: bold;
  133. padding: 0;
  134. }
  135.  
  136. .clear {
  137. clear: both;
  138. display: inline-block;
  139. }
[CSS] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <title>kaXa.pl</title>
  4. <link rel="stylesheet" type="text/css" href="style.css" />
  5. </head>
  6. <body>
  7. <div id="wrapper">
  8.   <div id="header-wrapper">
  9.     <div id="header">
  10. 	  <div id="header-logo"></div>
  11. 	     <h1 class="logo">kaXa.pl</h1>
  12.     <div id="nav">
  13. 	   <div id="activ-home"></div>
  14. 	    <ul class="topmenu">
  15. 		   <li class="topmenu"><a href="index.html" class="activ">Home</a></li>
  16. 		   <li><a href="index.html">Usługi</a></li>
  17. 		   <li><a href="index.html">Galeria</a></li>
  18. 		   <li><a href="index.html">Kontakt</a></li>
  19. 		</ul>
  20.     </div>
  21. 	</div>
  22.   </div>
  23.  <div id="text">
  24.    <div id="left-block"></div>
  25.    <div id="right-block"></div>
  26.  
  27.  </div>
  28.  
  29. <div id="footer">
  30. All made by Bartosz Kubacki
  31. </div>
  32. </div>
  33. </body>
  34. </html>
[HTML] pobierz, plaintext


Zabraniam kopiowania!



Na FF, Chrome i Operze wszystko śmiga, tylko nieszczęsny IE sprawia problemy :/
drozdii07
4.06.2011, 22:32:14
Popatrzylem na nazwe tematu i mi sie odechcialo kod czytac.. nie mozna normmlnie napisac nazwy ?
Niedowiarek
4.06.2011, 22:48:01
A jaka nazwa jest dla Ciebie normalna?

Pomoże ktoś?
mat-bi
4.06.2011, 22:51:12
Człowieku, STFG!

Dlaczego nigdy nie spytacie się wujka?
Daiquiri
4.06.2011, 22:51:21
Jak już wymyślisz tę "normalną" nazwę to podeślij mi na PW, wtedy otworzę temat.
Niedowiarek
4.06.2011, 23:10:21
@mat-bi

Szukałem w google i nie znalazłem, dlatego napisałem tutaj.
mat-bi
4.06.2011, 23:22:07
http://snook.ca/archives/html_and_css/posi...ve_overflow_ie/
Niedowiarek
4.06.2011, 23:26:27
Dodałem relative do wrapper'a i nadal nic :/ Jedynie zaszkodziło to po stronie Opery, z header'a zrobił się przewijany obrazek.
everth
4.06.2011, 23:39:00
Może się mylę ale przy takim źródle jak twoje prawdopodobnie wpadasz w Quirks Mode w IE - popraw to (choćby nadając DOCTYPE) bo możesz walczyć z problemem który nie istnieje wink.gif
Niedowiarek
4.06.2011, 23:43:03
everth jesteś geniusz tongue.gif Dodałem doctype i wszystko ładnie śmiga, dzięki wielkie

I jeszcze jedno pytanko, czy mój kod jest poprawny? Chodzi mi tutaj chyba najbardziej o position: relative. Bo gdzieś przeczytałem że np. DIV znajdujacy się w innym DIV'ie powinien mieć position: absolute, to prawda?
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.