Toto řešení ukazuje, jak opravit chybu objevující se ve Firefoxu při použití často využívané techniky Phark Image Replacement. Po kliknutí se u aktivního active/on-focus objektu objeví ve Firefoxu nehezký tečkovaný okraj. Toto řešení ho pomocí CSS odstraní.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Stu Nicholls. Bližší popis najdete v článku NICHOLLS ACTIVE/FOCUS IMAGE REPLACEMENT NAF-IR.

CSS

.obr_nafir
{
display:block;
width:192px;
height:62px;
margin:20px auto;
}
.obr_nafir a
{
display:block;
width:0;
height:0;
position:relative;
}
.obr_nafir a em
{
display:block;
text-indent:-10000px;
width:190px;
height:60px;
position:absolute;
background:#fff url(„logo.gif“);
border:1px solid #ddd;
cursor:pointer;
}
.obr_nafir a:hover em
{
border-color:#000;
}
.obr_nafir a:active
{
color:#fff;
}
.obr_nafir a:active em, .obr_nafir a:focus em
{
border-color:#c00;
}

XHTML

<html>
<body>
<span class=“obr_nafir“>
<a href=“#“><em title=“homep“>CSS Knihovna</em></a>
</span>
</body>
</html>

Žádný příspěvek v diskuzi

Odpovědět