ugrás a tartalomhoz

CSS hover elem nem anhornál IE6-ban

hovszabolcs · 2009. Szep. 26. (Szo), 14.58
Sziasztok!

Eddig mindenhol azt olvastam, hogy IE6 alatt csak az anchor elemen működik a hover pseudo, a többire hacket kell írni. Itt egy kód, aminek nincs hackje:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
  2.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3.   
  4. <html>  
  5. <head>  
  6. <style type="text/css">  
  1. #hoverpage {  
  2.     width:600px;  
  3.     height:500px;  
  4.     border:1px solid #aaa;  
  5.     background:#eff;  
  6.     position:relative;  
  7.     z-index:500;  
  8.     overflow:hidden;  
  9.     margin:25px auto 100px auto;  
  10. }  
  11. #hoverpage table {  
  12.     border-collapse:collapse;  
  13.     margin:-1px;  
  14. }  
  15. #hoverpage ul#outer {  
  16.     background:transparent;  
  17.     padding:0; margin:0;  
  18.     list-style:none;  
  19. }  
  20.   
  21. #hoverpage ul#outer li.page {  
  22.     display:inline;   /* needed for IE to function correctly */  
  23. }   
  24.   
  25. #hoverpage ul#outer li.page a.menuitem {  
  26.     text-decoration:none;  
  27. }  
  28.   
  29. #hoverpage ul#outer li.page i {  
  30.     position:absolute;  
  31.     display:block;  
  32.     height:25px;  
  33.     right:460px;  
  34.     background:transparent;  
  35.     cursor:default;  
  36.     z-index:100;  
  37.     text-align:right;  
  38.     text-decoration:none;  
  39.     color:#00c;  
  40.     font-style:normal;  
  41.     cursor:pointer;  
  42. }  
  43.   
  44. #hoverpage ul#outer li.p1 i {top:30px;}  
  45. #hoverpage ul#outer li.p2 i {top:55px;}  
  46. #hoverpage ul#outer li.p3 i {top:80px;}  
  47. #hoverpage ul#outer li.p4 i {top:105px;}  
  48. #hoverpage ul#outer li.p5 i {top:130px;}  
  49.   
  50.   
  51. #hoverpage ul#outer li div {  
  52.     display:block;  
  53.     width:550px;  
  54.     height:450px;  
  55.     padding:25px;  
  56.     background:#eff;  
  57.     font-weight:normal;  
  58.     color:#444;  
  59. }  
  60. #hoverpage ul#outer li div img {  
  61.     border:5px solid #fff;  
  62.     float:left;  
  63.     margin:0 10px 5px 0;  
  64. }  
  65. #hoverpage ul#outer li div p.big {  
  66.     line-height:1em;  
  67.     color:#004;  
  68.     font-size:1.5em;  
  69. }  
  70. #hoverpage ul#outer li div a {  
  71.     color:#00c;  
  72.     text-decoration:underline;  
  73. }  
  74. #hoverpage ul#outer li div em {  
  75.     display:block;  
  76.     width:150px;  
  77.     height:200px;  
  78.     float:left;  
  79.     background:#eff url(selected.gif) no-repeat 0 0;  
  80.     margin-right:20px;  
  81. }  
  82.   
  83. #hoverpage ul#outer li.p1 div em {background-position: 0 0;}  
  84. #hoverpage ul#outer li.p2 div em {background-position: 0 25px;}  
  85. #hoverpage ul#outer li.p3 div em {background-position: 0 50px;}  
  86. #hoverpage ul#outer li.p4 div em {background-position: 0 75px;}  
  87. #hoverpage ul#outer li.p5 div em {background-position: 0 100px;}  
  88.   
  89. #hoverpage ul#outer li.page div a:hover {text-decoration:none;}  
  90.   
  91. #hoverpage ul#outer li.page a:hover {white-space:normal;}   
  92.   
  93. #hoverpage ul#outer :hover div {position:absolute; left:0; top:0;}  
  1. </style>  
  2. </head>  
  3. <body>  
  4.   <div id="hoverpage">  
  5.   
  6.     <ul id="outer">  
  7.   
  8.       <li class="page p1"><a href="#nogo" class="menuitem"><i>John Constable</i><!--[if gte IE 7]><!--></a><!--<![endif]-->  
  9.         <!--[if lte IE 6]><table><tr><td><![endif]-->  
  10.         <div>  
  11.           <em></em>  
  12.           <p class="big">John Constable</p>  
  13.           <img src="painters/constable2.jpg" alt="The Hay Wain" title="The Hay Wain" />  
  14.           <p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>  
  15.         </div>  
  16.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  17.       </li>  
  18.   
  19.       <li class="page p2"><a href="#nogo" class="menuitem"><i>Claude Monet</i><!--[if gte IE 7]><!--></a><!--<![endif]-->  
  20.         <!--[if lte IE 6]><table><tr><td><![endif]-->  
  21.         <div>  
  22.           <em></em>  
  23.           <p class="big">Claude Monet</p>  
  24.           <img src="painters/monet2.jpg" alt="Women in the Garden" title="Women in the Garden" />  
  25.           <p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="#">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>  
  26.   
  27.         </div>  
  28.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  29.       </li>  
  30.   
  31.       <li class="page p3"><a href="#nogo" class="menuitem"><i>Vincent Van Gogh</i><!--[if gte IE 7]><!--></a><!--<![endif]-->  
  32.         <!--[if lte IE 6]><table><tr><td><![endif]-->  
  33.         <div>  
  34.           <em></em>  
  35.           <p class="big">Vincent Van Gogh</p>  
  36.           <img src="painters/vincent2.jpg" alt="The Starry Night" title="The Starry Night" />  
  37.           <p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman</p>  
  38.         </div>  
  39.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  40.       </li>  
  41.   
  42.       <li class="page p4"><a href="#nogo" class="menuitem"><i>Marc Chagall</i><!--[if gte IE 7]><!--></a><!--<![endif]-->  
  43.         <!--[if lte IE 6]><table><tr><td><![endif]-->  
  44.         <div>  
  45.           <em></em>  
  46.           <p class="big">Marc Chagall</p>  
  47.           <img src="painters/chagall2.jpg" alt="Adam and Eve" title="Adam and Eve" />  
  48. <p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>  
  49.         </div>  
  50.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  51.       </li>  
  52.   
  53.       <li class="page p5"><a href="#nogo" class="menuitem"><i>Pablo Picasso</i><!--[if gte IE 7]><!--></a><!--<![endif]-->  
  54.         <!--[if lte IE 6]><table><tr><td><![endif]-->  
  55.         <div>  
  56.           <em></em>  
  57.           <p class="big">Pablo Picasso</p>  
  58.           <img src="akarmi.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />  
  59.           <p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>  
  60.         </div>  
  61.         <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  62.       </li>  
  63.   
  64.     </ul>  
  65. </div>  
  66. </body>  
  67. </html>  
Nem nagyon értem, hogy ha kiszedem a
  1. #hoverpage ul#outer li.page div a:hover {text-decoration:none;}  
  2.   
  3. #hoverpage ul#outer li.page a:hover {white-space:normal;}   
  4.   
  5. #hoverpage ul#outer :hover div {position:absolute; left:0; top:0;}  
sorok közül bármelyiket, akkor nem működik IE6-ban.
Úgy gondolom, hogy az utolsó sor lenne, ami meghatározza a dolgot.
Miért szükséges az előtte lévő 2 elem IE6-ban?
Előre is köszönöm mindenki válaszát.
‹ Dreamweaver CS4 CKeditor betöltési probléma ›
 ■