Previous Message
Next Message

CSS-bulleted lists with large icons

Sent by Ingo Chao on 14 March 2006 23:11


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-REMOVED]]
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/
Previous Message
Next Message

Message thread: