Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Problem z IE 6,7
Forum PHP.pl > Forum > Przedszkole
patryk9200
29.07.2009, 21:44:00
Cześć,
Mam stronę która pod IE8 firefox i operą wyświetla się dobrze natomiast w starszych wersjach ie 6 i 7 strona mi się rozwala, lewe menu ucieka na prawo i częściowo jest za ekranem, a w górnym div'ie tekst się w nim częściowo chowie... w czym problem, i jak to rozwiazać?
kod:
[PHP] pobierz, plaintext 
  1. <?php
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <TITLE> Panel Administracyjny</title>
  6. <META name="author" content="">
  7. <META name="keywords" content="">
  8. <META name="language" content="Polski">
  9. <META HTTP-EQUIV="Creation-date" content="20.04.2005">
  10. <META HTTP-EQUIV="Reply-to" content="">
  11. <META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=utf-8">
  12. <meta name="robots" content="index,follow,all">
  13. <link href="THEMES/index.css" rel="stylesheet" type="text/css" >
  14. <script type="text/javascript" src="THEMES/fixed.js.php"></script>
  15. <!--[if lte IE 7]>
  16. <link href="patch_my_layout.css" rel="stylesheet" type="text/css" >
  17. <![endif]-->
  18. <link rel="Shortcut icon" href="favicon.ico" />
  19. </head>
  20. <body>
  21. <div id="all">
  22.  
  23. <div id="left2"></div><div id="menu"><p id="margines"><center><div style="background: #88aacc; width: 150px; height: 60px;">Witaj!</div></center><br>
  24. Treść:
  25. <ul>
  26. <li><a href="?main=AddOffer"><b>Dodaj ogłoszenie</b></a></li>
  27. <li><a href="?main=menu">Menu</a></li>
  28. <li><a href="http://autos24.pl">Szukaj ogłoszenia</a></li>
  29. </ul>
  30. </p></div>
  31.     <div id="logo"><p id="margines">
  32.      Panel Administracyjny
  33.     <a href="" style="float: right;" style="color: #333333;">version PreAlpha 6.0 Theodora &copy; </a>
  34.     </p></div>
  35.     <div id="tresc"><p id="margines">
  36. <table width="760px"  border="0" bordercolor="red" bgcolor="#919191" cellpadding="5" cellspacing="2"  align="center">
  37. <tr align="center" bgcolor="#b4b8bb">
  38.  
  39.         <td width="25%"  bgcolor="#919191"><a  href="?menu=1">Treść</a></td>
  40.         <td width="25%"><a  href="?menu=2">Moje</a></td>
  41.         <td width="25%"><a  href="?menu=3">Komisy</a></td>
  42.         <td width="25%"><a  href="?menu=4">Ustawienia</a></td>
  43.         </tr><tr>
  44.  
  45. <td><a href="#" title="Dodaj ofertę"><center>
  46. <img src="/ADMIN/THEMES/icon/AddOffer.png" alt="Dodaj ofertę" /><br>
  47. Dodaj ofertę
  48. </a></td>
  49.  
  50. <td><a href="#" title="Dodaj ofertę"><center>
  51. <img src="/ADMIN/THEMES/icon/AddOffer.png" alt="Dodaj ofertę" /><br>
  52. Dodaj ofertę
  53. </a></td>
  54.  
  55. <td><a href="#" title="Dodaj ofertę"><center>
  56. <img src="/ADMIN/THEMES/icon/AddOffer.png" alt="Dodaj ofertę" /><br>
  57. Dodaj ofertę
  58. </a></td>
  59.  
  60. <td><a href="#" title="Dodaj ofertę"><center>
  61. <img src="/ADMIN/THEMES/icon/AddOffer.png" alt="Dodaj ofertę" /><br>
  62. Dodaj ofertę
  63. </a></td></tr><tr>
  64.  
  65. <td><a href="#" title="Dodaj ofertę"><center>
  66. <img src="/ADMIN/THEMES/icon/AddOffer.png" alt="Dodaj ofertę" /><br>
  67. Dodaj ofertę
  68. </a></td>
  69.     </tr></table>
  70. </p><CENTER><BR><BR></div></div>
  71. </body>
  72. </html>
  73. ?>
[PHP] pobierz, plaintext

dodatkowo w starszych wersjach IE nie zmienią się tło na miałe gdy najadę na menu...
kod CSS:
[PHP] pobierz, plaintext 
  1. <?php
  2. @charset "UTF-8";
  3. a:link {color: #1d353d; text-decoration: none}
  4. a:visited {color: #1d353d; text-decoration: none}
  5. a:hover {color: #0e3fbe; text-decoration: none}
  6. a:active {color: #1d353d; text-decoration: none}
  7. img { border:0px }
  8. #margines {
  9. margin: 6px;
  10. }
  11. li:hover {background: white;}
  12. body {
  13.   font-size: 14px;
  14. font-family: Verdana, sans-serif;
  15. color: #333333;
  16. background: #eff1cf;
  17. }
  18. #all {
  19. margin: 0 auto;
  20. width: 990px;
  21. Border: 0px solid black;
  22. position: relative;
  23. }
  24. #logo {
  25. width: 790px;
  26. float: right;
  27. height: 30px;
  28. background: #95a9fb;
  29. }
  30.  
  31. #menu {
  32. background: #838ffe;
  33. Position: fixed; 
  34. height: 560px;
  35. text-align: left;
  36.     width: 200px;
  37.     float: left;
  38.     border: 1px ridge;
  39. }
  40. #left2 {
  41. height: 100px;
  42. text-align: left;
  43.     width: 200px;
  44.     float: left;
  45. }
  46. #tresc {
  47. background: #eae8bf;
  48.  
  49. height: auto;
  50.     width: 790px;
  51.     float: left;
  52.     overflow: hidden;
  53. }
  54. ?>
