IE6 BUG - hra na honěnou s odkazy – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

IE6 BUG - hra na honěnou s odkazy – CSS – Fórum – Programujte.comIE6 BUG - hra na honěnou s odkazy – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petroff0
Věrný člen
16. 11. 2007   #1
-
0
-

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.–
Reklama
Reklama
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 16 hostů

Podobná vlákna

IE bug — založil Marty_SVK

C bug — založil pr0gr4mm3r

Bug? — založil 7raul

Podpora right u IE6 — založil Petroff

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý