CSS hover elem nem anhornál IE6-ban
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:Nem nagyon értem, hogy ha kiszedem asorok 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.
■ 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
#hoverpage {
width:600px;
height:500px;
border:1px solid #aaa;
background:#eff;
position:relative;
z-index:500;
overflow:hidden;
margin:25px auto 100px auto;
}
#hoverpage table {
border-collapse:collapse;
margin:-1px;
}
#hoverpage ul#outer {
background:transparent;
padding:0; margin:0;
list-style:none;
}
#hoverpage ul#outer li.page {
display:inline; /* needed for IE to function correctly */
}
#hoverpage ul#outer li.page a.menuitem {
text-decoration:none;
}
#hoverpage ul#outer li.page i {
position:absolute;
display:block;
height:25px;
right:460px;
background:transparent;
cursor:default;
z-index:100;
text-align:right;
text-decoration:none;
color:#00c;
font-style:normal;
cursor:pointer;
}
#hoverpage ul#outer li.p1 i {top:30px;}
#hoverpage ul#outer li.p2 i {top:55px;}
#hoverpage ul#outer li.p3 i {top:80px;}
#hoverpage ul#outer li.p4 i {top:105px;}
#hoverpage ul#outer li.p5 i {top:130px;}
#hoverpage ul#outer li div {
display:block;
width:550px;
height:450px;
padding:25px;
background:#eff;
font-weight:normal;
color:#444;
}
#hoverpage ul#outer li div img {
border:5px solid #fff;
float:left;
margin:0 10px 5px 0;
}
#hoverpage ul#outer li div p.big {
line-height:1em;
color:#004;
font-size:1.5em;
}
#hoverpage ul#outer li div a {
color:#00c;
text-decoration:underline;
}
#hoverpage ul#outer li div em {
display:block;
width:150px;
height:200px;
float:left;
background:#eff url(selected.gif) no-repeat 0 0;
margin-right:20px;
}
#hoverpage ul#outer li.p1 div em {background-position: 0 0;}
#hoverpage ul#outer li.p2 div em {background-position: 0 25px;}
#hoverpage ul#outer li.p3 div em {background-position: 0 50px;}
#hoverpage ul#outer li.p4 div em {background-position: 0 75px;}
#hoverpage ul#outer li.p5 div em {background-position: 0 100px;}
#hoverpage ul#outer li.page div a:hover {text-decoration:none;}
#hoverpage ul#outer li.page a:hover {white-space:normal;}
#hoverpage ul#outer :hover div {position:absolute; left:0; top:0;}
</style>
</head>
<body>
<div id="hoverpage">
<ul id="outer">
<li class="page p1"><a href="#nogo" class="menuitem"><i>John Constable</i><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<p class="big">John Constable</p>
<img src="painters/constable2.jpg" alt="The Hay Wain" title="The Hay Wain" />
<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>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p2"><a href="#nogo" class="menuitem"><i>Claude Monet</i><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<p class="big">Claude Monet</p>
<img src="painters/monet2.jpg" alt="Women in the Garden" title="Women in the Garden" />
<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>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p3"><a href="#nogo" class="menuitem"><i>Vincent Van Gogh</i><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<p class="big">Vincent Van Gogh</p>
<img src="painters/vincent2.jpg" alt="The Starry Night" title="The Starry Night" />
<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>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p4"><a href="#nogo" class="menuitem"><i>Marc Chagall</i><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<p class="big">Marc Chagall</p>
<img src="painters/chagall2.jpg" alt="Adam and Eve" title="Adam and Eve" />
<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>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="page p5"><a href="#nogo" class="menuitem"><i>Pablo Picasso</i><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div>
<em></em>
<p class="big">Pablo Picasso</p>
<img src="akarmi.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
<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>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
#hoverpage ul#outer li.page div a:hover {text-decoration:none;}
#hoverpage ul#outer li.page a:hover {white-space:normal;}
#hoverpage ul#outer :hover div {position:absolute; left:0; top:0;}
Ú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.
