Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]position:fixed w ie6 i kilka problemów z ie6
Forum PHP.pl > Forum > Przedszkole
lobopol
3.04.2010, 12:42:29
Tworzę właśnie prostą stronkę o niestandardowych rozmiarach (4000px x 4000px) składającą się z 4 kwadratów z różnymi treściami. Problem pojawił się w menu ponieważ chcę aby zawsze znajdowało się u góry strony, ale niestety ie6 nieco psuje efekt tzn. nie pozwala na ustawienie pozycji fixed. Strona w ie6 wygląda tak:
http://zapodaj.net/7ff4c5f95e73.png.html
a np. w firefoxie (i reszcie przeglądarek)
http://zapodaj.net/865eb9bae168.png.html
Jak wymusić aby w ie6 pozycja menu zawsze była na górze strony?
[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. <title>Untitled Document</title>
  6. <link href="styl.css" rel="stylesheet" type="text/css" />
  7. <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
  8. <script src="skrypt.js" type="text/javascript"></script>
  9. </head>
  10. <body>
  11. <div id="container">
  12.   <div id="menu">
  13.     <ul>
  14.       <li><a href="#top-left">O Mnie</a></li>
  15.       <li><a href="#top-right">Galeria</a></li>
  16.       <li><a href="#bottom-left">Oferta</a></li>
  17.       <li><a href="#bottom-right">Kontakt</a></li>
  18.     </ul>
  19.   </div>
  20.   <div id="left">
  21.     <div id="top-left">
  22.       <div class="inner">
  23.       <div class="in">
  24.         <p>Witam na mojej stronie</p>
  25.         <p>"Lorem ipsum ...</p>
  26.           </div>
  27.       </div>
  28.     </div>
  29.     <div id="bottom-left">
  30.       <div class="inner">
  31.       <div class="in">
  32.         <p>"Lorem ipsum ...</p>
  33.           </div>
  34.       </div>
  35.     </div>
  36.   </div>
  37.   <div id="right">
  38.     <div id="top-right">
  39.       <div class="inner">
  40.       <div class="in">
  41.         <div id="gallery"> 
  42.             <a rel="example_group" href="photos/image1.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="photos/thumb_image1.jpg" /></a> 
  43.             <a rel="example_group" href="photos/image2.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="photos/thumb_image2.jpg" /></a> 
  44.             ...
  45.         </div>
  46.         </div>
  47.       </div>
  48.     </div>
  49.     <div id="bottom-right">
  50.       <div class="inner">
  51.       <div class="in">
  52.         <p>"Lorem ips..</p>
  53.           </div>
  54.       </div>
  55.     </div>
  56.   </div>
  57. </div>
  58. </body>
  59. </html>
[HTML] pobierz, plaintext


css:
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. body {
  3. 	font: 100% Verdana, Arial, Helvetica, sans-serif;
  4. 	background: #fff;
  5. 	margin: 0; 
  6. 	padding: 0;
  7. 	text-align: center;  
  8. 	color: #000000;
  9. }
  10. #container {
  11. 	width:4000px;
  12. 	margin: 0 auto; 
  13. 	text-align: left; /
  14. }
  15. #left{
  16. 	float:left;	
  17. }
  18. #top-left{
  19. 	height:2000px;
  20. 	width:2000px;
  21. 	background: url(images/left-top-gradient.png) repeat-x #8faebc;
  22. }
  23. #bottom-left{
  24. 	height:2000px;
  25. 	width:2000px;
  26. 	background: #999;
  27. }
  28.  
  29. #right{
  30. 	float:right;
  31. }
  32. #top-right{
  33. 	height:2000px;
  34. 	width:2000px;
  35. 	background: #F00;
  36. }
  37. #bottom-right{
  38. 	height:2000px;
  39. 	width:2000px;
  40. 	background: #3C0;
  41. }
  42.  
  43. .inner{
  44. 	position:absolute;
  45. 	margin:60px 0 0 20px;
  46. 	width:980px;
  47. 	background: #fff;
  48. }
  49. .inner .in{
  50. 	padding:20px;
  51. }
  52.  
  53. #menu{
  54. 	width:400px;
  55. 	background-color:#666;
  56. 	margin-left:40px;
  57. 	position:absolute;position:fixed;
  58. 	z-index: 50;
  59. }
  60. li{
  61. 	list-style:none;
  62. 	float:left;
  63. 	padding:10px 10px 10px 0;
  64. }
  65. a, a:visited{
  66. 	text-decoration:none;
  67. 	color:#000;
  68. 	text-transform:uppercase;
  69. }
  70. a img {
  71. 	border: 0px solid #BBB;
  72. 	padding: 2px;	
  73. 	margin: 10px 0 10px 25px;
  74. 	vertical-align: top;
  75. }
[HTML] pobierz, plaintext
blooregard
3.04.2010, 12:55:06
IE 6 nie obsługuje position:fixed.

Jest rozwiązanie tego problemu na kilka sposobów, najprostszy to taki mały myk w CSS, który na bieżąco oblicza odległość elementu, saemu będąc pozycjonowany jako absolute.

Znajdziesz w necie, wystarczy w google wpisać "position:fixed ie6".

Ja polecam sposób zaprezentowany na http://perfectionorvanity.com/
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.