Previous Message
Next Message

CSS-bulleted lists with large icons

Sent by Ingo Chao on 14 March 2006 23:11

Leo Breebaart wrote:
> <>.

> ... 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.


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: