Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Złe wyświetlanie rozwijanego menu pod IE
Forum PHP.pl > Forum > Przedszkole
Nazad
19.04.2010, 10:09:54
Witam serdecznie, zwracam się do Was z kolejnym problemem. Jak zwykle strona nie jest pisana przeze mnie, ja mam ją jedynie poprawić.

Pierwszy problem to niewłaściwe wyświetlanie rozwijanego menu pod IE i prawdopodobnie Operą, pod FF wszystko wygląda ok. Podejrzewałem że to kwestia :hover dla czegoś innego niż "a" jednak wszelkie manipulacje z tym nie pomagały.

EDIT: Ten problem już rozwiązałem
Drugim problemem jest to, że wgrałem teraz na serwer "czystą" wersję strony (taką jaka została mi dostarczona, która wcześniej działała) i obecnie po wejściu na nią przez IE strona wyświetla się na chwilę, a następnie wyświetla 404. Nie mam pojęcia co z tym zrobić.
EDIT: Rozwiązane, pozostaje problem pierwszy

Zamieszczam kod strony:
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-type" content="text/css; charset=ISO-8859-2" />
  5. <!-- TradeDoubler site verification 1746009 --> 
  6. <script type='text/javascript' src='http://mediamedyczne.pl/openxB/www/delivery/spcjs.php?id=2'></script> 
  7. <script language="javascript" type="text/javascript">
  8. window.onload=function(){
  9. if(document.getElementById&&document.
  10. getElementsByTagName&&document.createElement){
  11. var Image_off = new Image();
  12.     Image_off.src = 'obrazek_1.jpg';
  13. var Image_on = new Image();
  14.     Image_on.src = 'obrazek_2.jpg';
  15. var sfield=document.getElementsByTagName('form')[0].elements[0];
  16. if(!sfield){return};
  17. sfield.onfocus=function(){this.value='';this.src = Image_on.src};
  18. sfield.onblur=function(){
  19.          this.src = Image_on.src;
  20. if(!this.value){this.value=''};
  21. }
  22. }
  23. }
  24. </script>
  25. <title>Nowy dizajn Czytelni</title>
  26. <link rel="stylesheet" href="default.css" type="text/css">
  27.   <div class="naglowek">
  28.          <div style="position: absolute;left:450px;top:60;z-index:1;bottom 50px;">
  29.  
  30. <form method="get" action="search.php">
  31.  
  32. <input type="text" name="searchterm" title="" value="" class="searchbox" />
  33.  
  34. <input type="submit" name="szukaj" title="szukaj" value="szukaj" class="searchbutton" />
  35. <a href="szukaj.php"><FONT SIZE=1>Wyszukiwanie zaawansowane </FONT> </a>
  36. </form>
  37.  
  38. </div>
  39.          <img style="position: relative; left: 0px; bottom: -9px;" src="czytelnia.png"/>
  40.          <img style="width: 92px; height: 40px; position: relative; bottom:5px;left:520px;" src="logoborgis.png"/>
  41.          <img style="width: 990px; height: 72px; position: relative; bottom:35px;" src="toptlo1.png"/>
  42.  
  43.   </div>
  44. </head>
  45.  
  46.  
  47.  
  48.  
  49.  
  50.   <body>
  51.   <p class="strona">
  52.   <div class="main">
  53.      <ul id="menu">
  54.       <li><a href="">Czasopisma<br>Online</a>
  55.        <ul class="czasopisma">
  56.       <li><a href="">Medycyna Rodzinna</a></li>
  57.       <li><a href="">New Medicine</a></li>
  58.       <li><a href="">Nowa Medycyna</a></li>
  59.       <li><a href="">Nowa Pediatria</a></li>
  60.       <li><a href="">Nowa Stomatologia</a></li>
  61.        <li><a href="">Postępy Fitoterapii</a></li>
  62.         <li><a href="">Postępy Nauk Medycznych</a></li>
  63.          <li><a href="">Farmako-ekonomika</a></li>
  64.           <li><a href="">Bezpieczna Żywność</a></li>
  65.            <li><a href="">Balneologia Polska</a></li>
  66.             <li><a href="">Anaesthesiology...</a></li>
  67.              <li><a href="">Anestezologia...</a></li>
  68.               <li><a href="">Kosmetyka Naturalna</a></li>
  69.        </ul>
  70.      </li>
  71.      <li><a href="">Książki<br> Online</a>
  72.      <ul id="Ksiazki">
  73.       <li><a href="">Dwa-jeden</a></li>
  74.       <li><a href="">Dwa-dwa</a></li>
  75.       <li><a href="">Dwa-trzy</a></li>
  76.      <li><a href="">Dwa-cztery</a></li>
  77.       <li><a href="">Dwa-pięć</a></li>
  78.       </ul>
  79.      </li>
  80.      <li><a href="">Opublikuj</a>
  81.       <ul id="three">
  82.       <li><a href="">Trzy-jeden</a></li>
  83.       <li><a href="">Trzy-dwa</a></li>
  84.  
  85.       </ul>
  86.      </li>
  87.      <li><a href="">Prenumerata<br>czasopism</a>
  88.       <ul id="four">
  89.  
  90.  
  91.       </ul>
  92.      </li>
  93.      <li><a href="">Newsletter<br>dla lekarzy</a>
  94.       <ul id="five">
  95.  
  96.  
  97.       </ul>
  98.      </li>
  99.      <li><a href="">księgarnia</a>
  100.       <ul id="three">
  101.       <li><a href="">Trzy-jeden</a></li>
  102.       <li><a href="">Trzy-dwa</a></li>
  103.  
  104.       </ul>
  105.      </li>
  106.      <li><a href="">Fitokosmetyki<br>Medyczne</a>
  107.       <ul id="three">
  108.  
  109.       </ul>
  110.      </li>
  111.  
  112.  
  113.  </ul>
  114. </ul>
  115. </div>
  116. <div class="przerwa"></div>
  117.  <br> 
  118. <div style="border: 1px solid #ddd; padding: 5px;"> 
  119. <table> 
  120. <tr><td> 
  121. <div style="width:350px; height:42px; float:left;"> 
  122. <a target="blank" href="http://mediamedyczne.pl/openxB/www/delivery/ck.php?oaparams=2__bannerid=81__zoneid=2__cb=efad7325ca__oadest=http://www.suchynos.pl/" style="color: #066; font-weight: bold; text-decoration: underline; font-family: Verdeana, Helvetica, sans-serif; font-size: 11pt;" align="left" >Swędzenie, pieczenie w nosie?</a><br> 
  123. <a target="blank" href="http://mediamedyczne.pl/openxB/www/delivery/ck.php?oaparams=2__bannerid=81__zoneid=2__cb=efad7325ca__oadest=http://www.suchynos.pl/" style="color: #000000; font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 10pt;" align="left" >Sprawdź, czy to nie suchość nosa.</a> 
  124. </div> 
  125. <div style="width:350px; float: left;"> 
  126. <a target="blank" href="http://mediamedyczne.pl/openxB/www/delivery/ck.php?oaparams=2__bannerid=81__zoneid=2__cb=efad7325ca__oadest=http://www.suchynos.pl/" style="color: #066; font-weight: bold; text-decoration: underline; font-family: Verdeana, Helvetica, sans-serif; font-size: 11pt;" align="left" >Nozoil &ndash; zadbaj o swój nos!</a><br> 
  127. <a target="blank" href="http://mediamedyczne.pl/openxB/www/delivery/ck.php?oaparams=2__bannerid=81__zoneid=2__cb=efad7325ca__oadest=http://www.suchynos.pl/" style="color: #000000; font-weight: normal; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 10pt;" align="left" >Skuteczność potwierdzona badaniami</a> 
  128. </div> 
  129. <div align="right"><a target="blank" href="http://www.mediamedyczne.pl" style="color: #d9d9d9; font-size: 10px; text-decoration: none;">REKLAMA MEDKONTEKST.pl</a></div> 
  130. </td></tr> 
  131. </table> 
  132. </div> 
  133.  
  134.   <div class="skyright">   
  135.      <a target="_blank" href="http://mediamedyczne.pl/openxB/www/delivery/ck.php?oaparams=2__bannerid=81__zoneid=2__cb=efad7325ca__oadest=http://www.suchynos.pl/"><img border="0" src="http://www.czytelniamedyczna.pl/bannery/banner_sn.jpg"></a>
  136. </div> 
  137.  
  138.  
  139.  
  140.  
  141.  
  142.   <a target='_blank' href='http://mediamedyczne.pl/openxB/www/delivery/ck.php?n=02d1b77'><img border='0' alt='' src='http://mediamedyczne.pl/openxB/www/delivery/avw.php?zoneid=24&amp;n=02d1b77' /></a></noscript> 
  143.  
  144.  
  145. <div class="skyright">   
  146.      <a target="_blank" href="http://www.medtube.pl"><img border="0" src="http://www.czytelniamedyczna.pl/bannery/mt_pl.jpg"></a><br><br> 
  147.  
  148.  
  149. </div> 
  150.       </p>
  151.  
  152.   </body>
  153. </html>