[PHP] pobierz, plaintext
r4xz
29.07.2009, 21:54:14
czemu masz styl w znacznikach php? ale nie ważne...

Kod
#all {
margin: 0 auto;
position: relative;
}

#menu {
Position: fixed; 
   width: 200px;
   border: 1px ridge;
}


tak na oko.. niewiem czy to porprawi wyświetlanie strony.

nigdy nie łącz width z border - w FF border jest wewnątrz width, natomiast w ie na zewnątrz w rezultacie szerokosc bedzie 202px;

position: fixed; ? niewiem czy to jest potrzebne (przypominam, że oceniam na oko winksmiley.jpg )


position: relative;

to chyba miało być odpowiedzialne za wyśrodkowywanie całości? jeśli w ie chcesz to zrobić proponuje dac 2 divy. w tym bardzien na zewnatrz dac width: 100%; i text-align do srodka, potem drugi o dokladnej szerokosc np,. width: 800px i dac text do lewej/prawe oraz margin 0 auto winksmiley.jpg

to tyle ile moge zauwazyc padniety i zasopany wieczorem ;P



PS możesz dać linka online do tego, przynajmniej nietrzeba bedzie samemu wrzucac i latwiej/szybciej pojdzie
marian2299
29.07.2009, 22:06:06
Może dlatego, że tabela z menu ma "align=center" i jest w divie nie ma "float:left;" ?
patryk9200
29.07.2009, 22:12:42
z tabelą to nic nie moze mieć wspólnego, zawartość div'a treść się dynamicznie zmienia i niezależnie jaka ona jest to ten błąd wyskakuje...
r4xz
29.07.2009, 22:15:55
daj linka to full wersji online to jutro się coś skombinuje ;]
muniekw
30.07.2009, 09:57:29
Stworzyłem mały szablon do Twojego układu. Jak chcesz to powstawiaj sobie swoje treść i powinno dobrze wyświetlać się pod IE 6 i IE 7. Ja sprawdzałem na IE 6. 

[HTML] pobierz, plaintext 
  1. <body>
  2.     <div class="all">
  3.       <div class="header">
  4.         <div class="header_left"></div>
  5.         <div class="header_right">2</div>
  6.       </div>
  7.       <div class="content">
  8.         <div class="menu">3</div>
  9.         <div class="tresc">4</div>
  10.       </div>
  11.     </div>
  12.   </body>
[HTML] pobierz, plaintext


a to style:
Kod
body
{
  text-align: center;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-color: rgb(218,218,218);
}

.all
{
    width: 990px;
    background-color: rgb(153,204,0);
}

.header
{
    width: 990px;
}

  .header_left
    {
      width: 200px;
      float: left;
    }
    
   .header_right
    {
      width: 786px;
      float: right;
      background-color: rgb(51,153,255);
    }

.content
{
  width: 990px;
}

  .menu
    {
      width: 200px;
      height: 300px;
      float: left;
      position: fixed;
      border: 1px rgb(0,0,0) solid;
      background-color: rgb(204,102,102);
    }
  
  .tresc
    {
      width: 786px;
      float: right;
      background-color: rgb(255,204,153);
    }
patryk9200
30.07.2009, 13:22:07
Cytat(muniekw @ 30.07.2009, 10:57:29 ) *
Stworzyłem mały szablon do Twojego układu. Jak chcesz to powstawiaj sobie swoje treść i powinno dobrze wyświetlać się pod IE 6 i IE 7. Ja sprawdzałem na IE 6. 

[HTML] pobierz, plaintext 
  1. <body>
  2.     <div class="all">
  3.       <div class="header">
  4.         <div class="header_left"></div>
  5.         <div class="header_right">2</div>
  6.       </div>
  7.       <div class="content">
  8.         <div class="menu">3</div>
  9.         <div class="tresc">4</div>
  10.       </div>
  11.     </div>
  12.   </body>
[HTML] pobierz, plaintext


a to style:
Kod
body
  {
   text-align: center;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-color: rgb(218,218,218);
  }
  
.all
  {
     width: 990px;
     background-color: rgb(153,204,0);
  }
  
.header
  {
     width: 990px;
  }

   .header_left
     {
       width: 200px;
       float: left;
     }
    
    .header_right
     {
       width: 786px;
       float: right;
       background-color: rgb(51,153,255);
     }

.content
  {
   width: 990px;
  }
  
   .menu
     {
       width: 200px;
       height: 300px;
       float: left;
       position: fixed;
       border: 1px rgb(0,0,0) solid;
       background-color: rgb(204,102,102);
     }
    
   .tresc
     {
       width: 786px;
       float: right;
       background-color: rgb(255,204,153);
     }


Dzięki działa ok winksmiley.jpg
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.