TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Věrný člen
Nemá nic společného s podobně nazvanou chybou IE (u plovoucích prvků).
K téhle dochází v kódu který emuluje position:fixed u ie6 pomocí absolutního umístění => menu ukotvené k hornímu okraji okna.
Pokaždé kdy dojde (při pohybu myší) ke změně stavu a:hover nějakého odkazu, následuje rozhození textu a umístěných prvků.
Je-li odkaz součástí textu, tak přitom ulítne třeba na druhý konec okna (zkuste stihnout na něj kliknout !!)
Jediné "imunní" odkazy jsou paradoxně ty v ukotveném menu.
Jinak se stránka chová korektně.
Hledal jsem v několika IE-bugových portálech, ale na tento případ jsem nenarazil.
Pouze na http://www.satzansatz.de/cssd/pseudocss.html#hoverjump v pasáži Jump on :hover as a consequence of the re-flow se píše něco o opětovném přeskupení layoutu (při skoku na hover) pokud je umístění prvků v nepořádku - moc tomu nerozumím, snažil jsem se mít všechny rozměry pod kontrolou.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Emulate FIXED [BUG on HOVER LINKS]</title>
<style type="text/css">
* {margin: 0; padding: 0}
body { width: 100%; text-align: center; background: #AAA }
h3 { padding: 50px 0 1ex 0 }
p { margin: 0 100px }
a:link, a:visited {
display: inline-block;
padding: 0;
color: blue;
border: 0px solid gray;
text-decoration: none;
}
a:hover {
display: inline-block;
padding: 0;
color: orange;
border-color: orange;
text-decoration: underline overline;
}
#menu {
position:fixed;
left:0;
width:100%;
top:0;
height:20px;
vertical-align: middle;
}
#menu ul {
list-style: none;
padding: 11px 1ex;
border: 1px solid white;
background:black;
font: bold 17px/18px sans-serif;
}
#menu ul li { display:inline }
#menu a:link, #menu a:visited {
border-top: 1px solid #CCC;
border-bottom: 1px solid #CCC;
margin: 0 5px;
padding: 2px 1px;
color: #AAA;
}
#menu a:hover {
color: #FFF;
padding: 0 1px;
border-top: 3px outset #FFF;
border-bottom: 3px inset #FFF;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html { overflow:hidden; width:100%}
body { overflow:auto; width:100%; height:100%}
#menu { position:absolute}
</style>
<![endif]-->
</head>
<body>
<div id="menu" >
<ul>
<li><a href="#clanek-1">První</a></li>
<li><a href="#clanek-2">Druhý</a></li>
<li><a href="#clanek-3">Třetí</a></li>
<li><a href="#foto">Fotografie</a></li>
</ul>
</div>
<div id="clanek-1">
<h3>První článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi.<a href="#1">Vestibulum</a> scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
</div>
<div id="clanek-2">
<h3>Druhý článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor <a href="#2">velodio</a>. Nullam viverra lobortis lorem.</p>
</div>
<div id="clanek-3">
<h3>Třetí článek </h3>
<p>Pellentesque non augue ac felis rutrum imperdiet. Nullam ante libero, luctus
vitae, hendrerit at, rhoncus in, augue
<a href="http://www.zvlasnyskola.cz/img/fotogalerie/fontana_rijen_2000/big_v/font10_00_big_v_miki.jpg">
[foto]. </a> Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla semper rhoncus eros. Liber
Maecenas pulvinar libero vitae nisi. Vestibulum scel felis a fermentum
imperdiet, nisi magna adipiscing nibh, in blandit nisi quam sed purus. Aliquam
commodo libero elei fend ipsum. Aliquam consequat fringilla sem. Donec at nun.
Curabitur dictum vulputate tellus. Phasellus quam ma endrerit, feugiat in,
commodo ut, zap musnibh. Vivamus vel nibhonec aliquam ultrices risus. Curabitur
fermentummu sdolor velodio. Nullam viverra lobortis lorem.</p>
NA ZAČÁTEK:<a href="#clanek-1"><span>▲</span></a>
</div>
<div id="foto">
<h3>Fotogallery</h3>
<img id="imgB" alt="Catch22" src="http://www.zvlasnyskola.cz/img/fotogalerie/fontana_rijen_2000/big_v/font10_00_big_v_miki.jpg" />
</div>
</body>
</html>
Nahlásit jako SPAM
IP: 89.102.211.–
Zjistit počet nových příspěvků
