Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z wyświetlaniem DIV'ów w IE
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
garczi
20.07.2006, 12:39:20
Jako że jest to mój pierwszy post- witam wszystkich użytkowników winksmiley.jpg
Mam następujący problem: Stworzyłem prostą stronę opartą na DIV'ach. Wszystko ładnie pięknie, tylko że nie na IE... FF wyświetla ją bez problemu - zgodnie z moimi oczekiwaniami. IE natomiast interpretuje to niezbyt ładnie ;/. DIV'y środkowe [menu oraz treść] powinny być na środku, natomiast w IE są one przesunięte jakieś 500px w prawo. Siedzę nad tym problemem już jakiś czas... próbowałem z różnymi właściwościami position i margin, ale nic z tego. Proszę o wyrozumiałość odnośnie kodu winksmiley.jpg. Dopiero zaczynam zabawę z CSS.
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <title>Title</title>
  5. <link rel="stylesheet" href="style.css" type="text/css" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  7. </head>
  8. <body>
  9.  
  10. <!--calosc-->
  11. <div class="calosc">
  12.  
  13. <!-- logo -->
  14. <div class="logo">
  15. <img src="img/logo.jpg" width="720" height="80" alt="title" border="0" />
  16. </div>
  17. <!-- logo - koniec -->
  18.  
  19. <!-- menu -->
  20. <div class="menu">
  21. <div class="podmenu">>>  <a href="index.php?pokaz=1" title="1">1</a><br /> </div>
  22. <div class="podmenu">>>  <a href="index.php?pokaz=2" title="2">2</a><br />   </div>
  23. <div class="podmenu">>>  <a href="index.php?pokaz=3" title="3">3</a><br />  </div>
  24. </div>
  25. <!--menu - koniec -->
  26.  
  27. <!--tresc-->
  28. <div class="tresc">
  29. <div class="title"> Tytuł</div>
  30. <div class="news">Powstanie strony</div>
  31. </div>
  32. <!--tresc - koniec-->
  33.  
  34. </div>
  35.  
  36. <!--calosc - koniec-->
  37.  
  38. </body>
  39. </html>
[HTML] pobierz, plaintext

CSS:
[HTML] pobierz, plaintext 
  1. <!--
  2.  
  3. body 
  4.  {
  5.   background-color:#FFFFFF;
  6.   background-image: url('img/bg.jpg');
  7.   background-repeat: repeat-x;
  8.   background-position:top;
  9.   margin-top: 20px;
  10.   margin-bottom: auto;
  11.   font-family:Arial;
  12.   font-size:11px;
  13.   color:green;
  14.   text-align:center;
  15.    }
  16.  
  17. .logo
  18.  {
  19.   width:720px;
  20.   height:auto;
  21.   background-color:silver;
  22.   border-top:1px solid silver;
  23.   border-left:1px solid silver;
  24.   border-right:1px solid silver;
  25.   border-bottom:0px;
  26.   text-align:center;
  27.  }
  28.  
  29. .calosc
  30.  {
  31.   width:720px;
  32.   height:auto;
  33.   text-align:center;
  34.   display: block;
  35.   clear:both;
  36.   margin: 0 auto 0 auto; 
  37.  }
  38.  
  39. .menu
  40.  {
  41.   width:190px;
  42.   height:350px;
  43.   background-image: url('img/left.jpg');
  44.   background-repeat: repeat-y;
  45.   font-family:Arial;
  46.   font-size:14px;
  47.   color:green;
  48.   text-align:left;
  49.   border-left:1px solid silver;
  50.   border-top:1px solid silver;
  51.   border-bottom:1px solid silver;
  52.   float:left;
  53.   margin:auto;
  54.   position:absolute;
  55.  }
  56.  
  57. .podmenu
  58.  {
  59.   margin: 10px;
  60.   padding:3px;
  61.   border-bottom: 1px dotted #C0C0C0; 
  62.  }
  63.  
  64. .menu a
  65.   {
  66.    color:green;
  67.    text-decoration:none;
  68.   }
  69.  
  70.  .menu a:visited
  71.   {
  72.    color:green;
  73.    text-decoration:none;
  74.   }
  75.  
  76.  .menu a:hover
  77.   {
  78.    color:green;
  79.    text-decoration:underline;
  80.   }
  81.  
  82.  .tresc
  83.   { 
  84.    background-color:#FFFFFF;
  85.    color:black;
  86.    font-family:Arial;
  87.    font-size:12px;
  88.    text-align:left;
  89.    width:530px;
  90.    height:350px;
  91.    overflow:auto;
  92.    margin-left:190px;
  93.    margin-right:auto;
  94.    margin-top:auto; 
  95.    border:1px solid silver;
  96.    float:left;
  97.    position:absolute;
  98.  }
  99.  
  100.  .tresc p
  101.   {
  102.    margin-left:10px;
  103.    margin-right:10px;
  104.    margin-top:auto;
  105.    margin-bottom:auto;
  106.   }
  107.  
  108.  .tresc a
  109.   {
  110.    color:green;
  111.    text-decoration:underline;
  112.   }
  113.  
  114.  .tresc a:visited
  115.   {
  116.    color:green;
  117.    text-decoration:underline;
  118.   }
  119.  
  120.  .tresc a:hover
  121.   {
  122.    color:silver;
  123.    text-decoration:underline;
  124.   }
  125.  
  126.   .title 
  127.   {
  128.    border-left: 5px solid #35A61A; 
  129.    font-size:14px;
  130.    margin-left:10px; 
  131.    margin-bottom:5px;
  132.    margin-top:8px;
  133.    font-weight: bold;
  134.   }
  135.  
  136. .news 
  137.  {
  138.    border-bottom: 1px solid silver; 
  139.    margin-left:10px;
  140.    margin-right:10px;
  141.    margin-top:10px;
  142.    text-align: justify;
  143.    margin-bottom:10px;
  144.    padding-bottom:10px;
  145.  }
  146.  
  147.  
  148.  
  149. -->
[HTML] pobierz, plaintext


o co chodzi? worriedsmiley.gif
Zajec
20.07.2006, 15:07:26
Zacznij od doctype - nie ma sensu pisać w innym niż strict. Tylko w przypadku tego jednego zachowanie IE da się przewidzieć.
garczi
20.07.2006, 16:01:07
zmieniłem, tylko że to nic nie dało ;]
błąd pewnie leży w css'ie, tylko... gdzie?
btw. http://riddle.jogger.pl/2006/05/09/pisanie...rnet-explorera/ <- fajna strona dla ludzi z problemami podobnymi do moich biggrin.gif

Wie ktoś może co tam jeszcze trzeba poprawić?
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.