[HTML] pobierz, plaintext


i CSS:
[HTML] pobierz, plaintext 
  1. .naglowek{
  2. background-attachment: scroll;
  3. background-clip: border-box;
  4. background-color: transparent;
  5. background-image: url(http://www.czytelniamedyczna.pl/nowaczyt/toptlo.jpg);
  6. background-origin: padding-box;
  7. display: block;
  8. height: 80px;
  9. width: 990px;
  10. }
  11. .skyright{
  12. width:120px;
  13.  
  14. margin-left:870 ;
  15.  
  16. margin-right:20;
  17.  
  18. display: table;
  19.  
  20.  
  21. }
  22. body{
  23.  
  24.  
  25.  border:1px solid #e0e0e0;
  26. margin-left:auto;
  27. margin-right:auto;
  28. width:990px;
  29. height:800px;
  30.  behavior:url("csshover3.htc"); }
  31.  
  32. .grafiki{
  33.     position: relative;
  34.  
  35. }
  36. #menu {
  37. z-index:2;
  38. position:absolute;
  39. margin-left:0px;
  40. margin-right:0px;
  41. margin-top: -16px;
  42. list-style-type: none;
  43.  -webkit-padding-start : 0px;
  44. }
  45.  
  46. #menu li{
  47. float:left;
  48.  
  49.  
  50.  
  51.  
  52.  
  53. }
  54. #menu li li{
  55. list-style-type:none;
  56.  padding:0px 0px;
  57.  margin-top:0px;
  58.  margin-left:auto;
  59.  margin-right:auto;
  60. float:none
  61.  
  62. }
  63. #menu li a {
  64. margin-left:0;
  65. margin-right:0;
  66.  
  67. display:table-cell;
  68. width:135px ;
  69. height:33px;
  70. background:  url("tlo1.gif") repeat-x left;
  71.  
  72. color: #FFFFFF;
  73. text-shadow: 1px 1px 1px #000000;
  74. text-decoration: none ;
  75. text-align:center;
  76. vertical-align: middle;   
  77. font: bold 11px/12px Arial, sans-serif;
  78.  
  79.   }
  80.  
  81. #menu li a:hover {
  82.  background-image: url("tlogray1.gif");
  83.  
  84.  
  85.   text-decoration: none ;
  86.  }
  87.  
  88.  
  89. #menu li ul {
  90.   position: absolute;
  91.   height:0px;
  92.  
  93.   overflow:hidden  ;
  94.  }
  95.  
  96.  #menu li:hover ul {
  97.  display:block;
  98.  margin-left:-40px;
  99.  margin-top:0px;
  100.  margin-right:0px;
  101.  
  102.  height:600px ;
  103.  
  104.  }
  105. .przerwa {
  106.  height: 30px;
  107.  }
  108.  
  109.  
  110. h1{
  111.  
  112. width: 375px;
  113.  
  114. padding: 10px;
  115.  
  116. margin-left: auto;
  117.  
  118. margin-right: auto;
  119.  
  120. background: #339;
  121.  
  122. font: normal 18px Arial, Helvetica, sans-serif;
  123.  
  124. color: #fff;
  125.  
  126. border: 1px solid #000;
  127.  
  128. text-align: center;
  129.  
  130. }
  131.  
  132. h2{
  133.  
  134. font: bold 18px Arial, Helvetica, sans-serif;
  135.  
  136. color: #339;
  137.  
  138. }
  139.  
  140. p{
  141.  
  142. font: normal 10pt Arial, Helvetica, sans-serif;
  143.  
  144. color: #000;
  145.  
  146. }
  147.  
  148. a:link,a:visited{
  149.  
  150. font: normal 10pt Arial, Helvetica, sans-serif;
  151.  
  152. color: #000;
  153.  
  154. text-decoration: none;
  155.  
  156. }
  157.  
  158. a:hover{
  159.  
  160. color: #f00;
  161.  
  162. text-decoration: underline;
  163.  
  164. }
  165.  
  166. .maincontainer{
  167.  
  168. position:relative;
  169.  
  170. width: 250px;
  171.  
  172. padding: 5;
  173.  
  174. margin-left: 450;
  175.  
  176. margin-right: 100;
  177.  
  178. background: #f0f0f0;
  179.  
  180. border: 1px solid #000;
  181.  
  182. }
  183.  
  184. .rowcontainer{
  185.  
  186. padding: 10px;
  187.  
  188. margin-bottom: 10px;
  189.  
  190. background: #ccf;
  191.  
  192. }
  193.  
  194. .searchbox{
  195.  
  196. width: 150px;
  197.  
  198. font: normal 12px Arial, Helvetica, sans-serif;
  199.  
  200. color: #FFFFFF;
  201. background:#B9CDFF; 
  202. }
  203.  
  204. .searchbutton{
  205.  
  206. width: 80px;
  207. background: url("tloblue1.gif")repeat-x;
  208. font: bold 12px Arial, Helvetica, sans-serif;
  209.  
  210. color: #000;
  211.  
  212. }
[HTML] pobierz, plaintext


Oraz link do strony:
Wadliwa strona

Zaznaczam że jestem zielony, bardzo proszę o pomoc!

Pozdrawiam!
krzysztof_kf
19.04.2010, 16:36:39
Gdzie masz dla niektórych klas i id zawartość w css ? puste biggrin.gif bajzer niesamowity poucz się css .
Nazad
23.04.2010, 08:07:28
Tak jak pisałem, to nie moje "dzieło". Z pewnością jednak wezmę sobie Twoją poradę do serca.


W każdym razie czy ktoś dostrzega może jakieś inne problemy w kodzie? Będę bardzo wdzięczny za wszelkie podpowiedzi!
krzysztof_kf
23.04.2010, 14:25:48
całe css do modyfikacji ciężko tam się połapać połowa rzeczy do wyrzucenia dużo pracy przed tobą
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.