Z kolegą dobre pół godziny zastanawiamy się nad tym i nie mozemy znaleźc rozwiązania toteż pisze tutaj.
Mam na stronie element z menu (i nie przyczepiajcie się do sposobu jego działania, bo chciałem ominąć js). Wszystko jest pięknei ic acy, tylko niewiadomo czemu jedną z pozycji menu wywala na górę + wyświetla sie tylko element :hover (i tak niepoprawnie). Wszelkie scenariusze jakis z kolegą przyszły nam dogłoby obgadalismy, i sprawdzalismy i nadal nie działa. O dziwo strona działa poprawnie na IE, i to mnie właśnie najbardziej martwi.
Kody poniżej (chodzi o element menu_kontakt)

index.htm
[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 xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="Description" content="Title." />
  7. <meta name="Author" content="Filip Rakowski" />
  8. <link rel="icon" type="image/png" href="img/icon.png" />
  9. <link rel="stylesheet" href="styl.css" />
  10. <title>Fading Colours</title>
  11. </head>
  12.  
  13. <body>
  14. <div id="top">
  15. <div id="menu">    
  16.     <div id="menu_home"> <a href="#"><img src="img/menu_home_click.png" border="0px" alt="Home" /></a> </div>
  17.     <div id="menu_koncerty"> <a href="#"><img src="img/menu_koncerty_click.png" border="0px" alt="Koncerty" /></a> </div>
  18.     <div id="menu_kontakt"> <a href="#"><img src="img/menu_kontakt_click.png" border="0px" alt="Kontakt" /></a> </div>
  19. </div>
  20. </div>
  21. <div id="middle">
  22.  
  23.     <div id="content_pre_top"></div>
  24.     <div id="content">
  25.  
  26.     <!-- INCLUDE START -->
  27.  
  28.     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius, neque id euismod convallis, felis diam blandit lacus, vel ullamcorper orci dolor et sem. Aenean est tellus, malesuada ut gravida ac, gravida sit amet erat. Cras non erat vel sapien condimentum vulputate. Curabitur eu magna lorem. Nunc risus erat, vestibulum porta ultricies a, interdum sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum et quam sit amet mauris placerat tempus. Phasellus vitae quam mauris, a scelerisque erat. Morbi aliquam est vel ipsum interdum bibendum. Ut id leo elit. Maecenas fermentum, sapien id faucibus porta, turpis elit feugiat ligula, ac elementum lacus velit sed arcu. Fusce venenatis placerat lobortis. Fusce molestie turpis quis velit varius bibendum. Phasellus quis nunc ut metus volutpat ultricies ut nec mauris. Cras sollicitudin felis eget purus vulputate semper.
  29.     <br /><br />
  30.     Proin at felis non dui euismod aliquam ut eu felis. Proin sed ipsum at elit semper iaculis eget semper metus. Ut gravida, libero vel volutpat suscipit, magna risus consequat massa, gravida molestie libero leo et nulla. Donec pharetra faucibus diam, sit amet consectetur ante fermentum id. Praesent bibendum mi at turpis volutpat sollicitudin. Nulla neque magna, semper non dignissim nec, tempor hendrerit ante. Integer sollicitudin facilisis tortor sed aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam posuere porta lectus, a porta dui laoreet eu. Suspendisse condimentum felis a mauris eleifend sed pellentesque nulla interdum. Mauris aliquet arcu ac velit vulputate consectetur et sed nisl. Sed quis elit leo, non euismod justo. Nulla ut enim at erat feugiat mattis eu mollis turpis. Quisque nisi justo, sagittis semper iaculis et, pellentesque ultricies erat. Sed quis eros id leo mattis ultrices. Ut quis odio ut urna condimentum tempus at eget odio. Sed vel massa a risus laoreet sodales.
  31.     <br /><br />
  32.     Morbi pellentesque, mauris eget ornare blandit, elit turpis consequat nisl, et suscipit mi arcu lobortis felis. Curabitur purus diam, porttitor sit amet euismod tincidunt, egestas non magna. Phasellus luctus turpis ac sem bibendum in aliquet odio facilisis. Suspendisse ornare ullamcorper pharetra. Vivamus in semper massa. Nunc tempus neque sed velit tempus non sagittis dolor malesuada. Mauris metus turpis, feugiat eget tincidunt at, pellentesque eget elit. Proin varius, dui in facilisis tincidunt, odio nisl tincidunt felis, a facilisis tellus nibh sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ut dolor mi, quis congue lorem. Praesent egestas, libero quis iaculis congue, diam nibh feugiat eros, ac tincidunt mauris arcu eu felis. Aliquam sem turpis, fringilla non ultrices in, consequat id mi. Phasellus ultrices consectetur augue, sit amet ullamcorper nisi venenatis at.     </div>
  33.  
  34.     <!-- INCLUDE STOP -->
  35.  
  36.     </div>
  37.     <div id="content_bottom">
  38.     </div>
  39.  
  40. <div id="footer"></div>
  41. </body>
  42.  
  43. </html>
[HTML] pobierz, plaintext


CSS
[CSS] pobierz, plaintext 
  1.     /* 
  2.  
  3.     Copyright Š by Filip Rakowski
  4.     for Fading Colours.
  5.     All Rights Reserved.
  6.     
  7.     */
  8.  
  9. body {
  10.     background-color: black;
  11.     background-image: url('img/design/tlo.png');
  12.     background-position: right top;
  13.     background-repeat: no-repeat;
  14.     margin: 0px;
  15.     padding: 0px;
  16.     color: #bfbfbf;
  17.     font-family: Arial, Helvetica, sans-serif;
  18.     font-size: 13px;
  19. }
  20.  
  21. div#top {
  22.     height: 224px;
  23.     background-image: url('img/design/top.png');
  24.     background-position: center top;
  25.     background-repeat: no-repeat;
  26. }
  27.  
  28. div#middle {
  29.     overflow-y: auto;
  30.     background-image: url('img/design/middle_bg.png');
  31.     background-position: top;
  32.     background-repeat: repeat-x;
  33. }
  34.  
  35.  
  36.     /* menu */
  37.  
  38.  
  39. div#menu {
  40.     height: 48px;
  41.     width: 423px;
  42.     margin-left: auto;
  43.     margin-right: auto;
  44. }
  45. div#menu_home {
  46.     height: 48px;
  47.     width: 103px;
  48.     background-image: url('img/menu_home.png');
  49.     margin-top: 150px;
  50.     float: left;
  51. }
  52. div#menu_home:hover {
  53.     background-image: url('img/menu_home_hover.png');
  54. }
  55.  
  56. div#menu_koncerty {
  57.     height: 48px;
  58.     width: 170px;
  59.     background-image: url('img/menu_koncerty.png');
  60.     margin-top: 150px;
  61.     float: left;
  62. }
  63. div#menu_koncerty:hover {
  64.     background-image: url('img/menu_koncerty_hover.png');
  65. }
  66.  
  67. }
  68. div#menu_kontakt {
  69.     height: 48px;
  70.     width: 150px;
  71.     background-image: url('img/menu_kontakt.png');
  72.     margin-top: 150px;
  73.     float: left;
  74. }
  75. div#menu_kontakt:hover {
  76.     background-image: url('img/menu_kontakt_hover.png');
  77. }
  78.  
  79.  
  80.     /* content */
  81.  
  82.  
  83. div#content {
  84.     min-height:300px;
  85.     max-height: 3000px;
  86.     margin-left: auto;
  87.     margin-right: auto;
  88.     width: 710px;
  89.     border-left: 1px solid #434343;
  90.     border-right: 1px solid #434343;
  91.     background-image: url('img/design/content_top.png');
  92.     background-repeat: no-repeat;
  93.     padding-top: 17px;
  94.     padding-left: 20px;
  95.     padding-right: 20px;
  96.     padding-bottom: 40px;
  97. }
  98.  
  99. div#content_pre_top {
  100.     height:3px;
  101.     margin-left: auto;
  102.     margin-right: auto;
  103.     width: 752px;
  104.     background-image: url('img/design/content_pre_top.png');
  105. }
  106.  
  107. div#content_bottom {
  108.     width: 752px;
  109.     height: 85px;
  110.     background-image: url('img/design/content_bottom.png');
  111.     margin-left: auto;
  112.     margin-right: auto;
  113. }
  114.  
  115.     /* footer */
  116.  
  117.  
  118. div#footer {
  119.     height: 175px;
  120.     margin-top: 30px;
  121.     background-image: url('img/design/footer.png');
  122.     background-repeat: repeat-x;
  123.     clear: both;
  124. }
  125.  
  126.  
[CSS] pobierz, plaintext