Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z Diviami, dobrze wyśiwetla w FF a w IE kaszani
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
R4D3K
27.09.2007, 12:42:45
Witam wszystkich. Otóż tworząc stronę zgodnie ze standardem CSS/xHTML natknąłem się na problem z IE, który nie wyświetla jej jak trzeba. Oto kod stronki (divy są zaznaczone kolorem, css osadzony żeby ułatwić pomoc osobom, które zechcą mi jej udzielić.)

[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" lang="en" xml:lang="en">
  3. <head>
  4.       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5.       <title>Untitled</title>
  6. <style type="text/css">
  7.   body, html 
  8.             { 
  9. 	       margin: 0px;
  10.        	       padding: 0px;
  11.        	       width: 100%;
  12. 	       height: 100%;
  13. 	       background-color: #ffffff;
  14. 	       background-repeat: repeat-x;
  15. 	       text-align: center;
  16. 	       font-family: Tahoma, sans-serif, Arial, Verdana, Helvetica;
  17. 	       color: #000000;	
  18.              }
  19.   #naglowek {
  20.                margin:0px;
  21.                padding:0px;
  22. 	       width:724px;
  23. 	       height:150px;
  24.                float:left;
  25.                text-align:center;
  26.                background-color:yellow;
  27.             }
  28.   #menu     {
  29.                margin:0;
  30.                padding:0;
  31.                width:724px;
  32.                height:40px;
  33.                float:left;
  34.                text-align:left;
  35.                background-color:red;
  36.             }
  37.   #kontener {
  38.  	       margin: auto;
  39.                margin-left: auto;
  40.                margin-right: auto;
  41.  	       padding: 0px;
  42.  	       width: 724px;
  43.  	       height: auto;
  44. 	       min-height:100%; 
  45.                text-align:left; 
  46.                overflow:auto;
  47. 	       background-color:green;        
  48.             }
  49.   #main     {
  50.                padding:0;
  51.                margin:0px;
  52.                width:724px;
  53.                position:relative;top:24px;
  54.                height:auto;
  55.                min-height:400px;
  56.                background-color:blue;
  57.                text-align:left;
  58.                float:left;
  59.             }
  60.   #witamy1  {position:relative;top:0px;left:0px;width:120px;height:40px;visibility:visible;}
  61.   #oferta1  {position:relative;top:-40px;left:120px;width:120px;height:40px;visibility:visible;}
  62.   #promocje1  {position:relative;top:-80px;left:240px;width:120px;height:40px;visibility:visible;}
  63.   #praca1  {position:relative;top:-120px;left:360px;width:120px;height:40px;visibility:visible;}
  64.   #kontakt1  {position:relative;top:-160px;left:480px;width:120px;height:40px;visibility:visible;}
  65.   #download1  {position:relative;top:-200px;left:600px;width:120px;height:40px;visibility:visible;}
  66. </style>
  67. </head>
  68.  
  69. <body>
  70. <div  id="kontener">
  71.    <div  id="naglowek">
  72.       logo  obrazek 724x150 px
  73.    </div>
  74.   <div  id="menu">
  75.      pasek z przyciskami menu 754x40 px
  76.     <div  id="witamy1">1</div> 
  77.     <div  id="oferta1">2</div>
  78.     <div  id="promocje1">3</div>
  79.     <div  id="praca1">4</div>
  80.     <div  id="kontakt1">5</div>
  81.     <div  id="download1">6</div>
  82.   </div>
  83.   <div  id="main">
  84.     <font  color="white">
  85.       ma byc odstęp od menu 24 px. i to jest wlasciwa czesc dokumentu (ta zielona część).
  86.     </font>
  87.   </div>
  88. </div>
  89. </body>
  90. </html>
[HTML] pobierz, plaintext


Bardzo proszę nie zamykać tematu i nie pisać postów tylko poczytaj sobie bo tego jest multum na forum, ponieważ czytając i eksperymentowałem z padding,float itp i oczywiście w FF działa bez zarzutów natomiast w IE się rozjedza, a siedzę już nad tym 2 dzień i nie wiem jak to zrobić.
Chciałbym, żeby div o id menu(ten czerwony) miał wysokość 40 px (ma tyle w FF) natomiast w IE ma więcej i to jest głównym powodem moich problemów, dodatkowo div o id main (niebieski) powień automatycznie dopasowywać się do wielkości strony (parametry auto, gdy tekstu będzie więcej to w FF pojawia sie suwak i można zjechać na dół i wartość min 400px, żeby dobrze umieścić stopkę,a w IE coś wogle innego się z nim dzieje.)

Serdecznie proszę o pomoc z możliwym wyjaśnieniem, żebym wiedział na przyszłość.
Krzysztof Klimonda
27.09.2007, 13:24:19
Może w ten sposób: http://cthulhu.eu.org/xxx/div.html ?
EDIT: Oczywiście zapomniałem o stopce: wersja ze stopką: http://cthulhu.eu.org/xxx/divnew.html
R4D3K
27.09.2007, 17:33:01
Dziękuję Krzysztofie nakierowałeś mnie na ten atrybut !important; dzięki niemu wszystko śmiga czarodziej.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.