Leo Breebaart wrote:
> <http://www.kronto.org/test/>.
> ... The problem becomes apparent if you try to focus-cycle through
> the links on the page by hitting the tab key. Not only does this
> look ugly as sin, but more importantly: only part of the icon is
> clickable. Dan's technique only works if the icon is not much
> taller than a single line of text (and if you don't change the
> background colour on :hover or :active).
your CSS
a:focus {
text-decoration: none;
background: #eee;
}
...
#main ul li
{
margin: .5em 0em;
text-indent: -65px;
padding-left: 65px;
padding-bottom: 1em;
padding-top: 6px;
background-repeat: no-repeat;
}
#main ul li a
{
padding-left: 65px;
font-weight: 700;
font-family: sans-serif;
}
/* #main ul li#one */
#one { background-image: url("images/blank-button.gif");}
Since the box of the A has a specified offset to the box of the LI, I
think you could place another background-image on a:focus, matching the
background-image of the LI
#main ul li a:focus {
background: #eee url('blank-button.gif') no-repeat 0 -6px;
text-decoration: none;
}
Works for me in Fx.
Ingo
--
http://www.satzansatz.de/css.html
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
